Bootstrap3基础教程

最新推荐文章于 2025-07-01 22:31:04 发布
原创 最新推荐文章于 2025-07-01 22:31:04 发布 · 1.6w 阅读 · 28 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #bootstrap #bootstrap3

本教程介绍了Bootstrap3的基础知识，包括安装、文件结构、CSS样式、网格系统、排版、表单、按钮、导航栏等内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、Bootstrap3基础教程

@author 鲁伟林
Bootstrap3是目前最受欢迎的前端框架，非常重要。本教材不包括: Bootstrap插件，有关插件知识，请看另一篇博客
参考网址是：http://www.runoob.com/bootstrap/bootstrap-tutorial.html
gitHub地址: https://github.com/thinkingfioa/Notes/tree/master/front-developer/bootstrap3/

特别说明

Bootstrap3中一个标签往往同时有col-xs、col-sm、col-md、col-lg。如何理解，看下解释:

  • 1.col-xs- 超小屏幕 手机(<768px)
  • 2.col-sm- 小屏幕 平板(>=768px)
  • 3.col-md- 中等屏幕 桌面显示器(>=992px)
  • 4.col-lg- 大屏幕 大桌面显示器(>=1200px)

1. Bootstrap简介

Bootstrap是一个快速开发Web应用程序和网站的前端框架。Bootstrap的学习需要先初步了解Html、Css、Javascript基础知识。

1.1 Bootstrap 包含的内容

  • 1.基本结构：Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构
  • 2.CSS：Bootstrap提供多种基本的CSS的常用组件
  • 3.组件：Bootstrap包含了十几个可重用的组件
  • 4.JavaScript插件：Bootstrap包含了十几个自定义的jQuery插件

2. Bootstrap环境安装

Bootstrap安装有两种方法:

2.1 文件结构

如果下载的是Bootstrap已经编译的版本，解压ZIP文件，将看到下面的文件/目录结构:

如果下载了Bootstrap源代码,那么文件结构如下:

2.2 HTML中使用Bootstrap模版

需要包含jquery.js、bootstrap.min.js、bootstrap.min.css文件，用于让常规的HTML变为使用Bootstrap模版

代码:
<head>
    <meta charset="UTF-8">
    <title>Bootstrap模版</title>
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="./jquery/jquery-3.2.1.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
</head>

二、 Bootstrap CSS

3. Bootstrap CSS概览

本章将学习Bootstrap底层结构的关键部分和一些最佳实践

3.1 HTML5文档类型(Doctype)

Bootstrap中使用了HTML5元素和CSS属性，所以必须使用HTML5文档类型(Doctype)，通常的Bootstrap项目请用以下代码开头

代码:
<!DOCTYPE html>
<html>
.....
</html>

3.2 移动设备优先

  • 1.Bootstrap3的设计目标是移动设备优先，然后才是桌面设备
  • 2.Bootstrap3开发的网站兼容移动设备，确保适当的绘制和触屏缩放
  • 3.width=device-width属性控制设备宽度，即使不同的设备带有不同的屏幕分辨率，也能保证完美的呈现
  • 4.initial-scale=1.0确保页面加载时，以1:1的比例呈现，不会有任何缩放
  • 5.user-scalable=no禁用其缩放功能
  • 6.maximum-scale=1.0与user-scalable=no同时使用时，用户可以滑动屏幕
代码:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

4. Bootstrap 网格系统

Bootstrap提供一套响应式、移动设备优先的流式网格系统，随着不同设备屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列，以自动适配屏幕变化

4.1 Bootstrap网格系统(Grid System)工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了Bootstrap网格系统如果工作的:

  • 1.行必须放置在.container class内，以便获得适当的对齐(alignment)和内边距(padding)
  • 2.使用行来创建列的水平组
  • 3.内容应该放置在列内，且唯有列可以是行的直接子元素
  • 4.预定义的网格类，比如.row和.col-xs-4，可用于快速创建网格布局。LESS混合类可用于更多的语义布局
  • 5.列通过内边距(padding)来创建内容间的间隙
  • 6.网格系统是通过指定想要横跨的十二个可用的列来创建的。例如：要创建三个相等的列，则使用三个.col-xs-4
特别说明:

Bootstrap3中一个标签往往同时有col-xs、col-sm、col-md、col-lg。如何理解，看下解释:

  • 1.col-xs- 超小屏幕 手机(<768px)
  • 2.col-sm- 小屏幕 平板(>=768px)
  • 3.col-md- 中等屏幕 桌面显示器(>=992px)
  • 4.col-lg- 大屏幕 大桌面显示器(>=1200px)

5. Bootstrap 排版

使用Bootstrap的排版特性，可以创建标题、段落、列表及其他内联元素

5.1 标题(h1-h6)

Bootstrap定义了所有的HTML标题(h1到h6)的样式。提醒：使用Bootstrap模版时，需要使用3个文件:bootstrap.min.css、bootstrap.min.js、jquery.min.js。后面的代码样例将省略<head>头

代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="./jquery/jquery-3.2.1.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <h1>我是标题1 h1</h1>
    <h2>我是标题2 h2</h2>
    <h3>我是标题3 h3</h3>
    <h4>我是标题4 h4</h4>
    <h5>我是标题5 h5</h5>
    <h6>我是标题6 h6</h6>
</body>
</html>

5.2 内联子标题(small)

如果需要向任何标题添加一个内联子标题，需要在元素两旁添加或者添加.small class。将得到一个字号更小、颜色更浅的文本。

代码:
<body>
    <h1>我是标题1 h1 <small>副标题h1.1</small></h1>
    <h2>我是标题2 h2</h2>
    <h3>我是标题3 h3 <small>副标题h3.1</small></h3>
    <h4>我是标题4 h4</h4>
</body>

5.3 引导主体副本(lead)

使用class="lead"来给段落添加强调文本，得到更大更粗、更高的文本。

代码:
<body>
    <h2>引导主体副本</h2>
    <p class="lead">
        这是一个演示引导主体副本用法的实例。
        这是一个演示引导主体副本用法的实例。
    </p>
</body>

5.4 强调

Bootstrap提供了一些用于强调文本的类

  • 1.small: 文本为父文本大小的85%
  • 2.strong: 设置文本变粗体
  • 3.em: 文本斜体
  • 4.class="text-left": 向左对齐
  • 5.class="text-center": 居中对齐
  • 6.class="text-right": 向右对齐
  • 7.class="text-muted": 文本内容减弱
  • 8.class="text-primary": primary class效果
  • 9.class="text-success": success class效果
  • 10.class="text-info": info class效果
  • 11.class="text-warning": warning class效果 
  • 12.class="text-danger": danger class效果
代码:

