目录
一、Bootstrap概述：
英文官网：
编辑
中文官网：
编辑
编辑
Bootstrap响应式布局设计，让一个网站可以兼容不同分辨率的设备。Bootstrapt能提供很好的视觉使用体验！
下载Bootstrap：
编辑
二、Bootstrap HTML模板：
请确保使用最新的页面设计和开发标准来设置页面。也就是说，使用 HTML5 文档类型（doctype）、并包含一个设置 viewport（视口）的 <meta> 标签以实现正确的响应式布局行为。这些要求组合在一起之后，你的页面应当如下所示：
这是V5版本的Bootstrap
<!doctype html> <html lang="zh-CN"> <head> <!-- 必须的 meta 标签 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 的 CSS 文件 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LY6QZQpYtqgQLJeUeh2disXkUUa+fRYfq/3dxdpkU5PQZUCqg/BK4wrhQ9idOojx" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ --> <!-- 选项 1：包含 Popper 的 Bootstrap 集成包 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-3JyvMmfSMpWbSPyCjNwU5lHJFeswLerSwlOGCGjyuhQ+HKQNQKCbIzEgGTP1MfyY" crossorigin="anonymous"></script> <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 --> <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-sy7xrBVBIaMK3slILGYC/U63fKx1UrfD8TRvvm7ofBK58y8tUNR4GWLKo+k+Yx8K" crossorigin="anonymous"></script> --> </body> </html>
这是V3版本的Bootstrap：
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- X-UA-Compatible来设置IE浏览器兼容模式，最新的渲染模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- viewport：表示用户是否可以缩放页面 width：指定视图区的逻辑宽度 device-width：指示视区宽度应为设备的屏幕宽度 initial-scale：指令用于设置web页面的初始化缩放比例 initial-scale=1：将显示未经缩放的web文档 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> </body> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> </html>
三、布局容器和栅格网格系统：
1.布局容器：
.container 用于固定宽度并支持响应式布局的容器：
<div class="container"> ... </div>
.container-fluid 用于100%宽度，占据全部视口（viewport）的容器：
<div class="container-fluid"> ... </div>
2.栅格网格系统：
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或者视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，内容就可以放入这些创建好的布局中。
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有平分24份或者32份，但是12份是最常见的），再调整内外边距，最后结合媒体查询，就制作出了强大的相应式网格系统。Bootstrap框架中的网格系统就是将容器平分成为12份。
编辑
注意：使用网格系统必须使用到CSS，引入Bootstrap的CSS文件
container、row、xs（xsmall phones）、sm（small tables），md（middle desktops），lg（larger desktops）即：超小屏（自动），小屏（750px），中屏（970px），大屏（1170px）
数据行（.row）必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距（padding）
在行（.row）中可以添加列（.column），只有列（column）才可以作为行容器（.row）的直接子元素，但列数之和不能超过平分的总列数，比如12。如果大于12，则自动换到下一行。
具体内容应当放置在列容器（column）之内：
<div class="container"> <div class="row"> <div class="col-md-4" style="background-color: blueviolet;">4列</div> <div class="col-md-8" style="background-color: cadetblue;">8列</div> </div> </div>
编辑
2.1 媒体查询：
Bootstrap会根据当前屏幕尺寸动态调整CSS中编写的尺寸样式！
编辑
2.2 栅格参数：
编辑
2.3 列组合：
列组合简单理解就是改变数字来合并列（原则：列总和数不能超过12，大于12，则自动换到下一行），类似于表格的colspan属性：
<div class="container"> <div class="row"> <div class="col-md-4" style="background-color: blueviolet;">4列</div> <div class="col-md-8" style="background-color: cadetblue;">8列</div> </div> <hr> <div class="row"> <div class="col-md-3" style="background-color: blueviolet;">3列</div> <div class="col-md-3" style="background-color: cadetblue;">3列</div> <div class="col-md-3" style="background-color: rgb(255, 0, 0);">3列</div> </div> <hr> <!-- 超过12列，则会出现换行！！！ --> <div class="row"> <div class="col-md-8" style="background-color: blueviolet;">8列</div> <div class="col-md-8" style="background-color: cadetblue;">8列</div> </div> </div>
编辑
2.4 列偏移：
如果我们不希望相邻的两个列紧靠在一起，但是又不想使用margin或者其它的技术手段。这个时候可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名" col-md-offset-* "（其中星号代表要偏移的列组合），那么具有这个类名的列就会向右偏移。但是需要保证列与偏移列总数不超过12，不然会导致列断行（换行显示）
<div class="container"> <div class="row"> <div class="col-md-1" style="background-color: cornflowerblue;">1列</div> <div class="col-md-2" style="background-color: rgb(123, 255, 0);">2列</div> <!-- 这里有一个8列的列偏移 --> <div class="col-md-1 col-md-offset-8" style="background-color: rgb(0, 89, 255);">1列</div> <!-- 由于上面的已经满足12列，所以这一列被换行显示 --> <div class="col-md-1" style="background-color: rgb(221, 0, 255);">1列</div> </div> </div>
编辑
2.5 列排序：
列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名" col-md-push-* " 和 " col-md-pull-* " （其中星号代表移动的列组合数），往前pull，往后push
<div class="container"> <div class="row"> <div class="col-md-6" style="background-color: cornflowerblue;">6列</div> <!-- col-md-pull-4：向前浮动4列 --> <div class="col-md-3 col-md-pull-4" style="background-color: cyan;">3列</div> </div> </div> </body>
编辑
2.6 列嵌套：
Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列
编辑
