Bootstrap3基础教程

原创 最新推荐文章于 2026-09-21 21:14:36 发布 1.7w 阅读 AI写同款
收录于
前端

当前文章被收录于：

前端
11 篇文章 0 人学习
订阅专栏 查看详情
thinking_fioa
thinking_fioa 博客等级 码龄11年 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.7w累计阅读 1.7w+平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要
144粉丝45篇原创
关注
Bootstrap基础教程：创建响应式网页 本文介绍Bootstrap框架的基础使用方法，包括文件夹结构设置、基础HTML模板的搭建，以及Bootstrap所需的关键标签和类。通过逐步构建一个简单的Bootstrap网页，读者可以学习如何创建一个响应式的“Hello World!”网页，并了解布局容器的使用。文章还探讨了在不同浏览器中处理兼容性问题以及调整视口设置以优化移动设备的显示效果。 阅读详情
AI摘要

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

一、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:尺寸小
标签
#html #bootstrap #bootstrap3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
B站DRM视频解密流程实战解析：从密钥获取到播放全流程 本文详细解析了B站DRM视频的解密全流程，从识别加密视频、捕获关键网络请求（如playurl接口的widevine_pssh数据），到逆向分析DRM SDK的JavaScript执行逻辑，最终手动模拟EME流程获取解密密钥，并使用mp4decrypt和ffmpeg工具完成视频文件的解密与合并。文章为开发者提供了从密钥获取到播放的完整实战指南。 阅读详情

相关推荐

非线性动力学_用MatCont分析非线性动力学方程组（一）

写在前面：笔者打算写两到三篇系列文章介绍MatCont，此为第一篇《用MatCont分析非线性动力学方程组（一）》。MatCont是一个基于Matlab而开发的免费工具包，专门用来做非线性动力学模型分叉、向量场、周期性等分析，符号（连续性）运算和数值（离散性）运算均适用。该工具的开发及研究项目由比利时Ghent大学的Willy Govaerts教授、荷兰Utrecht大学的Yuri Kuznets...

weixin_39700215的博客 2765

Bootstrap3（1）8.15

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 类名：container左右留白（指最外部的div）类名：containe

weixin_68597796的博客 632

从0到1，快速理清 | DeepSeek Harness

DeepSeek推出自研Harness开发平台，主打"一切皆插件"理念，将AI执行能力模块化为可自由组合的插件体系。带你从0到1，快速了解开发链路。

IT学习博客 670

Bootstrap（v3）前端开发框架

Bootstrap 是一个流行的前端开发框架，由 Twitter （推特）开发并维护。它是一个开源的工具包，用于创建响应式和移动设备优先的网站和 Web 应用程序。

weixin_65350557的博客 2810

SPI 协议帧格式深度解析：从 8 位数据到 16 位扩展的 3 种模式

本文深入解析SPI协议的帧格式，涵盖从8位标准到16位扩展的三种模式。通过详细讲解SPI时钟模式、数据宽度配置及实际应用案例，帮助开发者掌握SPI外设的深度定制能力，提升嵌入式系统开发效率。特别适用于连接传感器、存储器和显示器等高速通讯场景。

weixin_34110749的博客 344

避坑指南：Allegro 17.2更新封装时遇到的5个典型问题及解决方案（含Symbol报错处理）

本文深度解析Allegro 17.2封装更新过程中的核心机制与常见陷阱。针对“Update Symbols”功能失效、焊盘不匹配、DRC报错、图形层叠错误等5大典型问题，提供从原理分析到实战解决方案的完整指南，帮助用户实现从“更新失败”到“丝滑替换”的平稳过渡。

tgb34567890的博客 1035

bootstrap3 -入门简学

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

ysazt的博客 1674

从 Classic ABAP 到 ABAP Cloud：一份面向开发者的 SAP 学习路线图与实战指南

ABAP技术演进路线：从语法到架构思维 本文系统梳理了现代ABAP开发者的能力成长路径。在S/4HANA与云时代，ABAP已从传统过程式语言转变为支持面向对象、测试驱动和云原生开发的现代技术栈。学习路线应围绕四大核心维度展开：1) 语言基础(ABAP OO/Modern ABAP)；2) 工程化实践(ABAP Unit/ATC/Clean ABAP)；3) 数据建模(CDS/AMDP)；4) 服务化架构(Gateway/OData/Fiori)。文章强调以交付形态倒推技术栈，通过真实案例展示了如何将零散技术