<body>
    <small>本行内容-small</small><br>
    <strong>本行内容-strong</strong><br>
    <em>本行内容-em</em><br>
    <p class="text-left">本行内容-left</p>
    <p class="text-center">本行内容-center</p>
    <p class="text-right">本行内容-right</p>
    <p class="text-muted">本行内容-muted</p>
    <p class="text-primary">本行内容-primary</p>
    <p class="text-success">本行内容-success</p>
    <p class="text-info">本行内容-info</p>
    <p class="text-warning">本行内容-warning</p>
    <p class="text-danger">本行内容-danger</p>
</body>

5.5 缩写（abbr)

  • 1.Bootstrap利用<abbr>元素样式，定义缩写效果：底部有一条虚线边框+鼠标悬停提示完整文本
  • 2.利用class=".initialism"来得到更小字体的文本
代码:
<body>
    <abbr title="World Wide Web">WWW</abbr><br/>
    <abbr title="thinking_fioa" class=".initialism">TF</abbr>
</body>

5.6 地址(Address)

使用<address>标签，可以用来在网页上显示联系信息。

代码:
<body>
    <address>
        <strong>Some Company, Inc.</strong>
        007 street<br>
        Some City, State XXXXX<br>
        <abbr title="Phone">P:</abbr>1373814XXXX<br>
    </address>
    <address>
        <Strong>Email: </Strong>
        <a href="mailto:#">thiking_fioa@163.com</a>
    </address>
</body>

5.7 引用(Blockquote)

  • 1.使用默认的<blockquote>来显示引用
  • 2.默认的<blockquote>是左对齐
  • 3.class="pull-right"是定义右对齐
代码:
<body>
    <blockquote>
        一个带有源标题的引用
        <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
    </blockquote>
    <blockquote class="pull-right">
        一个向右对齐的标题引用
        <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
    </blockquote>
</body>

5.8 列表

Bootstrap 支持有序列表、无序列表和定义列表

  • 1.class="list-unstyled": 未定义样式列表
  • 2.class="list-inline":将所有列表项放置同一行
代码:
<body>
    <h4>有序列表</h4>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
    <h4>无序列表</h4>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <h4>未定义样式列表</h4>
    <ul class="list-unstyled">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <h4>内联列表</h4>
        <ul class="list-inline">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</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 class="dl-horizontal">
        <dt>Description 1</dt>
        <dd>Item 1</dd>
        <dt>Description 2</dt>
        <dd>Item 2</dd>
    </dl>
</body>

6. Bootstrap 代码

Bootstrap允许使用两种方式显示代码:

  • 1.第一种是<code>标签。如果想要内联显示代码，就应该使用<code>标签
  • 2.第二种是<pre>标签。如果想要用独立的块元素显示代码，则使用<pre>标签
  • 3.开始和结束标签，请使用unicode变体: &lt(<);和&gt(>)
代码:
<body>
    <p><code>&lt;header&gt;</code>作为内联元素被包围</p>
    <div>
        <span>如果需要将代码作为一个独立的块元素，需要使用标签:pre</span>
    </div>
    <pre>
        &lt;article&gt;
            &lt;h1&gt;Article Heading&lt;/h1&gt;
        &lt;/article&gt;
    </pre>
</body>

7. Bootstrap 表格

Bootstrap提供了一个清晰的创建表格的布局。Bootstrap支持的一些表格元素如下表:

标签描述
<table>为表格添加基础样式
<thead>表格标题行的容器元素，用来标识表格列
<tbody>表格主体中的表格行的容器元素
<tr>一组出现在单行上的表格单元格的容器元素
<td>默认的表格单元格
<th>特殊的表格单元格，用来标识列或行。必须在<thea>内使用
<caption>关于表格存储内容的描述或总结

7.1 表格类

下列样式可用于表格:

  • 1.(.table): 为任意<table>添加基本样式(只有横向分割线)
  • 2.(.table-striped): 为<tbody>内添加斑马线形式条纹
  • 3.(.table-bordered): 为所有表格的单元格添加边框
  • 4.(.table-hover): 在<tbody>内的任一行启用鼠标悬停状态
  • 5.(.table-condensed): 让表格更加紧凑
代码:
<table class="table table-striped table-bordered table-hover table-condensed">
    <caption>姓名表格</caption>
    <thead>
        <tr>
            <th>#</th>
            <th>Firstname</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>luweilin</td>
        </tr>
        <tr>
            <td>2</td>
            <td>thinking_fioa</td>
        </tr>
        <tr>
            <td>3</td>
            <td>pppp</td>
        </tr>
    </tbody>
</table>

7.2 <tr>、<th>、<td>类

下列类可用于表格的行或单元格

  • 1.(.active): 将悬停的颜色应用于行或单元格
  • 2.(.success): 表示成功的操作
  • 3.(.info): 表示信息变化的操作
  • 4.(.warning): 表示一个警告的操作
  • 5.(.danger): 表示一个危险的操作
代码:
<body>
    <div class="container">
        <h1>表格</h1>
        <div>
            所有属性都用上来:
        </div>
        <table class="table">
            <caption>编号表格:</caption>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Firstname</th>
                </tr>
            </thead>
            <tbody>
                <tr class="active">
                    <td>1</td>
                    <td>luweilin-active</td>
                </tr>
                <tr class="success">
                    <td>2</td>
                    <td>thinking_fioa-success</td>
                </tr>
                <tr class="info">
                    <td>3</td>
                    <td>pppp-info</td>
                </tr>
                <tr class="warning">
                    <td>4</td>
                    <td>tzj-warning</td>
                </tr>
                <tr class="danger">
                    <td>5</td>
                    <td>lbf-danger</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

7.3 响应式表格

通过将任意的.table包在.table-responsive内，可以让表格滚动，以适应小型设备和大型设备

代码:
<body>
    <div class="table-responsive">
        <table class="table">
            <caption>表格</caption>
            <thead>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</body>

8. Bootstrap表单

Bootstrap通过一些简单的HTML标签和扩展的类即可创建出不同样式的表单

8.1 表单布局

Bootstrap提供了下列类型的表单布局：

  • 1.垂直表单(默认)
  • 2.内联表单
  • 3.水平表单

8.2 垂直或基本表单

基本的表单结构是Bootstrap自带的，下面列出创建一个基本表单的步骤：

  • 1.向父<form>元素添加role="form"
  • 2.把标签和控件放在一个带有class .form-group的<div>中。这是获取最佳间距所必需的
  • 3.向所有的文本元素<input>、<textarea>和<select>添加class="from-control"
