Bootstrap的环境搭建 <link type="text/css" href="http://www.likecs.com/css/bootstrap.min.css" /> <script src="http://www.likecs.com/js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="http://www.likecs.com/js/bootstrap.min.js"></script> HTML模板 <!DOCTYPE html> <html> <head> <title>Bootstrap HTMl模板</title> <meta content="width=device-width, initial-scale=1.0"> <!-- 引入 Bootstrap --> <link type="text/css" href="http://www.likecs.com/css/bootstrap.min.css" /> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --> <script src="http://www.likecs.com/js/jquery-3.3.1.min.js"></script> <!-- 包括所有已编译的插件 --> <script src="http://www.likecs.com/js/bootstrap.min.js"></script> </body> </html> Bootstrap 网格系统 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 网格系统的定义 Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。 网格系统的使用 ·行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。 ·使用行来创建列的水平组。 ·内容应该放置在列内，且唯有列可以是行的直接子元素。 ·预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。 ·列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。 ·网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。 基本网格系统的结构 <div> <div> <div></div> <div></div> </div> <div>...</div> </div> <div>.... 网格系统的列排序实例 在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。 <div> <h1>Hello, world!</h1> <div> <p> 排序前 </p> <div> 我在左边 </div> <div> 我在右边 </div> </div> <br> <div> <p> 排序后 </p> <div> 我在左边 </div> <div> 我在右边 </div> </div> </div> bootstrap排版 引导主体副本 为了给段落添加强调文本，则可以添加，这将得到更大更粗、行高更高的文本，如下面实例所示： <p>添加clss实现排版</p> 强调 HTML 的默认强调标签 <small>（设置文本为父文本大小的 85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）。Bootstrap 提供了一些用于强调文本的类，如下面实例所示： <small>本行内容是在标签内</small><br> <strong>本行内容是在标签内</strong><br> <em>本行内容是在标签内，并呈现为斜体</em><br> <p>向左对齐文本</p> <p>居中对齐文本</p> <p>向右对齐文本</p> <p>本行内容是减弱的</p> <p>本行内容带有一个 primary class</p> <p>本行内容带有一个 success class</p> <p>本行内容带有一个 info class</p> <p>本行内容带有一个 warning class</p> <p>本行内容带有一个 danger class</p> 列表 Bootstrap 支持有序列表、无序列表和定义列表。 有序列表：有序列表是指以数字或其他有序字符开头的列表。 无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。 定义列表：在这种类型的列表中，每个列表项可以包含 <dt> 和 <dd> 元素。<dt> 代表 定义术语，就像字典。接着，<dd> 是 <dt> 的描述。.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。 <h4>有序列表</h4> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol> <h4>无序列表</h4> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>未定义样式列表</h4> <ul> 这个样式会自动帮我们拍好 <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>内联列表</h4> <ul> 添加这个会显示在一行上面 内联 <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>定义列表</h4> <dl> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl> <h4>水平的定义列表</h4> <dl> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl> 排版类 <p>Lowercased text（小写文本）.</p> <p>Uppercased text（大写文本）.</p> <p>Capitalized text（首字母大写文本）.</p> <p>左对齐文本</p> <p>右对齐文本</p> <p>居中对齐文本</p> <p>对齐文本。该段落会根据屏幕的大小对超出屏幕的文字进行换行</p> <p>该段落不会根据屏幕的大小对超出屏幕的文字进行换行。</p> Bootstrap 代码 pre 会形成一个圈 <p><code><header></code> 作为内联元素被包围。</p> <p>如果需要把代码显示为一个独立的块元素，请使用 <pre> 标签：</p> <pre> <article> <h1>Article Heading</h1> </article> </pre> Bootstrap 表格 table 类 .table 为任意 <table> 添加基本样式 (只有横向分隔线) 这是最基本的 .table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) .table-bordered 为所有表格的单元格添加边框 .table-hover 在 <tbody> 内的任一行启用鼠标悬停状态 .table-condensed 让表格更加紧凑 一句代码实现全部的实现 <table> , 和 类 .active 将悬停的颜色应用在行或者单元格上 .success 表示成功的操作 .info 表示信息变化的操作 .warning 表示一个警告的操作 .danger 表示一个危险的操作 Bootstrap 表单 Bootstrap 提供了下列类型的表单布局： 垂直表单（默认） 内联表单 水平表单 内联表单 <form role="form"> <div> 水平表单 水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行： 向父 <form> 元素添加 class .form-horizontal。 把标签和控件放在一个带有 class .form-group 的 <div> 中。 向标签添加 class .control-label。 <form role="form"> <div> <label for="firstname">名字</label> <div> <input type="text" placeholder="请输入名字"> </div> </div> <div> <label for="lastname">姓</label> <div> <input type="text" placeholder="请输入姓"> </div> </div> <div> <div> <div> <label> <input type="checkbox"> 请记住我 </label> </div> </div> </div> <div> <div> <button type="submit">登录</button> </div> </div> </form> 复选框（Checkbox）和单选框（Radio） 复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。 当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。 对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。 下面的实例演示了这两种类型（默认和内联）： 默认是垂直的 <label for="name">默认的复选框和单选按钮的实例</label> <div> <label><input type="checkbox" value="">选项 1</label> </div> <div> <label><input type="checkbox" value="">选项 2</label> </div> 这个是水平的 也就是内联的 <div> <label> <input type="checkbox" value="option2"> 选项 2 </label> <label> <input type="checkbox" value="option3"> 选项 3 </label> <label> <input type="radio" value="option1" checked> 选项 1 </label> <label> <input type="radio" value="option2"> 选项 2 </label> </div> 选择框（Select） 当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。 使用 <select> 展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。 使用 multiple="multiple" 允许用户选择多个选项。 <form role="form"> <div> <label for="name">选择列表</label> <select> /// <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <label for="name">可多选的选择列表</label> <select multiple> /// <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </form> Bootstrap 分页