2007 年 ~ 2025 年，深耕 SAP 技术 18 年 360

Bootstrap教程（基于Bootstrap3）~~~一文完结系列

前言： 即使我们有了HTML+CSS+JavaScript，但是开发起来还是代码比较多的，所以呢，我们就有了Bootstrap，来自Twitter，是目前最受欢迎的前端框架。它是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。 一、简洁 1、什么是Bootstrap？ Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。由Twitter的Mark Otto和Jaco...

充满好奇的threecat 3507

在 VS Code 里配置 SAP Joule for Developers 的 ABAP AI side-by-side 能力

摘要： 随着ABAP开发工具链的演进，VS Code逐渐融入ABAP开发流程，SAP Joule for Developers的ABAP AI能力通过side-by-side模式（基于BTP中央服务）为多系统开发提供统一AI支持。该模式避免了各ABAP后端独立升级AI能力的碎片化问题，由管理员配置BTP订阅URL后，开发者可在ADT或VS Code中全局调用。实际落地需注意角色分工（管理员配置服务，开发者填写URL）、AI units资源规划及配置细节（如区分全局与项目级设置）。建议将Joule URL纳入

2007 年 ~ 2025 年，深耕 SAP 技术 18 年 120

面向企业架构师的 SAP BTP 全景实践：多云、账户、运行时与端到端开发路径

摘要：SAP BTP为企业提供多云、多运行时（Cloud Foundry/Kyma/ABAP Cloud）的数字化转型平台，支持快速构建扩展应用。关键选择包括：1）根据合规与性能选择区域；2）区分Trial（90天限制）与Free Tier（无期限）方案；3）按场景选择运行时（CF适合微服务/Kyma适合云原生/ABAP Cloud适合S/4HANA扩展）。建议优先使用Free Tier进行POC，并通过BTP Cockpit统一管理，实现从验证到生产的平滑过渡。（150字）

2007 年 ~ 2025 年，深耕 SAP 技术 18 年 253

BootStrap

核心的样式是和，这两个css是一样的东西，后者是压缩后的样式。bootstrap.min.css.map可以告知我们对应的样式出现在第几行bootstrap.theme.*这些文件是bootstrap为了满足喜欢boostrap2的用户提供的主题样式。一般不用。BootStrap中内置了一个收费的字体图标Glyphicons。GlyphiconsHalflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。

weixin_52655964的博客 527

十五、SAP-物料需求计划（MRP）

业务逻辑、功能讲解、图文解析、章节总结

m0_72403327的博客 1089

Bootstrap3基础教程 01 概述

移动设备优先是 Bootstrap 3 的最显著的变化。 基础的页面： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--...

weixin_34232744的博客 165

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表，创建专业级图表以简化复杂的信息。

Camera2Demo

在Camera2 的基础上进行封装，使得Camera2一堆初始化逻辑与Activity分离，降低耦合度，完成预览拍照并保存的操作

Bootstrap3基础教程 03 导航栏

Bootstrap导航栏 创建一个默认的导航栏的步骤如下： 1.向 <nav> 标签添加 class.navbar、.navbar-default。 2.向上面的元素添加role="navigation"，有助于增加可访问性。 3.向 <div> 元素添加一个标题 class.navbar-header，内部包含了带有 classnavbar-brand的...

weixin_34301307的博客 401

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件，这是C++版本的破解文件

Codeigniter 4基础教程（3）-- url，bootstrap,routes