代码:
 <form role="form">
    <div class="form-group">
        <label for="name">名称</label>
        <input type="text" class="form-control" id="name" placeholder="请输入名称">
    </div>
    <div class="form-group">
        <label for="inputfile">文件输入</label>
        <input type="file" id="inputfile">
        <p class="help-block">这里是块级帮助本文的实例</p>
    </div>
    <div class="form-group">
        <label>
            <input type="checkbox"> 请打勾
        </label>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>

8.3 内联表单

  • 1.创建一个表单，希望它的所有元素都是内联的，向左对齐的，标签是并排的。请在<form>标签中添加 class .form-inline
  • 2.默认情况下，Bootstrap中的input、select和textarea有100%宽度。在使用内联表单时，需要在表单控件上设置一个宽度
代码:
<body>
    <form role="form" class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="name">名称</label>
            <input type="text" class="form-control" id="name" placeholder="请输入名称">
        </div>
        <div class="form-group">
            <label class="sr-only" for="inputfile">文件输入</label>
            <input type="file" id="inputfile">
        </div>
        <div class="form-group">
            <label>
                <input type="checkbox">请打勾
            </label>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>
</body>

8.4 水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。具体按下面几个步骤

  • 1.向父<form>元素添加class .form-horizontal
  • 2.把标签和控件放在一个带有class .form-group的<div>中
  • 3.向标签添加class .control-label
代码:
<form role="form" class="form-horizontal">
    <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label">名字</label>
        <div class="col-sm-10">
            <input type="text" id="firstname" class="form-control" placeholder="请输入名字">
        </div>
    </div>
    <div class="form-group">
        <lable for="lastname" class="col-sm-2 control-label">姓</lable>
        <div class="col-sm-10">
            <input type="text" id="lastname" class="form-control" placeholder="请输入姓">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox">请记住我
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登录</button>
        </div>
    </div>
</form>

8.5 支持的表单控件

Bootstrap支持最常见的表单控件，主要是：input、textarea、checkbox、radio和select

8.6 输入框(input)

Bootstrap提供所有原生的HTML5的input类型的支持，包括:text、password、detetime、detetime-local、date、month、time、week、number、email、url、search、tel和color

  • 下面代码中:for="text"表示点击<label>标签后，焦点会聚焦到id="text"的输入框
代码：
<form role="form">
    <div class="form-group">
        <label for="test">试试看</label>
        <input type="text" id="test" class="form-control" placeholder="试试看">
    </div>
</form>

8.7 文本框(Textarea)

文本框(Textarea)提供多行输入。属性rows规定显示行数

代码:
<form role="form">
    <div class="form-group">
        <lable for="name">文本框</lable>
        <textarea class="form-control" rows="3"></textarea>
    </div>
</form>

8.8 复选框(Checkbox)和单选框(Radio)

  • 1.checkbox提供用于从列表中选择若干个选项，而radio限制用户只能选择一个选项
  • 2.使用class .checkbox-inline或.radio-inline，控制它们显示在同一行
代码:
<label for="name">复选框和单选按钮</label>
<div class="checkbox">
    <label><input type="checkbox" value="choose1">选项一</label>
</div>
<div class="checkbox">
    <label><input type="checkbox" value="choose2">选项二</label>
</div>
<div class="radio">
    <label><input type="radio" name="optionsRadios" id="optionsRadios1" vlaue="radio1" checked>选项1</label>
</div>
<div class="radio">
    <label><input type="radio" name="optionsRadios" id="optionsRadios2" value="radio2">选项2</label>
</div>

<label for="name">内联的复选框和单选框</label><br>
<div class="checkbox-inline">
    <label><input type="checkbox" id="inlineCheckbox1" value="option1">选项1</label>
</div>
<div class="checkbox-inline">
    <label><input type="checkbox" id="inlineCheckbox2" value="option2">选项2</label>
</div>
<div class="checkbox-inline">
    <label><input type="checkbox" id="inlineCheckbox3" value="option3">选项3</>
</div>
<div class="radio-inline">
    <label><input type="radio" name="optionsRadiosinline" id="optionsRadio3" value="option1" checked>选项一</label>
</div>
<div class="radio-inline">
    <label><input type="radio" name="optionsRadiosinline" id="optionsRadio4" value="option2">选项二</label>
</div>

8.9 选择框(Select)

选择框允许用户从多个选项中进行选择，默认情况下只能选择一个选项

  • 1.使用<select>展示列表选项，通常是用户熟悉的选择列表
  • 2.使用multiple="multiple"允许用户选择多个选项
代码：
<form role="form">
    <div class="form-group">
        <label for="name">选择列表</label>
        <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
    </div>
    <div class="form-group">
        <label for="name">可多选的选择列表</label>
        <select multiple class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
    </div>
</form>

8.10 静态控件

当需要在一个水平表单内的表单标签后放置纯文本时，需要在<p>上使用class .form-control-static

代码:
<form role="form" class="form-horizontal">
    <div class="form-group">
        <label for="emailAddress" class="col-sm-2 control-label">Email</label>
        <p class="form-control-static" id="emailAddress">thinking_fioa@163.com</p>
    </div>
    <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
            <input type="password" id="inputPassword" class="c" name="pwd" placeholder="请输入密码">
        </div>
    </div>
</form>

8.11 表单控件状态

  • 1.输入框焦点：当输入框(input)接收到focus时，输入框的轮廓会被移除，同时应用box-shadow
  • 2.禁用的输入框input：使用属性disabled禁用输入框
  • 3.禁用的字段集fieldset：对<fieldset>添加disabled属性来禁用<fieldset>内的所有控件
  • 4.验证状态：对父元素简单的添加适当的class(.has-warning、has-error或.has-success)即可验证
代码:
<form role="form" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label">聚焦</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入框获得焦点...">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">禁用</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="该输入框禁止输入..." disabled>
        </div>
    </div>
    <fieldset disabled>
        <div class="form-group">
            <label class="col-sm-2 control-label">禁止选择菜单</label>
            <div class="col-sm-10">
                <select class="form-control">
                    <option>禁止选择</option>
                </select>
            </div>
        </div>
    </fieldset>
    <div class="form-group has-error">
        <label class="col-sm-2 control-label" for="inputWarning">输入告警</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputWarning">
        </div>
    </div>
</form>

8.12 表单控件大小

使用class .input-lg和.col-lg-* 来设置表单的高度和宽度

  • 1.input-lg: 放大表单高度
  • 2.input-sm: 缩小表单高度
  • 3.col-lg-*: 表示在大屏幕上占用几个格子。如: col-sm-10表示在小屏幕该div占用10个列的宽度

8.13 表单帮助文本(help-block)

表单控件可以在输入框input上有一个块级帮助文本，使用.help-block来占用整个宽度的内容块

