Bootstrap介绍

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。

它是为实现快速开发Web应用程序而设计的一套前端工具包。

它支持响应式布局，并且在V3版本之后坚持移动设备优先。

为什么要使用Bootstrap？

在Bootstrap出现之前：

命名：重复、复杂、无意义（想个名字费劲）

样式：重复、冗余、不规范、不和谐

页面：错乱、不规范、不和谐

在使用Bootstrap之后： 各种命名都统一并且规范化。 页面风格统一，画面和谐。

Bootstrap下载

官方地址：https://getbootstrap.com

中文地址：http://www.bootcss.com/

我们使用V3版本的Bootstrap，我们下载的是用于生产环境的Bootstrap。

Bootstrap环境搭建

目录结构：

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，所以请确保下载对应版本的jQuery文件，来保证Bootstrap相关组件运行正常。

Bootstrap全局样式

排版、按钮、表格、表单、图片等我们常用的HTML元素，Bootstrap中都提供了全局样式。

我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式，从而使我们的页面更美观和谐。

标题相关

标题

一级标题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	标识危险或潜在的带来负面影响的动作

表单

内联表单

表单状态

带图标的表单

按钮

LinkButton

按钮样式

       （默认样式）Default
       （首选项）Primary
       （成功）Success
       （一般信息）Info
       （警告）Warning
       （危险）Danger
       （链接）Link

按钮大小

  （大按钮）Large button  （大按钮）Large button
  （默认尺寸）Default button  （默认尺寸）Default button
  （小按钮）Small button  （小按钮）Small button
  （超小尺寸）Extra small button  （超小尺寸）Extra small button

图片

图片形状

辅助类

文本颜色

p class="text-muted">...
...
...
...
...
...

背景颜色

...
...
...
...
...

关闭按钮

×

下拉三角

快速浮动

       
        ...
       
       
        ...
       

内容块居中

       
        ...
       

清除浮动

       
       
        ...
       

显示与隐藏

       
        ...
       
       
        ...
       

常用Bootstrap组件

1. 字体图标
2. 下拉菜单
3. 按钮组
4. 输入框俎
5. 导航
6. 分页
7. 标签和徽章
8. 页头
9. 缩率图
10. 进度条

模拟滚动的进度条：