Bootstrap 框架详解

以你之姓@ 2023-09-26 11:28 43阅读 0赞

#### 文章目录 ####

*   *  一、Bootstrap 简介
     *  二、安装及使用
     *  三、布局容器
     *   *  1.固定宽度
         *  2.百分百宽度
     *  四、栅格网格系统
     *   *  1.列组合
         *  2.列偏移
         *  3.列排序
         *  4.列嵌套
         *  5.根据分辨率自适应
     *  五、常用样式
     *   *  1.排版
         *  2.列表
         *  3.代码
         *  4.表格
         *  5.表单
         *   *  5.1 表单控件
             *  5.2 表单布局
         *  6.缩略图
         *  7.面板

### 一、Bootstrap 简介 ###

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

### 二、安装及使用 ###

Bootstrap 中文网站：`www.bootcss.com`

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

![在这里插入图片描述][ba61683221d44214a023a9ba0d025c1f.png_pic_center]  
**② 在项目中创建一个名为 bootstrap 的文件夹**  
后面用于放 bootstrap 相关文件。

**③ 下载完成后进行拷贝**

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

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

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

点击 download：

![在这里插入图片描述][3f8577b758af45baa9e3ba4a13d06d01.png_pic_center]  
选择第二行点击打开：  
![在这里插入图片描述][5ef59c66add1478980631f9df3aa252a.png_pic_center]  
我们可以看到代码行：

![在这里插入图片描述][b91475e272ad4c2994f5fdfb00a35226.png_pic_center]  
**⑥ 复制以上所有代码**

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

**⑦ 外链引入文件**

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

### 三、布局容器 ###

#### 1.固定宽度 ####

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

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

![在这里插入图片描述][b2ec0fdbe598430f9ba983fe146761dc.png_pic_center]

#### 2.百分百宽度 ####

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

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

### 四、栅格网格系统 ###

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

#### 1.列组合 ####

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

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

![在这里插入图片描述][5c14df00a02d43d5bc8c89875b88f45b.png_pic_center]

#### 2.列偏移 ####

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

![在这里插入图片描述][98457baddbab43e0ba935301a00df9f6.png_pic_center]

#### 3.列排序 ####

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

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

![在这里插入图片描述][116dea95242b424bb2e5f3070e896688.png_pic_center]  
`偏移会挤走后面的盒子，而排序则会压住前面的盒子，左浮动压住前面的盒子，右浮动被后面的盒子压住！`

#### 4.列嵌套 ####

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

![在这里插入图片描述][66376edce5c94a988ed7575bbd9fbd2a.png_pic_center]

#### 5.根据分辨率自适应 ####

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

![在这里插入图片描述][2e0ce43c448144ac9410b417b290db53.png_pic_center]