代码：
<form role="form">
    <span>帮助文本实例</span>
    <input class="form-control" type="text" placeholder="">
    <span class="help-block">说明文档</span>
</form>

9. Bootstrap 按钮

任何带有class .btn的元素都会继承圆角灰色按钮。下列样式同样适用于<a>、<button>和<input>

  • 1.btn：为按钮添加基本样式
  • 2.btn-default：默认／标准按钮
  • 3.btn-success(primary/info/warning/danger)：表示成功等的动作
  • 4.btn-link：让按钮看起来像链接(仍然保留按钮行为)
  • 5.btn-lg(btn-sm/xs)：制作一个大按钮等
  • 6.btn-block：块级按钮
  • 7.active：按钮被点击
  • 8.disabled：禁用按钮
代码:
<button type="button" class="btn btn-info">警告按钮</button>

9.1 按钮状态

Bootstrap提供了激活、禁用等按钮状态的class

  • 1.激活状态(active)：激活状态呈现被压的外观(深色的背景、深色的边框、阴影)
  • 2.禁用状态(disabled)：禁用一个按钮时，它的颜色会变淡50%，并失去渐变
代码:
<p>
    <button type="button" class="btn btn-default">默认按钮</button>
</p>
<p>
    <button type="button" class="btn btn-default active">激活按钮</button>
</p>
<p>
    <button type="button" class="btn btn-default disabled">禁用按钮</button>
</p>

10. Bootstrap 图片

Bootstrap提供了三个对图片应用的简单样式的class：

  • 1.img-rounded：将图片变成圆角，通过添加border-radius:6px来实现
  • 2.img-circle：将图片变成圆形，通过添加border-radius：50%来实现
  • 3.img-thumbnail：添加内边框效果，通过内边距(padding)和一个灰色的边框来实现
  • 4.img-responsive：让图片支持响应式设计。图片可以很好的扩展到父元素。使用max-width:100%和height:auto来实现

11. Bootstrap 辅助类

Bootstrap定义了诸多辅助类

11.1 文本

不同的类展示不同的文本颜色。包括链接标签<a>文本也起同样的效果

  • 1.text-muted：文字变弱的样式
  • 2.text-primary
  • 3.text-success
  • 4.text-info
  • 5.text-warning
  • 6.text-danger
代码：
<div class="container">
    <p class="text-danger">使用text-danger样式文本</p>
    <a class="text-danger" href="http://write.blog.youkuaiyun.com/postlist">链接文本使用text-danger</a>
</div>

11.2 背景

不同的类展示不同的背景颜色。如果是链接，鼠标移上去文本会变暗

  • 1.bg-primary
  • 2.bg-success
  • 3.bg-info
  • 4.bg-warning
  • 5.bg-danger
代码:
<div class="container">
    <p class="bg-danger">使用bg-danger样式文本</p>
    <a class="bg-danger" href="http://write.blog.youkuaiyun.com/postlist">链接文本使用bg-danger</a>
</div>

11.3 其他

  • 1.pull-left：元素浮动在左边
  • 2.pull-right：元素浮动在右边
  • 3.center-block：设置元素为display:block并居中显示
  • 4.clearfix：清除浮动
  • 5.show：强制元素显示
  • 6.hidden：强制元素隐藏
  • 7.sr-only：除了屏幕阅读器外，其他设备上隐藏元素
  • 8.sr-only-focusable：与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
  • 9.text-hide：将页面元素所包含的文本内容替换为背景图
  • 10.close：显示关闭按钮
  • 11.caret：显示下拉式功能

11.4 关闭标签

使用class close得到关闭标签。

代码:
<button type="button" class="close" aria-hidden="true">&times;</button>

二、Bootstrap 布局组件

12. Bootstrap 字体图标(Glyphicons)

字体图标是在Web项目中使用的图标字体。可以在fonts文件夹内找到字体图标。字体图标列表：字体图标

12.1 用法

如需要使用图标，只需使用下列代码即可。

代码:
<span class="glyphicon glyphicon-user"></span>

12.2 带有字体图标的导航栏

代码:
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>Home</a></li>
                <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart"></span>Shop</a></li>
                <li><a href="#support"><span class="glyphicon glyphicon-headphones"></span>Support</a></li>
            </ul>
        </div>
    </div>
</div>

12.3 定制字体图标和尺寸

代码:
<button type="button" class="btn btn-primary btn-lg">
    <span class="glyphicon glyphicon-user"></span>User
</button>

13. Bootstrap 下拉菜单(Dropdowns)

Bootstrap下拉菜单是可切换的，是以列表格式显示链接的上下文菜单

代码:
<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
        主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">编译原理</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">计算机操作系统</a>
        </li>
    </ul>
</div>

13.1 选项

  • 1.pull-right(对齐)：通过向dropdown-menu中添加class .pull-right来向右对齐下拉菜单
  • 2.dropdown-header(标题)：使用dropdown-header向下拉菜单的标签区域添加标题
  • 3.dropup：指定向上弹出的下拉菜单
  • 4.disabled：下拉菜单中的禁用项
  • 5.divider：下拉菜单中的分割线

14. Bootstrap 按钮组

按钮组允许多个按钮被折叠在同一行

  • 1.btn-group：用于形成基本的按钮组，在btn-group中放置一系列带有class .btn按钮
  • 2.btn-tooler：用于将几组<div class="btn-group">结合在一起
  • 3.btn-group-lg(btn-group-sm,btn-group-xs)：整个按钮组的大小控制
  • 4.btn-group-vertical：让一组按钮垂直堆叠显示

14.1 基本按钮组(btn-group)

btn-group用于形成按钮组，位于同一行中。

代码：
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮1</button>
    <button type="button" class="btn btn-danger">按钮2</button>
    <button type="button" class="btn btn-info">按钮3</button>
</div>

14.2 按钮工具栏(btn-toolbar)

btn-toolbar用于将几个按钮组合并在一起

代码:
<div class="btn-toolbar" role="toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-default">按钮1</button>
        <button type="button" class="btn btn-default">按钮2</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">按钮3</button>
        <button type="button" class="btn btn-default">按钮4</button>
    </div>
</div>

14.3 按钮的大小(btn-gruop-sm)

btn-group-sm用于控制按钮大小，如：<div class="btn-group btn-group-sm">

14.4 嵌套

可以在一个按钮组内嵌套另一个按钮组，如果下拉菜单和一系列的按钮组使用时，则用到

代码:
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮1</button>
    <button type="button" class="btn btn-default">按钮2</button>
    <div class="btn-group">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
            <span>下拉</span>
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">下拉链接 1</a></li>
            <li><a href="#">下拉链接 2</a></li>
        </ul>
    </div>
</div>

14.5 垂直的按钮组(btn-group-vertical)