讲点常见的困扰：url去哪儿了？ PHP中常见的链接（说白了就是url地址）往往令人困扰，一不小心就跑丢了。这里给出一个小例子 <?php namespace App\Controllers; class MyHelper extends BaseController { public function index() { // return view('welcome_message'); // echo '<h1>Hello Codeigniter 4.0.3<h1

yaoguoxing的博客 884

OV9734 DATASHEET，完整规格书

OV9734完整规格书，包括电气参数，尺寸规格，寄存器配置表等

Bootstrap3基础教程 02 网格布局

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 网页设计中的网格布局作用：组织内容，让网站易于浏览，并降低用户端的负载。 Grid System Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布...

weixin_34111819的博客 240

从零开始Bootstrap3

从开发人员的角色编写 bootstrap3 的基础教程，初学者可以按此教程一步一步操作一遍，就可以掌握bootstrap3的基础用法。 目录 一、框架搭建 1.1 引入文件 1.2 布局容器 1.3 栅格系统 1.4 关于颜色 二、常用样式 2.1 文本操作 2.2 表格操作 2.3 按钮 三、 常用组件 3.1 字体图标 3.2 下拉菜单 3.3 按钮组 3.4 标...

weixin_30894583的博客 249

Bootstrap基础教程对应源码下载

Bootstrap基础教程对应源码下载 【下载地址】Bootstrap基础教程对应源码下载 《Bootstrap基础教程》配套源码，涵盖书中13个章节的完整示例代码，助您轻松上手Bootstrap框架。从栅格系统到表单按钮，从导航菜单到模态框，再到轮播图与进度条，每一章都提供了详细的实践代码，方便学习与参考。通过这些源码...

gitblog_06783的博客 408

Bootstrap基础教程

Bootstrap 是一个由 Twitter 开发的开源前端框架，它基于 HTML、CSS 和 JavaScript。Bootstrap 的设计初衷是为了快速开发响应式和移动设备优先的 Web 应用程序。自 Bootstrap 3 版本起，框架中融入了移动设备优先的样式，这意味着开发人员可以轻松地创建在不同设备上都能良好显示的网页。Bootstrap允许你通过CSS变量和Sass/Less来自定义主题和组件。同时，Bootstrap的栅格系统和许多组件都是响应式的，可以自动适应不同尺寸的屏幕。

qq_63447955的博客 3505

UI组件DevExpress ASP.NET Bootstrap - 支持Bootstrap v5.3.3和暗黑模式

本文主要介绍DevExpress ASP.NET Bootstrap升级到了Bootstrap v5.3.3，欢迎下载最新组件体验！

需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~ 1016

Vue3项目中使用bootstrap5

在Vue 3项目中安装并使用Bootstrap 5，可以通过以下几个步骤来实现，并附上实际案例。

蜡笔小新星的博客 3973

django-bootstrap3配置详解：定制化你的Bootstrap主题和样式

django-bootstrap3是一个强大的工具，它将Bootstrap 3与Django无缝集成，让开发者能够轻松地在Django项目中使用Bootstrap的强大功能。本文将详细介绍如何配置django-bootstrap3，以便你能够定制化Bootstrap主题和样式，打造出独具特色的Web应用界面。 ## 快速开始：基础配置步骤 要开始使用django-bootstrap3，首先需要

gitblog_00112的博客 841

play-bootstrap深度探索：Bootstrap 3与Bootstrap 4版本差异及迁移指南

play-bootstrap是一个为Play Framework设计的Bootstrap集成库，它提供了简洁的视图模板和表单构造器，帮助开发者快速构建美观的Web界面。本文将深入分析Bootstrap 3与Bootstrap 4在play-bootstrap中的实现差异，并提供实用的迁移指南，让你轻松完成版本升级。 ## 📊 版本架构概览 play-bootstrap采用模块化设计，针对不同

gitblog_00137的博客 311

【强力推荐】Django与Bootstrap 3的完美融合 —— django-bootstrap3

在前端界面日益成为用户体验关键的时代，将强大的后端框架与优雅的前端设计结合显得尤为重要。今天，我们要向大家隆重推荐一个开源项目——**django-bootstrap3**，它让Django开发人员能够轻松地在项目中融入Bootstrap 3这一经典UI框架，为你的应用穿上一套精致的外衣。 ## 1. **项目介绍** django-bootstrap3 是一个旨在无缝对接Django和Boo...

gitblog_00453的博客 1080

bootstrap-sass 完全指南：在 Sass 项目中安装、配置与使用 Bootstrap 3

bootstrap-sass 是 Bootstrap 3 的 Sass（SCSS）移植版，将官方 LESS 源码完整转换为 Sass 语法，可直接嵌入任何基于 Sass 的 Ruby on Rails、Bower、npm/Node.js 前端工程。本文以本仓库 `docs/3` 下实际携带的 bootstrap-sass v3.4.0 包（[README.md](https://link.gitc

gitblog_01173的博客 1007
上一篇： GitHub中PR(Pull request)操作
下一篇： CSS-Position用法的理解
点赞 11
评论 0
书签 书签 28
thinking_fioa
thinking_fioa
博客等级 码龄11年 144粉丝 45原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值