Bootstrap（3、4的区别、引入链接、全局设置（HTML5文档类型、响应式布局相关的标签、css盒模型）、栅格系统（原理、使用、网格选项、列偏移、列排序）、教程、官方中文网）

最新推荐文章于 2024-07-27 09:06:27 发布

YF-SOD

最新推荐文章于 2024-07-27 09:06:27 发布

阅读量918

点赞数 3

分类专栏： JavaScript库文章标签： Bootstrap使用详解 Bootstrap3和4的区别栅格系统原理及使用、网格选项 Bootstrap教程、中文网提前写好的全局设置、列偏移排序

本文链接：https://blog.csdn.net/AIWWY/article/details/120634359

版权

JavaScript库专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Bootsrap

有大量页面组件和JavaScript插件（轮播图、弹出框等），可以直接用于响应式布局的框架。自定义了一套响应式规则（栅格系统），只需要给盒子添加几个class，即可实现响应式布局。

Bootstrap3和4的区别

Bootstrap3	Bootstrap4
less编写	sass编写
4种栅格类	5种栅格类
使用px为单位	使用rem和em为单位（除部分margin和padding使用px）
使用push和pull左右移动	偏移列通过offset-类设置
使用float布局方式	选择弹性盒模型（flexbox）

基本使用

引入链接

下载bootsrtap压缩包，在页面引入bootstrap.min.css即可使用Bootstrap中的组件。

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

注意：Bootstrap 自带的大部分组件都需要依赖 JavaScript 才能起作用。具体来说，这些组件依赖 jQuery、Popper 以及bootstrap官方的JavaScript 插件。

复制下面的 <script> 标签 粘贴到页面底部，并且是在 </body> 标签之前，就能起作用了。顺序很重要，首先是 jQuery，然后是 Popper，最后是bootstrap官方的 JavaScript 插件。

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

其中Popper和官方的js插件可以用一个代替。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-NU/T4JKmgovMiPaK2GP9Y+TVBQxiaiYFJB6igFtfExinKlzVruIK6XtKqxCGXwCG" crossorigin="anonymous"></script>

全局设置

Bootstrap 依赖一些重要的全局样式和设置，专门针对的是跨浏览器的样式统一化（normalization），需要在使用 Bootstrap前写好。

HTML5 文档类型（doctype）

Bootstrap 要求文档类型（doctype）是 HTML5。如果没有这一设置，你就会看到一些古怪的、不完整的样式，

<!doctype html>
<html lang="zh-CN">
</html>

响应式布局相关的标签

Bootstrap 采用的是 移动设备优先（mobile first） 的开发策略，因此首先为移动设备优化代码，然后根据需要并利用 CSS 媒体查询功能来缩放组件。为了确保所有设备都能支持正确的渲染和触屏缩放，请务必在 <head> 标签中 添加让 viewport（视口）支持响应式布局的标签。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

meta标签和viewport详解见下面链接：

https://blog.csdn.net/AIWWY/article/details/120499036

CSS 盒模型

为了让 CSS 中的尺寸设置更加直观，我们将全局的 box-sizing 从 content-box 调整为 border-box。这样可以确保 padding 的设置不会影响计算元素的最终宽度，但是会导致某些第三方软件（例如 Google Maps 和 Google Custom Search Engine）出现问题。

在为数不多的情况下，你需要专门覆盖这一些设置，可以使用如下示例代码：

.selector-for-some-widget {
  box-sizing: content-box;
}

利用上述代码片段，嵌套的元素（包括通过 ::before 和 ::after 生成的内容）都将继承 .selector-for-some-widget 所指定的 box-sizing 值。

Bootstrap栅格系统

bootstrap自定义的一套用于快速构建响应式布局的一系列规则。也预定义了很多跟布局相关的class。我们可以通过使用这些class来快速构建响应式布局。

原理

bootstrap利用行和列来对内容进行布局，根据屏幕宽度的不同，自动将一行的宽度自动分成12列，在不同的宽度的屏幕下，每一列的宽度都是不一样的，以此来达到响应式布局的效果。

使用

给需要响应式布局的元素上添加2个外层元素包裹，最外层元素的class为container或container-fluid属性，次外层元素class为row。row属性的元素下的内容是默认横向排列，且（该元素）宽度被自动分成了12份，然后在给需要响应式布局的元素添加网络选项的class前缀加数字（1~12）确定所占用row元素的宽度，row元素宽度为父集container的100%，高度为子集的最高高度，可以并列，可以嵌套，如下例子：

<div class="container">
        <div class="row">
            <div class="col-lg-3" style="background-color: #dedef8;">
                <h4>第一行row</h4>
            </div>
            <div class="col-md-9" style="background-color: #dedef8;">
                <h4 style='height: 50px;'>第一行row - 里面嵌套2并列row</h4>
                <div class="row">
                    <div class="col-md-6" style="background-color: #B18904;">
                        嵌套row1-1
                    </div>
                    <div class="col-md-6" style="background-color: #B18904;">
                        <p>
                            嵌套row1-2
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6" style="background-color: #B18904; ">
                        <p>
                            嵌套row2-1
                        </p>
                    </div>
                    <div class="col-md-6" style="background-color:#B18904;">
                        <p>
                            第2列盒子-2
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="background-color: red;">
            <div class="col-lg-3" style="background-color: #dedef8;">3</div>
            <div class="col-lg-6" style="background-color: #dedef8;height: 100px;" >6</div>
        </div>
    </div>

显示效果：

网格选项

当设备宽度处于不同的范围（xs、sm、md、lg）下，指定每个内容盒子所占的列数。

	超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数量和	12	12	12	12
最大列宽	Auto	60px	78px	95px
间隙宽度	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

列偏移

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如在大屏幕显示器上使用偏移，可以使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

例如下面代码，相当于12列中已经占满了3列空内容。内容占6列，右侧还剩3列，所以相当于居中。

<div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3" style="background-color: #dedef8;">
                <p>居中</p>
            </div>

        </div>
    </div>

显示效果：

列排序

和列偏移类似，使用 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的排序，其中 * 范围是从 1 到 11。

理解为先按未加该类显示，然后push相当于右移，pull相当于左移，重叠部分，后面（后出生）的元素覆盖前面的（先出生）。

Bootstrap3教程

Bootstrap 教程 | 菜鸟教程

Bootstrap4教程

Bootstrap4 教程 | 菜鸟教程

bootstrap官方中文网

Bootstrap中文网

YF-SOD

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap（3、4的区别、引入链接、全局设置（HTML5文档类型、响应式布局相关的标签、css盒模型）、栅格系统（原理、使用、网格选项、列偏移、列排序）、教程、官方中文网）

目录BootsrapBootstrap3和4的区别基本使用引入链接全局设置HTML5 文档类型（doctype）响应式布局相关的标签CSS 盒模型Bootstrap栅格系统原理使用网格选项列偏移列排序Bootstrap3教程Bootstrap4教程bootstrap官方中文网Bootsrap有大量页面组件和JavaScript插件（轮播图、弹出框等），可以直接用于响应式布局的框架。自定义了一套响应式规则（栅格系统），只需要给盒...
复制链接

扫一扫

专栏目录