使用btn-group-vertical来让按钮垂直显示

15. Bootstrap 按钮下拉菜单

Bootstrap支持向按钮添加下拉菜单，具体代码可参考14.4中的

15.1 分割的按钮下拉菜单(divider)

使用class .divider来实现分割下拉。代码: <li class="divider"></li>

15.2 按钮下拉菜单的大小(btn-lg)

使用class .btn-lg、btn-sm和btn-xs来指定按钮大小

代码：
<div class="btn-group">
    <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">
        <span>默认下拉菜单</span>
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">功能1</a></li>
        <li><a href="#">功能2</a></li>
        <li class="divider"></li>
        <li><a href="#">分割线后的功能1</a></li>
    </ul>
</div>

15.3 按钮上拉菜单(dropup)

菜单也可以往上拉，只需要在class .btn-group中添加class .dropup

16. Bootstrap 输入框组(form-control)

使用输入框组，可以很容易向基于文本的输入框添加作为前缀和后缀的文本或按钮。向form-control添加前缀或后缀元素的基本步骤如下:

  • 1.把前缀或后缀元素放在一个带有class .input-group中的<div>中
  • 2.添加class .input-group-addon的<span>中添加前缀内容
  • 3.补充input元素输入框
代码：
<div class="input-group">
    <span class="input-group-addon">前缀内容</span>
    <input type="text" class="form-control" placeholder="缺省提示内容">
</div>

16.1 输入框组的大小

添加表单大小(input-group-lg、input-group-sm)来改变输入框组的大小

代码：
 <div style="padding: 100px 100px 10px;" >
        <form class="bs-example bs-example-form" role="form">
            <div class="input-group input-group-lg">
                <span class="input-group-addon">@</span>
                <input type="text" class="form-control" placeholder="请输入邮箱">
            </div>
        </form>
    </div>

16.2 复选框和单选框插件

可以将复选框和单选框作为输入框的前缀或后缀元素

代码:
<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon"><input type="checkbox"></span>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon"><input type="radio"></span>
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>
    </form>
</div>

16.3 按钮插件

可以将按钮作为输入框组的前缀或后缀元素。此时，不需要使用class .input-group-addon，而使用class .input-group-btn来包裹按钮

代码:
<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-from" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-btn">
                        <button class="btn btn-default">Go!</button>
                    </span>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-btn">
                        <button class="btn btn-info">Stop!</button>
                    </span>
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>
    </form>
</div>

17. Bootstrap 导航元素

Bootstrap提供用于定义导航元素的一些选项。使用相同的标记和基类.nav

17.1 表格导航或标签(nav-tabs)

创建一个标签式的导航菜单：

  • 1.以一个带有class .nav的无序列表开始
  • 2.添加class .nav-tabs
代码:
<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">iMac</a></li>
    <li><a href="#">iPhone</a></li>
    <li><a href="#">Mac</a></li>
</ul>

17.2 胶囊式的导航菜单(nav-pills)

如果需要将标签改成胶囊式，只需要将class .nav-pills替换class .nav-tabs即可

代码:
<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">iMac</a></li>
    <li><a href="#">iPhone></a></li>
    <li><a href="#">Mac</a></li>
</ul>

17.3 垂直的胶囊式导航菜单(nav-stacked)

在使用calss .nav和class .nav-pills的同时使用class .nav-stacked，让胶囊垂直堆叠

代码:
<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">iPad</a></li>
    <li><a href="#">iMac</a></li>
    <li><a href="#">iPhone</a></li>
</ul>

17.4 两端对齐的导航(nav-justified)

当屏幕宽度大于768px时，在使用表格式导航(nav nav-tabs)和胶囊式导航(nav nav-pills)时，请同时使用class .nav-justified。以让导航的长度和父元素等宽。

17.5 禁用链接(disabled)

对每个class .nav添加class .disabled，则会创建一个灰色的链接

代码:
<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">iPad</a></li>
    <li><a href="#">iPhone</a></li>
    <li class="disabled"><a href="#">iMac(禁用链接)</a></li>
    <li><a href="#">iWatch</a></li>
</ul>

17.6 带有下拉菜单的标签

向一个标签添加下拉菜单的步骤如下:

  • 1.以一个带有class .nav的无序列表开始
  • 2.添加class nav-tabs
  • 3.添加带有.dropdown-menu的无序列表
代码：
<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">iMac</a></li>
    <li><a href="#">iPad</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            <span>iPhone</span>
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">iPhone-5</a></li>
            <li><a href="#">iPhone-6</a></li>
            <li><a href="#">iPhone-6s</a></li>
            <li class="divider"></li>
            <li><a href="#">iPhone-X</a></li>
        </ul>
    </li>
    <li><a href="#">iWatch</a></li>
</ul>

17.7 动态标签

与tab-pane和data-toggle="tab"(或data-toggle="pill")一同使用，设置标签页对应的内容随标签切换而更改

代码：
<ul class="nav nav-tabs nav-justified">
    <li class="active"><a data-toggle="tab" href="#home" >Home</a></li>
    <li><a data-toggle="tab" href="#iMac">iMac</a></li>
    <li><a data-toggle="tab" href="#iPhone">iPhone</a></li>
    <li><a data-toggle="tab" href="#iWatch">iWatch</a></li>
</ul>
<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
        <span>首页，欢迎你</span>
    </div>
    <div id="iMac" class="tab-pane fade">
        <span>iMac页面</span>
    </div>
    <div id="iPhone" class="tab-pane fade">
        <span>iPhone页面</span>
    </div>
    <div id="iWatch" class="tab-pane fade">
        <span>iWatch页面</span>
    </div>
</div>

18. Bootstrap 导航栏

Bootstrap导航栏包含了站点名称和基本导航定义样式

18.1 默认的导航栏

创建一个默认导航栏的基本步骤:

  • 1.向<nav>标签添加class .navbar和class .navbar-default
  • 2.向上面的元素添加role="navigation"，有助于增加可访问性
  • 3.向<div>元素添加一个标题class .navbar-header，内部包含了带有class .navbar-brand的元素<a>
  • 4.向导航栏添加链接，添加class .nav和class .navbar-nav的无序列表
代码:
<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Apple公司</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iMac</a></li>
            <li><a href="#">iPad</a></li>
            <li class="dropdown">
                <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                    <span>iPhone</span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">iPhone-5s</a></li>
                    <li><a href="#">iPhone-6s</a></li>
                    <li><a href="#">iPhone-7</a></li>
                    <li><a href="#">iPhone-X</a></li>
                </ul>
            </li>
            <li><a href="#">iWatch</a></li>
        </ul>
    </div>
</nav>

18.2 响应式的导航栏

