Bootstrap 框架详解-Toy模板网

这篇具有很好参考价值的文章主要介绍了Bootstrap 框架详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、Bootstrap 简介

框架顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。而插件一般是为了解决某个问题专门存在的，其功能单一，并且比较小。
前端常用的框架有 Bootstrap、Vue、Angular、React 等，既能开发 PC 端，也能开发移动端。
Bootstrap 是目前最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB项目等，它简单灵活，使得 Web 开发更加快速、简单。

二、安装及使用

Bootstrap 中文网站：www.bootcss.com

① 我们下载第二个，Bootstrap 源码

Bootstrap 框架详解
② 在项目中创建一个名为 bootstrap 的文件夹
后面用于放 bootstrap 相关文件。

③ 下载完成后进行拷贝

拷贝 dist 文件夹中的 css 和 js，粘贴到我们刚刚创建好的 bootstrap 文件夹中，接着再拷贝 dist 文件夹下的 fonts，粘贴到 bootstrap//css 文件夹下，与 bootstrap.min.css 同级。

④ 创建一个 jquery.js 文件
把它放到我们的项目文件夹 js 下。

⑤ 官网查找 jquery 代码
官网地址：http://jquery.com/

点击 download：

Bootstrap 框架详解
选择第二行点击打开：

我们可以看到代码行：

Bootstrap 框架详解
⑥ 复制以上所有代码

并粘贴到前面我们已经创建好的 jquery.js 文件内。

⑦ 外链引入文件

bootstrap.min.css 正常引入，但是 bootstrap.min.js 文件是依赖于 jquery 的，所以 jquery.js 必须在 bootstrap.min.js 之前引入。

三、布局容器

1.固定宽度

.container 类是用于固定宽度并支持响应式布局的容器，两侧有留白。

