bootstrap框架介绍（Bootstrap 框架详解）

时间2025-08-04 19:27:26分类IT科技浏览5149

导读：一、Bootstrap 简介框架顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。而插件一般是为了解决某个问题专门存在的，其功能单一，并且比较小。...

一、Bootstrap 简介

框架顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。而插件一般是为了解决某个问题专门存在的，其功能单一，并且比较小。

前端常用的框架有 Bootstrap 、Vue 、Angular 、React 等，既能开发 PC 端，也能开发移动端。

Bootstrap 是目前最受欢迎的 HTML 、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB项目等，它简单灵活，使得 Web 开发更加快速、简单。

二、安装及使用

Bootstrap 中文网站：www.bootcss.com

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

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

③ 下载完成后进行拷贝

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

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

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

点击 download：

选择第二行点击打开：

我们可以看到代码行：

⑥ 复制以上所有代码

并粘贴到前面我们已经创建好的 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 声明一个类修改部分样式！

2.百分百宽度

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

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

四、栅格网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列，通过一系列行与列的组合来创建页面布局，你的内容就可以放入这些创建好的布局当中。

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有平分成24份和32份的，但12份是最常见的），再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。

注意网格系统必须使用到 CSS！

1.列组合

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

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

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>

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>

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

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

4.列嵌套

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>

想适应更多的屏幕可多添加几个类，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>

② 显示多行代码

代码会保留原本的格式，包括空格和换行！

③ 快捷键

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

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

⑤ 多行代码滚动条

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>

5.表单

5.1 表单控件

① 输入框

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

② 下拉列表

下拉框同理，利用栅格网格系统控制整体宽度！

对比一下这两种下拉框，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>

③ 文本域

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

④ 复选框

.checkbox 垂直显示！

.checkbox-inline 水平显示！

注意垂直显示和水平显示外层容器的写法是不一样的！

⑤ 单选框

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

⑥ 按钮

（1）基础样式：btn

（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 就可以获得不同尺寸的按钮。

（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 ”。

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

① 点击组件

② 复制想要的图标代码

③ 给 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>

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。