响应式的导航栏是指点击某按钮后，展开菜单。

代码:
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Apple公司</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">iMac</a></li>
                <li><a href="#">iPad</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <span>iPhone</span>
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">iPhone-5</a></li>
                        <li><a href="#">iPhone-6s</a></li>
                        <li><a href="#">iPhone-7</a></li>
                        <li><a href="#">iPhone-8</a></li>
                        <li class="divider"></li>
                        <li><a href="#">iPhone-X</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

18.3 导航栏中的表单(navbar-form)

导航栏中的表单使用class .navbar-form，其确保了表单适当的垂直对齐和在较窄的窗口中折叠行为。

代码:
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Apple公司</a>
        </div>
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="输入手机型号">
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>
    </div>
</nav>

18.4 导航栏中的按钮(navbar-btn)

可以使用class .navbar-btn向不在<form>元素中添加<button>按钮

代码:
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Apple公司</a>
        </div>
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="输入手机型号">
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>
        <button type="button" class="btn btn-default navbar-btn">表单外的Button</button>
    </div>
</nav>

18.5 导航栏中的文本(navbar-text)

使用class .navbar-text向导航栏中添加文本字符串。通常与<p>标签一起使用，确保适当的前导和颜色

代码:
<nav role="navigation" class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Apple公司</a>
        </div>
        <div class="navbar-text">
            <p>我是thinking_fioa.</p>
        </div>
    </div>
</nav>

18.6 结合图标的导航链接

在常规的导航栏中使用常用的图标，更多图标请参见图标地址

代码：
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">Apple 公司</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span>注册</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>登录</a></li>
        </ul>
    </div>
</nav>

18.7 组件对齐方式

  • 1.navbar-left：向左对齐导航栏中的元素
  • 2.navbar-right：向右对齐导航栏中的元素

18.8 固定到顶部(navbar-fixed-top)

Bootstrap导航栏可以动态定位。导航栏固定在顶部，让它成为随着页面一起滚动的静态导航栏。使用class .navbar-fixed-top。如：<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

18.9 固定到底部(navbar-fixed-bottom)

使用class .navbar-fixed-bottom来让导航栏固定在页面底部

18.10 静态的顶部(navbar-static-top)

使用class .navbar-static-top，创建随着页面一起滚动的导航栏

18.11 反色的导航栏(navbar-inverse)

使用class .navbar-inverse创建一个带有黑色背景白色文本的反色导航栏

19. Bootstrap 面包屑导航(Breadcrumbs)

Bootstrap面包屑导航是一个简单的带有.breadcrumb class无序列表

代码:
<ul class="breadcrumb">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">2018</a></li>
    <li><a href="#">03</a></li>
    <li><a href="#">17</a></li>
</ul>

20. Bootstrap 分页

Bootstrap提供多个处理分页的class

  • 1.pagination: 添加该class来在页面上显示分页
  • 2.disabled: 定义当前链接不可点
  • 3.active: 定义当前链接激活
  • 4.pagination-lg(pagination-sm): 获取不同的大小项

20.1 默认的分页(pagination)

使用pagination来实现分页

代码:
<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li class="disabled"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

20.2 分页的状态(disabled、active)

disabled禁用当前链接，active激活当前链接。代码如上

20.3 分页的大小(pagination-lg)

使用pagination-lg将会放大当前链接。使用代码:<ul class="pagination pagination-lg">

20.4 翻页(pager)

如果只想提供上一页／下一页，使用翻页就能满足。

  • 1.pager: 添加该class来获得翻页链接
  • 2.previous：把链接向左对齐
  • 3.next：把链接向右对齐
  • 4.disabled: 禁用当前链接
代码：
<ul class="pager">
    <li class="previous disabled"><a href="#">&larr; Older</a></li>
    <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

21. Bootstrap 标签(label)

使用class .label来显示标签。标签可用于计数、提示和页面上其他的标记显示

  • 1.label label-default: 默认的灰色按钮
  • 2.label label-primary: 蓝色按钮
  • 3.label label-success: 绿色按钮
代码:
<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>

22. Bootstrap 徽章(Badges)

徽章和标签相似，主要区别是徽章的边角更加圆滑。徽章常被用于突出显示新的或未读的项

代码：
<div class="container">
    <h2>徽章</h2>
    <p>
        <a href="#">收件箱<span class="badge">3</span></a>
    </p>
</div>

22.1 激活导航状态

可以将徽章放置在导航表中

代码：
<ul class="nav nav-pills">
    <li class="active"><a href="#">好友数目<span class="badge">3</span></a></li>
    <li><a href="#">请求加您为好友<span class="badge">10</span></a></li>
</ul>

23. Bootstrap 超大屏幕(jumbotron)

超大屏幕可以增加标题的大小，并为登陆页面内容添加更多的外边距。使用步骤如下:

  • 1.创建一个带有class .jumbotron的容器<div>
  • 2.除了更大的<h1>，字体粗细font-weight被减为200
代码:
<div class="container">
    <div class="jumbotron">
        <h1>欢迎登陆页面</h1>
        <p>这是一个超大屏幕(jumbotron)的实例</p>
        <p><a class="btn btn-info btn-lg" role="button">学习更多</a></p>
    </div>
</div>

23.1 非圆角页面

为了占用全部宽度且不带圆角的超大屏幕，请在class .container外使用class .jumbotron

代码:
<div class="jumbotron">
    <div class="container">
        <h1>欢迎登陆页面</h1>
        <p>这是一个超大屏幕(jumbotron)的实例</p>
        <p><a class="btn btn-info btn-lg" role="button">学习更多</a></p>
    </div>
</div>

24. Bootstrap 页面标题(page-header)

当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就特别有用。

代码：
<div class="page-header">
    <h1>
        页面标题实例
        <small>子标题</small>
    </h1>
</div>
<p>内容部分</p>

25. Bootstrap 缩略图(thumbnail)

Bootstrap使用缩略图可为大多数站点中布局图像、视频、文本等。具体步骤如下:

  • 1.在图像周围添加带有class .thumbnail的<a>标签
  • 2.这会添加四个像素的内边距(padding)和一个灰色按钮
  • 3.当鼠标悬停在图像上，会动画的显示出图像的轮廓
代码:
<div class="row">
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="http://www.runoob.com/wp-content/uploads/2014/06/kittens.jpg" alt="占位符缩略图">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="http://www.runoob.com/wp-content/uploads/2014/06/kittens.jpg" alt="占位符缩略图">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="http://www.runoob.com/wp-content/uploads/2014/06/kittens.jpg" alt="占位符缩略图">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="http://www.runoob.com/wp-content/uploads/2014/06/kittens.jpg" alt="占位符缩略图">
        </a>
    </div>