<div class="container">
...
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css//bootstrap.min.css" rel="stylesheet"/>
    <style>
        .colors {
            background-color: black;
            color: aliceblue;
            height: 50px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="container colors">
        OK!
    </div>
</body>
</html>

觉得原样式不满意我们可以再给 div 声明一个类修改部分样式！

Bootstrap 框架详解

2.百分百宽度

.container-fluid 类是用于100%宽度，占据全部视口的容器。

<div class="container-fluid">
...
</div>

实际开发中，为了美观我们两侧需要留有一定的空白，所以使用更多的是固定宽度！

四、栅格网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列，通过一系列行与列的组合来创建页面布局，你的内容就可以放入这些创建好的布局当中。
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有平分成24份和32份的，但12份是最常见的），再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。
注意网格系统必须使用到 CSS！

1.列组合

在行（.row）中可以添加列（.column）才可以作为行容器（.row）的直接子元素，但列数之和不能超过平分的总列数，如果大于12则自动换到下一行，xs 超小屏、sm 小屏、md 中屏、lg 大屏，一般 md 用的最多。 具体内容应当放置在列容器之内：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4" style="background-color: black;">4</div>
            <div class="col-md-8" style="background-color: red;">8</div>
        </div>
    </div>
</body>
</html>

栅格网格系统会自动将每一列的 div 都放到一行上去，所以不需要再设置！

Bootstrap 框架详解

2.列偏移

如果我们不希望相邻的两个列紧靠在一起，但又不想使用 margin 或者其它的方法，这个时候就可以使用列偏移（offset）功能来实现，使用列偏移也非常简单，只需要在列元素上添加类名 “col-md-offset-数字”（这里的数字就是要偏移的列数，也可以理解为距离相邻左侧列的列数），具有这个类名的列就会向右偏移，要保证列与偏移列的总数不能超过12，否则列就会换行显示。
前面的列偏移的时候，会推动着后面的列也往后走！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-1" style="background-color: black;">1</div>
            <div class="col-md-2 col-md-offset-1" style="background-color: red;">2</div>
            <div class="col-md-2 col-md-offset-2" style="background-color: blue;">2</div>
        </div>
    </div>
</body>
</html>

Bootstrap 框架详解

3.列排序

列排序就是改变列的方向，即左右浮动，并且可以设置浮动的距离。通过添加类名，col-md-push-数字、col-md-pull-数字，数字就是要浮动的列数。
左浮动 pull，右浮动 push！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-1" style="background-color: rgb(211, 228, 21);">1</div>
            <div class="col-md-1 col-md-push-1" style="background-color: rgb(255, 89, 0);">2</div>
            <div class="col-md-1" style="background-color: blue;">2</div>
            <div class="col-md-1" style="background-color: rgb(0, 255, 106);">2</div>
        </div>
    </div>
</body>
</html>

这里看到橙色的盒子被覆盖掉了：

Bootstrap 框架详解
偏移会挤走后面的盒子，而排序则会压住前面的盒子，左浮动压住前面的盒子，右浮动被后面的盒子压住！

4.列嵌套

Bootstrap 框架的网格系统还支持列的嵌套，我们可以在一个列中添加一个或多个行容器，同样在这些行容器中也可以插入多个列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-4" style="background-color: red;">4</div>
                    <div class="col-md-4" style="background-color: burlywood;">4</div>
                    <div class="col-md-4" style="background-color: blue;">4</div>
                </div>
            </div>
            <div class="col-md-5 col-md-offset-1">
                <div class="row">
                    <div class="col-md-3" style="background-color: green;">3</div>
                    <div class="col-md-4" style="background-color: black;">4</div>
                    <div class="col-md-2" style="background-color: palevioletred;">2</div>
                    <div class="col-md-3" style="background-color: orange;">3</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Bootstrap 框架详解

5.根据分辨率自适应

这里还有一个问题，我们在电脑屏幕上看到的盒子可以在一行内显示，但是切换到手机端的时候却发现一行只能显示一个，全部都另起一行显示了，这是因为手机的分辨率较小而我们是用 md 中屏写的。如果我们想要它在电脑端一行显示全部列，而在手机端可以自定义每一行的列数，怎么做呢？
很简单，再添加一个类，用于超小屏 xs。如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-xs-6" style="background-color: red;">1</div>
            <div class="col-md-3 col-xs-6" style="background-color: gray;">2</div>
            <div class="col-md-3 col-xs-6" style="background-color: green;">3</div>
            <div class="col-md-3 col-xs-6" style="background-color: rgb(57, 57, 239);">4</div>
        </div>
    </div>
</body>
</html>

Bootstrap 框架详解

Bootstrap 框架详解
想适应更多的屏幕可多添加几个类，xs、sm、md、lg！

五、常用样式

1.排版

① 标题
Bootstrap 和普通 HTML 页面一样，定义标题都是使用标签 <h1> ~ <h6>，只不过 Bootstrap 覆盖了其默认的样式，为了让非标题元素和标题使用相同的样式，还特意定义了 .h1 ~ .h6 六个类名，同时后面还可以跟着一行小的副标题 <small></small> 或 .small。

② 段落
段落是排版中的另一个重要元素之一，通过 .lead 来突出强调内容（效果就是增大文本字号，加粗文本，而且对行高和 margin 也做了相应的处理）。

③ 强调
定义了一套类名，这里称其为强调类名，这些类其实都是颜色类，通过给文字添加不同的颜色以表达强调效果，具体说明如下：

① .text-muted，提示效果，使用浅灰色（#999）；
② .text-primary，主要效果，使用蓝色（#428bca）；
③ .text-success，成功效果，使用浅绿色（#3c763d）；
④ .text-info，通知信息效果，使用浅蓝色（#31708f）；
⑤ .text-warning，警告效果，使用黄色（#8a6d3b）；
⑥ .text-danger，危险效果，使用褐色（#a94442）。

④ 对齐效果
这里 Bootstrap 也是提供了一些相关的类，供我们实现文本的各种对齐效果。我们可以像以前一样在 CSS 中写 text-align 来设置，也可以通过 Bootstrap 里的这四个类名来控制文本的对齐风格。左对齐 .text-left、右对齐 .text-right、居中对齐 .text-center、两端对齐 .text-justify。

2.列表

① 去点列表

<ul class="list-unstyled">
    <li>无序列表一</li>
    <li>无序列表二</li>
</ul>

② 内联列表
把垂直列表换成水平列表，同时去掉点，也可以说内联列表就是为制作水平导航栏而生的。

<ul class="list-inline">
    <li>无序列表一</li>
    <li>无序列表二</li>
</ul>

3.代码

一般在个人博客上使用的较为频繁，用于显示代码的风格。

① 显示单行代码

<code>this is a simple code</code>

Bootstrap 框架详解

② 显示多行代码

<pre>
        ******
        ******
        ******
        ******
</pre>

Bootstrap 框架详解
代码会保留原本的格式，包括空格和换行！

③ 快捷键

使用<kbd>ctrl+s</kbd>保存

Bootstrap 框架详解

④ 显示 html 代码
把小于号换成 <，大于号换成 >

&lt;h2&gt;你好&lt;/h2&gt;

⑤ 多行代码滚动条

<pre class="pre-scrollable">
        ******
        ******
        ******
        ******
</pre>

4.表格

在使用 Bootstrap 的表格过程中，只需要添加对应的类名就可以得到不同风格的表格。

表格样式：

① .table：基础表格；
② .table-bordered：带边框的表格；
③ .table-hover：鼠标悬停高光的表格；
④ .table-condensed：紧凑型表格，单元格没有内距或者内距较其他表格的内距小。

tr、th、td 样式：
提供了5种类名，每种类名控制了行的不同背景颜色。

① .active：将悬停的颜色应用在行或者单元格上；
② .success：表示成功的操作；
③ .info：表示信息变化的操作；
④ .warning：表示一个警告的操作；
⑤ .danger：表示一个危险的操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
    <table class="table table-bordered table-hover">
        <tr class="success">
            <th>姓名</th>
            <th>科目</th>
            <th>成绩</th>
        </tr>
        <tr class="active">
            <td>张三</td>
            <td>语文</td>
            <td>87</td>
        </tr>
        <tr class="info">
            <td>李四</td>
            <td>语文</td>
            <td>91</td>
        </tr>
        <tr class="warning">
            <td>王五</td>
            <td>语文</td>
            <td>96</td>
        </tr>
        <tr class="danger">
            <td>李华</td>
            <td>语文</td>
            <td>82</td>
        </tr>
    </table>
</body>
</html>

Bootstrap 框架详解

5.表单

5.1 表单控件

① 输入框

<div class="row">
    <div class="col-sm-3">
        <input type="text" class="form-control" /> <br/>
        <input type="text" class="form-control input-lg" /> <br/>
        <input type="text" class="form-control input-sm" /> 
    </div>
</div>

如果直接写 input 标签则一个输入框会自己占据一行，显然不合适，我们可以利用栅格网格系统申请一行出来，通过设置列数来控制输入框长度。如图：
Bootstrap 框架详解
② 下拉列表

下拉框同理，利用栅格网格系统控制整体宽度！
对比一下这两种下拉框，multiple 使得下拉框可以鼠标左键多行选择。

<div class="row">
    <div class="col-sm-3">
        <select class="form-control">
            <option>请选择城市</option>
            <option>上海</option>
            <option>北京</option>
        </select> <br/>
        <select class="form-control" multiple="multiple">
            <option>请选择城市</option>
            <option>上海</option>
            <option>北京</option>
        </select>
    </div>
</div>

Bootstrap 框架详解
③ 文本域

可以通过 row 和 col 自行设置文本域的宽度和高度，也可通过栅格网格系统来控制。

<textarea class="form-control"></textarea>

④ 复选框

.checkbox 垂直显示！

    <div class="row">
        <div class="col-sm-3">
            <div class="checkbox">
                <label><input type="checkbox" name="hobby"/>唱歌</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="hobby"/>跳舞</label>
            </div>
        </div>
    </div>

.checkbox-inline 水平显示！

<div class="row">
    <div class="col-sm-3">
        <label class="checkbox-inline">
            <input type="checkbox" name="hobby"/>唱歌
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" name="hobby"/>跳舞
        </label>
    </div>
</div>

Bootstrap 框架详解
注意垂直显示和水平显示外层容器的写法是不一样的！
⑤ 单选框

单选框与复选框类似，垂直显示 .radio，水平显示 .radio-inline，只需要把上面的 checkbox 都换成 radio 即可！

⑥ 按钮

（1）基础样式：btn

<button class="btn">按钮</button>

（2）附加样式：btn-primary、btn-info、btn-success、btn-warning、btn-danger、btn-link、btn-default（也就是按钮的颜色）。

（3）普通标签实现按钮效果，比如 a 标签、span 标签以及 div 标签。

<a href="#" class="btn btn-info">a标签按钮</a>

（4）按钮大小，使用 .btn-lg、btn-sm、btn-xs 就可以获得不同尺寸的按钮。

<button class="btn btn-xs">超小按钮</button>

（5）按钮禁用有两种方法，老方法在标签中添加 disabled 属性，Bootstrap 方法在元素标签中添加类名 disabled。
注意第二种方法在 class 中添加 disabled 只是样式上禁用了，其实按钮还能用，所以并不是真正意义上的禁用！

5.2 表单布局

创建基本表单的步骤：
① 向父元素 form 标签添加 role=“form”；
② 把每一个标签和控件都放在一个 div 中，并添加类 class=“form-group”，这是获取最佳间距所必须的；
③ 向所有文本元素 input、textarea 和 select 添加类 class=“form-control”。

（1）水平表单，同一行显示，form 添加类 form-horizontal，配合网格系统。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" href="css//bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
    <form action="#" class="form-horizontal" role="form">
        <h2 class="text-center">用户信息表</h2>
        <!-- 文本框 -->
        <div class="form-group">
            <label for="uname" class="control-label col-md-2">姓名</label>
            <div class="col-md-8">
                <input type="text" id="uname" class="form-control" placeholder="请输入姓名" />
            </div>
        </div>
        <!-- 密码框 -->
        <div class="form-group">
            <label for="upwd" class="control-label col-md-2">密码</label>
            <div class="col-md-8">
                <input type="password" id="upwd" class="form-control" placeholder="请输入密码" />
            </div>
        </div>
        <!-- 复选框  -->
        <div class="form-group">
            <label class="control-label col-md-2">爱好</label>
            <div class="col-md-8">
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby" id="sing" /><label for="sing">唱歌</label>
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby" id="dance" /><label for="dance">跳舞</label>
                </label>
            </div>
        </div>
        <!-- 下拉列表 -->
        <div class="form-group">
            <label for="city" class="control-label col-md-2">城市</label>
            <div class="col-md-8">
                <select id="city" class="form-control">
                    <option>请选择城市</option>
                    <option>上海</option>
                    <option>北京</option>
                </select>
            </div>
        </div>
        <!-- 文本域 -->
        <div class="form-group">
            <label for="remark" class="control-label col-md-2">简介</label>
            <div class="col-md-8">
                <textarea id="remark" class="form-control"></textarea>
            </div>
        </div>
        <!-- 按钮 -->
        <div class="form-group">
            <div class="col-md-1 col-md-offset-5">
                <button class="btn btn-primary">提交</button>
            </div>
        </div>
    </form>
</body>
</html>

（2）内联表单，很少用，将表单的控件都在一行内显示 form-inline，注意 label 不会显示，如果没有输入控件设置 label 标签，屏幕阅读器将无法正确识别。

6.缩略图

缩略图在电商类的网站很常见，最常用的地方就是产品列表页面，缩略图的实现是配合网格系统一起使用。同时还可以让缩略图配合标题、描述内容、按钮等，class=“thumbnail”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" href="bootstrap//css//bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="ldh.jpg" style="width: 240px; height: 360px;"/>
                    <h3>刘德华</h3>
                    <p>出生于中国香港，演员。</p>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-heart"></span> 喜欢
                    </button>
                    <button class="btn btn-info">
                        <span class="glyphicon glyphicon-pencil"></span> 评论
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Bootstrap 框架详解

这里顺便讲一下 Bootstrap 字体图标的引入！非常简单，打开 Bootstrap 官网：

① 点击组件

Bootstrap 框架详解
② 复制想要的图标代码

Bootstrap 框架详解
③ 给 span 标签添加类，类名即上面复制过来的图标代码

<span class="glyphicon glyphicon-heart"></span>

引入字体图标时，注意提前把 fonts 放到 bootstrap.min.css 同级文件夹下，否则图标无法显示！

7.面板

默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。

① .panel-default：默认样式；
② .panel-heading：面板头；
③ .panel-body：面板主体内容；
④ .panel-success：和前面一样控制颜色。

<div class="panel panel-warning">
        <div class="panel-heading">
            666
        </div>
        <div class="panel-body">
            111
        </div>
    </div>