**Bootstrap框架用法**

Bootstrap框架用法

下载
**用于生产环境的 Bootstrap，**里面有编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。网址：https://github.com/twbs/bootstrap/releases/download/v3.4.1/bootstrap-3.4.1-dist.zip
Bootstrap 源码
Less、JavaScript 和 字体文件的源码，并且带有文档。需要 Less 编译器和一些设置工作。网址：
https://github.com/twbs/bootstrap/archive/v3.4.1.zip
Sass
这是 Bootstrap 从 Less 到 Sass 的源码移植项目，用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入。
https://github.com/twbs/bootstrap-sass/archive/v3.4.1.tar.gz

安装方法

1.通过 Bower 进行安装
2.你还可以利用 npm 工具来安装 Bootstrap：
3.通过 Composer （中文官网：Composer 中文网）也可以安装并管理 Bootstrap 的 Less、CSS、JavaScript 和 fonts 文件；

包含内容

Bootstrap 提供了两种形式的压缩包，在下载下来的压缩包内可以看到以下目录和文件，这些文件按照类别放到了不同的目录内，并且提供了压缩与未压缩两种版本。
2. Bootstrap 插件全部依赖 jQuery请注意，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入，就像在基本模版中所展示的一样。在bower.json 文件中 列出了 Bootstrap 所支持的 jQuery 版本。

主题

• Tables

  First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter

  First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter

  First Name Last Name Username 1 Mark Otto @mdo Mark Otto @TwBootstrap 2 Jacob Thornton @fat 3 Larry the

  Bird @twitter

  First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter

排版与链接

Bootstrap 排版、链接样式设置了基本的全局样式。分别是：

1. 为 body 元素设置 background-color: #fff; 使用
   @font-family-base、@font-size-base 和 @line-height-base 变量作为排版的基本参数
2. 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
用法：

1. 行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100%
   宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
   2. 通过“行（row）”在水平方向创建一组“列（column）”。
   3. 内容放在列（column）内，并且”行（row）”只有一个子元素
   4. 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。
   5. 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
   栅格参数
   从堆叠到水平排列
   

排版

1. 标题：HTML 中的所有标题标签,

   到

   均可使用。另外还提供了 .h1 到 .h6
   类，为的是给内联（inline）属性的文本赋予标题的样式。

2. 页面主体：Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 元素和所有段落元素。另外，

   （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

3. 中心内容：通过添加 .lead 类可以让段落突出显示。

代码

1.内联代码 通过 标签包裹内联样式的代码片段。
2. 用户输入：通过 标签标记用户通过键盘输入的内容。
3. 代码块：多行代码可以使用

 标签。为了正确的展示代码，注意将尖括号做转义处理。

4. 变量：通过  标签标记变量。   程序输出：通过  标签来标记程序输出的内容。

表格

1.条纹状表格：通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式。
2.带边框的表格：添加 .table-bordered 类为表格和其中的每个单元格增加边框。
3.鼠标悬停：通过添加 .table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。
4.紧缩表格：通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
5.状态类：通过这些状态类可以为行或单元格设置颜色。
…