</div>

25.1 添加自定义内容

可以向缩略图中添加各种HTML内容，比如标题、段落和按钮。具体步骤如下:

  • 1.添加class .thumbnail的<div>
  • 2.在<div>内，添加任何想要添加的东西
代码:
<div class="row">
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img src="http://www.runoob.com/wp-content/uploads/2014/06/kittens.jpg">
            <div class="caption">
                <h3>缩略图标签</h3>
                <p>一些文本</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">按钮</a>
                    <a href="#" class="btn btn-default" role="button">按钮</a>
                </p>
            </div>
        </div>
    </div>
</div>

26. Bootstrap 警告(alerts)

警告向用户提供了一种定义消息样式的方式。

  • 1.alert alert-success - 告警成功提示
  • 2.alert alert-info - 告警信息提示
  • 3.alert alert-warning - 警告提示
  • 4.alert alert-danger - 危险提示
代码:
<div class="alert alert-success">成功！很好地完成了提交</div>
<div class="alert alert-info">信息！请注意这个信息</div>
<div class="alert alert-warning">警告！请不要提交</div>
<div class="alert alert-danger">错误！请进行一些更改</div>

26.1 可取消的警告(alert-dismissable)

创建一个可取消的警告步骤:

  • 1.创建一个<div>，并向其添加一个class .alert和class .alter-success
  • 2.向上面的<div>添加可选.alert-dismissable
  • 3.添加一个关闭按钮
代码:
<div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
        &times;
    </button>
    成功！很好地完成了提交
</div>

26.2 警告(alert)中的链接

在警告中创建链接的步骤：

  • 1.创建一个<div>，并向其添加class .alert和class .alert-success
  • 2.使用class .alert-link来提供带有匹配颜色的链接
代码:
 <div class="alert alert-info">
    <a href="#" class="alert-link">
        信息！请注意这个信息
    </a>
</div>

27. Bootstrap 进度条

使用Bootstrap创建加载、重定向或动作状态的进步条

27.1 默认的进度条

创建一个基本的进度条的步骤:

  • 1.添加一个带有class .progress的<div>
  • 2.添加一个带有class .progress-bar的空的<div>
  • 3.添加带有百分比的宽度的style属性，如style="width:60%"
代码:
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="40"
         aria-valuemin="0" aria-valuemax="100" style="width:40%">
         <span class="sr-only">40%完成</span>
    </div>
</div>

27.2 交替进度条

使用class .progress-bar-*属性来设置进度条的颜色

  • 1.progress-bar-success - 成功颜色
  • 2.progress-bar-info - 信息颜色
  • 3.progress-bar-warning - 警告颜色
  • 4.progress-bar-danger - 危险颜色
代码:
<div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40"
         aria-valuemin="0" aria-valuemax="100" style="width:40%">
         <span class="sr-only">40%完成</span>
    </div>
</div>

27.3 条纹的进度条(progress-striped)

使用属性class .progress-striped来创建进度条

代码:
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40"
         aria-valuemin="0" aria-valuemax="100" style="width:40%">
         <span class="sr-only">40%完成</span>
    </div>
</div>

27.4 动画的进度条(active)

在一个带有class .progress和class .progress-striped的<div>中。同时添加class .active属性，如:<div class="progress progress-striped active">

27.5 堆叠进度条

将多个进度条放在相同的.progress中即可实现堆叠

代码：
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-info" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width:40%">
        <span class="sr-only">40% 完成</span>
    </div>
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width:30%">
        <span class="sr-only">40% 完成</span>
    </div>
    <div class="progress-bar progress-bar-danger" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width:20%">
        <span class="sr-only">40% 完成</span>
    </div>
</div>

28. Bootstrap 多媒体对象(media)

使用class .media来设计轻量级的媒体，有下列两个标签:

  • 1.media：该class允许多媒体(图像、视屏、音频)浮动到内容区块的左边(meida-left)或右边(media-right)
代码:
<div class="media">
    <a class="media-left" href="#">
        <img class="media-object" src="http://avatar.youkuaiyun.com/F/7/8/3_thinking_fioa.jpg"
             alt="媒体对象">
    </a>
    <div class="media-body">
        <h4 class="media-heading">媒体标题</h4>
        <span>
            示例文本
        </span>
    </div>
</div>

29. Bootstrap 列表组(list-group)

列表组件用于以列表形式呈现复杂和自定义的内容。基本的列表组的步骤如下:

  • 1.向元素<ul>添加class .list-group
  • 2.向<li>添加class .list-group-item
代码:
<ul class="list-group col-md-3">
    <li class="list-group-item">thinking_fioa</li>
    <li class="list-group-item">ppp</li>
    <li class="list-group-item">luweilin</li>
</ul>

29.1 向列表组添加徽章(badge)

向<li>元素中添加<span class="badge">即可添加徽章。会自动定位到右边

代码:
<ul class="list-group col-md-3">
    <li class="list-group-item">
        <span class="badge">新</span>
            thinking_fioa</li>
    <li class="list-group-item">ppp</li>
    <li class="list-group-item">luweilin</li>
</ul>

29.2 向列表组添加链接

使用<a>来添加链接

代码:
<div class="col-sm-3">
    <a href="#" class="list-group-item active">
        thinking_fioa
        <span class="badge">帅哥</span>
    </a>
    <a href="#" class="list-group-item">ppp</a>
    <a href="#" class="list-group-item">luweilin</a>
</div>

30. Bootstrap 面板(panel)

面板控件用于把DOM组件插入到一个盒子中。需要使用class .panel和class .panel-default

代码:
<div class="panel panel-default">
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>

30.1 面板标题(panel-title)

可以使用两种方式来添加面板标题:

  • 1.panel-heading - 向面板添加标题容器
  • 2.使用.panel-title的<h1>和<h6>添加预定义样式的标题
代码:
<div class="panel panel-default">
    <div class="panel-heading">
        不带title的面板标题
    </div>
    <div class="panel-body">
        面板内容
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            带有title的面板标题
        </h3>
    </div>
    <div class="panel-body">
        面板内容
    </div>
</div>

30.2 面板脚注(panel-footer)

使用属性class .panel-footer来添加面板脚注

代码:
<div class="panel-footer">面板脚注</div>

30.3 带语境色彩的面板

设置语境色彩的面板有: panel-primary、panel-success、panel-info、panel-warning和panel-danger

30.4 带表格的面板

在面板中使用class .table来创建一个无边框的表格

代码:
<div class="panel panel-default col-md-6">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本面板
    </div>
    <table class="table">
        <tr>
            <th>姓名</th><th>年龄</th>
        </tr>
        <tr>
            <td>luweilin</td><td>24</td>
        </tr>
        <tr>
            <td>ppp</td><td>25</td>
        </tr>
    </table>