![在这里插入图片描述][aa1436d0bf364b0ea96c90eb8e28961f.png_pic_center]  
`想适应更多的屏幕可多添加几个类，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>

![在这里插入图片描述][af4fc3a9b7ae425db450a5479ce09d96.png]

**② 显示多行代码**

![在这里插入图片描述][93608ca5d3f442b99135585f845aae1e.png_pic_center]  
`代码会保留原本的格式，包括空格和换行！`

**③ 快捷键**

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

![在这里插入图片描述][95fbd4c828ac45b181e10c7cbf2b0c7e.png_pic_center]

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

**⑤ 多行代码滚动条**

#### 4.表格 ####

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

**表格样式：**

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

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

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

![在这里插入图片描述][1fb5d315a0b34819bb96f9291c9f0fca.png_pic_center]

#### 5.表单 ####

##### 5.1 表单控件 #####

**① 输入框**

如果直接写 input 标签则一个输入框会自己占据一行，显然不合适，我们可以利用栅格网格系统申请一行出来，通过设置列数来控制输入框长度。如图：  
![在这里插入图片描述][00db95c968ac40628eee4711c1173dcb.png]  
**② 下拉列表**

下拉框同理，利用栅格网格系统控制整体宽度！  
对比一下这两种下拉框，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>

![在这里插入图片描述][004cbc83f23f4e8b96a1773aa6af6cf5.png]  
**③ 文本域**

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

**④ 复选框**

.checkbox 垂直显示！

.checkbox-inline 水平显示！

![在这里插入图片描述][98186f5d798d48e4af25fe19ea6ac481.png]  
`注意垂直显示和水平显示外层容器的写法是不一样的！`  
**⑤ 单选框**

单选框与复选框类似，垂直显示 .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”。

![在这里插入图片描述][4f3d986c92dd4088ba7b3c67c6704717.png_pic_center]

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

**① 点击组件**

![在这里插入图片描述][712e04bcbeef4ac1a1ca9c33c6db36d2.png_pic_center]  
**② 复制想要的图标代码**

![在这里插入图片描述][a50cd399c7c84133b80882e6d06439ac.png_pic_center]  
**③ 给 span 标签添加类，类名即上面复制过来的图标代码**

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

#### 7.面板 ####

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

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

![在这里插入图片描述][39360ad4b2344e28b3f414ddbf62b4c5.png_pic_center]

[ba61683221d44214a023a9ba0d025c1f.png_pic_center]: https://img-blog.csdnimg.cn/ba61683221d44214a023a9ba0d025c1f.png#pic_center
[3f8577b758af45baa9e3ba4a13d06d01.png_pic_center]: https://img-blog.csdnimg.cn/3f8577b758af45baa9e3ba4a13d06d01.png#pic_center
[5ef59c66add1478980631f9df3aa252a.png_pic_center]: https://img-blog.csdnimg.cn/5ef59c66add1478980631f9df3aa252a.png#pic_center
[b91475e272ad4c2994f5fdfb00a35226.png_pic_center]: https://img-blog.csdnimg.cn/b91475e272ad4c2994f5fdfb00a35226.png#pic_center
[b2ec0fdbe598430f9ba983fe146761dc.png_pic_center]: https://img-blog.csdnimg.cn/b2ec0fdbe598430f9ba983fe146761dc.png#pic_center
[5c14df00a02d43d5bc8c89875b88f45b.png_pic_center]: https://img-blog.csdnimg.cn/5c14df00a02d43d5bc8c89875b88f45b.png#pic_center
[98457baddbab43e0ba935301a00df9f6.png_pic_center]: https://img-blog.csdnimg.cn/98457baddbab43e0ba935301a00df9f6.png#pic_center
[116dea95242b424bb2e5f3070e896688.png_pic_center]: https://img-blog.csdnimg.cn/116dea95242b424bb2e5f3070e896688.png#pic_center
[66376edce5c94a988ed7575bbd9fbd2a.png_pic_center]: https://img-blog.csdnimg.cn/66376edce5c94a988ed7575bbd9fbd2a.png#pic_center
[2e0ce43c448144ac9410b417b290db53.png_pic_center]: https://img-blog.csdnimg.cn/2e0ce43c448144ac9410b417b290db53.png#pic_center
[aa1436d0bf364b0ea96c90eb8e28961f.png_pic_center]: https://img-blog.csdnimg.cn/aa1436d0bf364b0ea96c90eb8e28961f.png#pic_center
[af4fc3a9b7ae425db450a5479ce09d96.png]: https://img-blog.csdnimg.cn/af4fc3a9b7ae425db450a5479ce09d96.png
[93608ca5d3f442b99135585f845aae1e.png_pic_center]: https://img-blog.csdnimg.cn/93608ca5d3f442b99135585f845aae1e.png#pic_center
[95fbd4c828ac45b181e10c7cbf2b0c7e.png_pic_center]: https://img-blog.csdnimg.cn/95fbd4c828ac45b181e10c7cbf2b0c7e.png#pic_center
[1fb5d315a0b34819bb96f9291c9f0fca.png_pic_center]: https://img-blog.csdnimg.cn/1fb5d315a0b34819bb96f9291c9f0fca.png#pic_center
[00db95c968ac40628eee4711c1173dcb.png]: https://img-blog.csdnimg.cn/00db95c968ac40628eee4711c1173dcb.png
[004cbc83f23f4e8b96a1773aa6af6cf5.png]: https://img-blog.csdnimg.cn/004cbc83f23f4e8b96a1773aa6af6cf5.png
[98186f5d798d48e4af25fe19ea6ac481.png]: https://img-blog.csdnimg.cn/98186f5d798d48e4af25fe19ea6ac481.png
[4f3d986c92dd4088ba7b3c67c6704717.png_pic_center]: https://img-blog.csdnimg.cn/4f3d986c92dd4088ba7b3c67c6704717.png#pic_center
[712e04bcbeef4ac1a1ca9c33c6db36d2.png_pic_center]: https://img-blog.csdnimg.cn/712e04bcbeef4ac1a1ca9c33c6db36d2.png#pic_center
[a50cd399c7c84133b80882e6d06439ac.png_pic_center]: https://img-blog.csdnimg.cn/a50cd399c7c84133b80882e6d06439ac.png#pic_center
[39360ad4b2344e28b3f414ddbf62b4c5.png_pic_center]: https://img-blog.csdnimg.cn/39360ad4b2344e28b3f414ddbf62b4c5.png#pic_center