Bootstrap介绍
Bootstrap是Twitter开源的基于HTML、CSS、Javascript的前端框架。
它是为实现快速开发Web应用程序而设计的一套前端工具包。
它支持响应式布局&＃xff0c;并且在V3版本之后坚持移动设备优先。
为什么要使用Bootstrap&＃xff1f;
在Bootstrap出现之前&＃xff1a;
命名&＃xff1a;重复、复杂、无意义&＃xff08;想个名字费劲&＃xff09;
样式&＃xff1a;重复、冗余、不规范、不和谐
页面&＃xff1a;错乱、不规范、不和谐
在使用Bootstrap之后&＃xff1a; 各种命名都统一并且规范化。 页面风格统一&＃xff0c;画面和谐。
Bootstrap下载
官方地址&＃xff1a;https://getbootstrap.com
中文地址&＃xff1a;http://www.bootcss.com/
我们使用V3版本的Bootstrap&＃xff0c;我们下载的是用于生产环境的Bootstrap。
Bootstrap环境搭建
目录结构&＃xff1a;
bootstrap-3.3.7-dist/
├── css // CSS文件
│ ├── bootstrap-theme.css // Bootstrap主题样式文件
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css // 主题相关样式压缩文件
│ ├── bootstrap-theme.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css // 核心CSS样式压缩文件
│ └── bootstrap.min.css.map
├── fonts // 字体文件
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
└── js // JS文件├── bootstrap.js├── bootstrap.min.js // 核心JS压缩文件└── npm.js
处理依赖
由于Bootstrap的某些组件依赖于jQuery&＃xff0c;所以请确保下载对应版本的jQuery文件&＃xff0c;来保证Bootstrap相关组件运行正常。
Bootstrap全局样式
排版、按钮、表格、表单、图片等我们常用的HTML元素&＃xff0c;Bootstrap中都提供了全局样式。
我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式&＃xff0c;从而使我们的页面更美观和谐。
标题相关
标题
一级标题36px
二级标题30px
三级标题24px
四级标题18px
五级标题14px
六级标题12px
一级标题36px
二级标题30px
三级标题24px
四级标题18px
五级标题14px
六级标题12px
副标题
一级标题小标题
文本对齐
文本左对齐
文本居中
文本右对齐
文本大小写
Lowercased text.
Uppercased text.
Capitalized text.
表格
| Class | 描述 |
| .table-striped | 条纹状表格 |
| .table-bordered | 带边框的表格 |
| .table-hover | 鼠标悬停变色的表格 |
| .table-condensed | 紧缩型表格 |
| .table-responsive | 响应式表格 |
状态类
| Class | 描述 |
|---|---|
.active | 鼠标悬停在行或单元格上时所设置的颜色 |
.success | 标识成功或积极的动作 |
.info | 标识普通的提示信息或动作 |
.warning | 标识警告或需要用户注意 |
.danger | 标识危险或潜在的带来负面影响的动作 |
表单
内联表单
表单状态
带图标的表单
按钮
按钮样式
按钮大小
图片
图片形状
辅助类
文本颜色
p class&＃61;"text-muted">...
...
...
...
...
...
背景颜色
...
...
...
...
...
关闭按钮
下拉三角
快速浮动
内容块居中
清除浮动
显示与隐藏
常用Bootstrap组件
- 字体图标
- 下拉菜单
- 按钮组
- 输入框俎
- 导航
- 分页
- 标签和徽章
- 页头
- 缩率图
- 进度条
模拟滚动的进度条&＃xff1a;
模拟滚动的进度条
京公网安备 11010802041100号