</div>

30.5 带列表组的面板

代码:
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        一个基本面板内容
    </div>
    <ul class="list-group">
        <li class="list-group-item">thinking_fioa</li>
        <li class="list-group-item">luweilin</li>
        <li class="list-group-item">ppp</li>
    </ul>
</div>

31. Bootstrap Well

Well会让背景色片灰白，看起来达到凹陷的效果。使用class .well属性即可

31.1 尺寸大小(well-lg、well-sm)

  • 1.well-lg:尺寸大
  • 2.well-sm:尺寸小
Bootstrap3【上手教程】
全栈
05-03 1635
​ 圆角矩形： 圆形/椭圆：这个比较牛逼，会根据图片来决定是宽椭圆还是高椭圆。 缩略图： ​
Bootstrap 3 学习
weixin_45346719的博客
03-09 1334
http://getbootstrap.com/ 1.meta标签 <meta name="viewport" content="width=device-width, initial-scale=1.0"> width属性控制设备宽度，将它设置为device-width确保正确呈现在不同设备上 initial-scale确保网页加载时1:1呈现，不会缩放 在移动设备浏览器上 ，user-scalable=no 可以禁用其缩放（zooming）功能，通常maximum-scale=1.0 与
BootStrap入门教程 (三)
weixin_30906671的博客
06-05 228
上讲回顾：Bootstrap的基础CSS(Base CSS)提供了优雅，一致的多种基础Html页面要素，包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求。 Bootstrap作为完整的前端工具集，内建了大量的强大优雅可重用的组件,包括按钮(Button),导航(Navigation),标签(Labels)，徽章(Badges)，排版(Typograp...
Bootstrap 安装使用教程
最新发布
真正的大师永远怀着一颗学徒的心
07-01 641
Bootstrap是一个由Twitter开发的开源前端框架，用于快速构建响应式移动优先的网页。它提供HTML、CSS和JavaScript组件，包括按钮、导航栏和表单等。安装方式推荐CDN引入或本地下载，核心功能包含栅格系统、按钮样式和表单控件。框架采用响应式设计，支持多设备断点适配。常见问题涉及样式加载和自定义覆盖。学习资源包括官方文档和中文教程。
BootStrap入门教程 (二)
weixin_30426065的博客
05-29 168
上讲回顾：Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局，它同时建立了一个宽达940px和12列的格网系统。 基于手脚架(Scaffolding)之上，Bootstrap的基础CSS(Base CSS)提供了一系列的基础Html页面要素，旨在为用户提供新鲜、一致的页面外观和感觉。本文将主要深入讲解排版...
bootstrap3 -入门简学
ysazt的博客
03-12 1472
1.前期准备工作 1.1 https://www.bootcss.com/ 1.2 点击下载 1.3解压下载好得东西 2. 版本介绍 Bootstrap 版本 目前市面上使用的最多的是 3.x.x 版本。各个版本的介绍： 2.3.2版本： 2013年之后，停止维护； 支持更广泛的浏览器 代码不够简洁， 功能不够多。 3.x.x 版本： 目前最新的稳定版本。 不支持 IE7 和早期的 Firefox 支持 IE8，单效果不好。 2015年8月发布 4.0.0-alpha
Bootstrap3.0教程
weixin_33913332的博客
08-20 149
2019独角兽企业重金招聘Python工程师标准>>> ...
BootStrap3-基础入门
世界和我们都不该止步于此
04-13 831
目录 超常用类名： Bootstrap中文网Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为3.0 。Bootstrap中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等，助力开发者掌握并使用这一框架。https://www.bootcss.com/我们可以去官网下载对应的bootstrap文件，在HTML页面中引入script：
Bootstrap3响应式布局网站构建教程
weixin_32242475的博客
10-19 1117
本文还有配套的精品资源，点击获取 简介：Bootstrap3是一个由Twitter开发的前端框架，用于简化网页设计和开发。它通过预设的样式、组件和JavaScript插件，使开发者能够轻松创建响应式布局网站，适应不同设备屏幕尺寸。本教程将指导你如何使用Bootstrap3的栅格系统、响应式工具和JavaScript插件来构建一个完整的响应式网站，并介绍如何通过JSP页面和j...
BootStrap学习入门基础
qq_34488912的博客
09-11 219
BootStrap：
Bootstrap教程（基于Bootstrap3）~~~一文完结系列
充满好奇的threecat
06-19 3129
前言： 即使我们有了HTML+CSS+JavaScript，但是开发起来还是代码比较多的，所以呢，我们就有了Bootstrap，来自Twitter，是目前最受欢迎的前端框架。它是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。 一、简洁 1、什么是Bootstrap？ Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。由Twitter的Mark Otto和Jaco...
bootstrap3教程
Salted fish in hand, I have the world.
03-08 794
bootstrap3教程 网格系统 默认模式下，该平台提供一个16列的网格（宽为960px）。每列宽40px，每列左右两侧具有10px的间隙，各网格最外侧均留出20px的空白。你可以根据需要改变行数与间隔大小。 2、Glyphicons 的图标字体 3、移动设备优先 在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的
【BootStrap】 BootStrap3快速入门
这里是阿安的博客
07-16 476
BootStrap是一个基于HTML、CSS、JAVASCRIPT的开源的用于快速开发 Web 应用程序和网站的前端框架。
Bootstrap3插件使用教程
热门推荐
thinking_fioa的博客
03-27 1万+
Bootstrap3插件使用教程 @author 鲁伟林 本博客主要讲述Bootstrap插件使用 参考网址是：http://www.runoob.com/bootstrap/bootstrap-tutorial.html gitHub地址: https://github.com/thinkingfioa/Notes/tree/master/front-developer/bootstrap
BootStrap入门教程 (一)
weixin_30795127的博客
05-28 298
2011年，twitter的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃...
Bootstrap3的简单入门
Millet
12-19 279
Bootstrap3的简单导入学习
bootstrap基础
Yannick_H的博客
07-13 1168
目录一、bootstrap1.简介2.组成3.浏览器4.视口（Viewport）5.分辨率6.可缩放矢量图形（Scalable Vector Graphics SVG）二、bootstrap的环境配置1.在页面中引入本地文件2.使用CDN加速器三、bootstrap的全局的CSS样式1.布局容器2.文本排版样式 3.改变大小写4.列表样式5.表格样式6.表单7.按钮（1）样式（2）尺寸8.图片9.辅助类（1）文本颜色 （2）背景色（3）三角符号 （4）显示和隐藏内容四、bootstrap栅格系统是一
Bootstrap基础
m0_72738258的博客
08-18 335
用户名
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值