Bootstrap

Bootstrap 是预编写的 CSS 和 JavaScript 代码段（chunk）的集合。

引入

任何 Web 应用，都可以通过添加如下代码到 HTML 的 head 标签中来引入 Bootstrap 。

其中 rel 表示该 link 用于样式表，href 表明 Bootstrap 的地址。

或者可以把 Bootstrap 作为 JavaScript 库引入，在 body 标签底部放入 script 标签。

其中 src 表示 Bootstrap 的地址。

Fluid

Bootstrap 会根据屏幕大小来动态调整 HTML 元素的大小————因此称为 Responsive Design（响应式设计）。

响应式设计 Responsive

现在通过 Bootstrap，只需要为 image 标签上设置 class 属性为 img-responsive ， 就可以让它完美地适应页面的宽度了。

文本居中

只需要将元素的 class 属性设置为 text-center 就可以实现。

CatPhotoApp

颜色

使用 text-XX 来表示文本颜色，其中 XX 和下列按钮颜色，相同.

// Primary // blue// Secondary // grey// Success // green// Danger // red// Warning // yellow// Info // skyblue// Light // whie// Dark // black// Link // anchor

按钮

Bootstrap 的 button 元素有着独有的、比默认 HTML 按钮更好的样式风格。

 // white color

块级元素按钮

通过为按钮添加 class 属性 btn-block 使其成为块级元素，按钮会伸展并填满页面的整个水平空间，后续的元素会流到这个块级元素的下方，即 “另起一行”。

按钮不同主题

btn-primary class 的颜色是应用的主要颜色。 这样 “突出显示” 是引导用户按部就班进行操作的有效办法。primary 被称为 modifier 修改器，因为这部分是可以改动的。

修改器改变了组件的视觉样式。

  // blue color

可选操作样式

Bootstrap 有着丰富的预定义按钮颜色。 浅蓝色的 btn-info class 通常用在备选操作上。

  // 浅蓝

危险

红色 btn-danger class 用来提醒用户此行为具有破坏性

栅格系统

Bootstrap 经常使用 container 作为栅格系统的父/根元素。

Bootstrap 具有一套 12 列的响应式栅格系统，可以轻松的将多个元素放入一行并指定它们的相对宽度。 Bootstrap 的大部分 class 属性都可以应用在 div 元素上。

Bootstrap 的列宽取决于用户的屏幕宽度。 比如，手机有着窄屏幕而笔记本电脑有者更大的屏幕.

就拿 Bootstrap 的 col-md-* class 来说。 在这里， md 表示 medium （中等的）， 而 * 是一个数字，说明了这个元素占有多少个列宽度。 这个例子就是指定了中等大小屏幕（例如笔记本电脑）下元素所占的列宽度。

使用 col-xs-* ， 其中 xs 是 extra small 的缩写 (比如窄屏手机屏幕)， * 是填写的数字，代表一行中的元素该占多少列宽。

断点，类前缀和维度对应：

  • Extra small – xs – < 576px , 该项为默认值，因为 Bootstrap 是 mobile-first 的。
  • Small – sm – >= 576px
  • Medium – md – >= 768px
  • Large – lg – >= 992px
  • Extra large – xl – >=1200px
  • Extra extra large – xxl – >= 1400px

行内元素

使用 span 标签来创建行内元素。 可以把不同的元素放在同一行，甚至能为一行的不同部分指定不同样式。

Top 3 things cats hate:

Font-Awesome

Font Awesome 是一个非常便利的图标库。 通过 webfont 或矢量图的方式来使用这些图标。 这些图标就和字体一样， 不仅能通过像素单位指定它们的大小，它们也同样会继承父级 HTML 元素的字号。

引入:

i 元素原本是用来表示斜体文字内容的；不过现在，用它来表示图标也很常见。 只需要为 i 元素添加相应的 class 就可以让它展示图标，比如：

表单单选按钮

Bootstrap 的 col-xs-* class 也可以用在 form 元素上！ 这样就可以在不关心屏幕大小的情况下，将的单选按钮均匀的平铺在页面上。

复选框

Bootstrap 的 col-xs-* 可应用于所有的 form 元素上，包括复选框！ 这样就可以不必关注屏幕大小，均匀地把复选框放在页面上了。

输入框

可以在 submit button 元素内加上 ，来添加 Font Awesome 的 fa-paper-plane 图标。

所有文本输入类的元素如 ，