Bootstrap深入理解（二）这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战 Bootst

这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战

Bootstrap整体架构

1, 前言

其实CSS组件和JavaScript插件只是Bootstrap框架的表现形式，它们都是构建在基础平台之上的。

2, CSS12栅格系统

1，什么是栅格系统？

以规则的网格阵列来指导和规范网页中的版面以及信息分布，网页栅格系统是从屏幕栅格系统中发展而来的，对于网页设计来说，栅格系统的使用，不仅可以让网页信息的呈现更加美观，易读，更具有可用性，对前端来说，让网页开发更加灵活与规范。

Bootstrap的12栅格系统也就是把网页的总宽度平分为12份，开发人员可以自由按份组合。12栅格系统是整个Bootstrap的核心功能，也是响应式设计核心理念的一个实现形式。

Bootstrap的整体架构图

注意：在Bootstrap栅格系统在基础之上，提供了很多种基础布局组件，而且，Bootstrap所有的Javascript插件都依赖于jQuery1.10+,如果要使用这些插件，那就必须引用jQuery库。如果你只是用CSS组件，那就可以不用引用它，

3，组件

1， CSS组件

在最新的3.x版本里面提供了20种CSS组件

下拉菜单 (Dropdown)、按钮组(Button group)、按钮下拉菜单 (Button dropdown)、
导航(Nav)、导航条(Navbar)、面包屑导航(Breadcrumb)、
分页导航(Pagination)、标签(Label)、徽章 (Badge)、排版(Typography)、
缩略图 (Thumbnail)、警告框(Alert)、进度条(Progress bar)、
媒体对象(Media object)、洼地(Well)
图标(Icon)、大屏幕展播（Jumbotron）、页面标题（Page header）
输入框（Input group）、列表组（List group）、 面版（Panel）

2，JavaScript组件

动画效果（Transition）、模态弹窗(Modal)、下来菜单(Dropdown)、滚动侦测(Scroll Spy)、
选项卡(Tab)、提示框(ToolTip)、警告框(Alert)、弹出框(Popover)、
按钮(Button)、旋转轮播(Carousel)、
折叠(Collapse)、自动定位浮标(Affix)

4, 实现原理

栅格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份，再调整内外边距，

最后再结合媒体查询，就制作出了强大的响应式的栅格系统

栅格系统的主要工作原理：

1, 一行数据(row)必须包含在.container中，以便为其赋予合适的对齐方式和内边距(padding)
2, 使用行(row)在水平方向创建一组列(column)
3, 具体内容应当放置于列(column)内，而且只有列 (column)可以作为行(row)的直接子元素。
4, 内置一大堆样式，可以使用像.row和.col-xs-4(占4列宽 度)这样的样式来快速创建栅格布局。
5, 通过设置padding从而创建列(column)之间的间隔。然后 通过为第一列和最后一列设置负值的
margin从而抵消掉padding的 影响。
6, 栅格系统中的列是通过指定1到12的值来表示其跨越的范围 的。例如，要让屏幕分为3个等宽的部分，
可以使用3个.col-xs-4 来创建。

常用知识：浏览器宽度含4种类型

<768px
>=768px
>=992px
>=1220px

5, 基本用法

说到栅格系统的用法，其实就是列的组合。在基本用法里有4种特性

1.列组合

通过更改数字来合并列，类似于表格里的colspan

<div class="container"> 
    <div class="row">
      <div class="col-md-1">.col-md-1</div> 
      <!--由于这12个div都一样,所以这里省略了其他10个-->
      <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div> 
    </div>
    <div class="row">
         <div class="col-md-4">.col-md-4</div> 
         <div class="col-md-4">.col-md-4</div> 
         <div class="col-md-4">.col-md-4</div>
      </div>
    <div class="row">
      <div class="col-md-6">.col-md-6</div> 
      <div class="col-md-6">.col-md-6</div> 
    </div> 
</div>

运行截图：

2.列偏移

有的时候，我们不想让两个相邻的列挨在一起，这时候利用栅格系统的列偏移(offset)功能来实现，而不必再定义margin值。使用.col-md-offset-*形式的样式就可以将列偏移到右侧。

例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度

<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div>
<div class="row">
    <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

3.列嵌套

同样，栅格系统也支持列嵌套，即在一个列里再声明一个或者多个行(row)。但是注意，内部所嵌套的row的宽度为100%时，就是当前外部列的宽度。示例代码如下

<div class="row">
   <div class="col-md-9">
       Level 1: .col-md-9 
       <div class="row">
           <div class="col-md-6">Level 2: .col-md-6</div>
           <div class="col-md-6">Level 2: .col-md-6 </div> 
       </div>
  </div>
  <div class="col-md-3">
  </div> 
</div>

![截屏2021-11-18 下午8.04.17](/Users/zhengliming511/Desktop/截屏2021-11-18 下午8.04.17.png)

4.列排序

列排序其实就是改变列的方向，也就是改变左右浮动，并且设置浮动的距离。在栅格系统里，可以通过.col-md-push-*和.col-md-pull-*来实现这一目的

// 源码1125行
.col-md-pull-12 { right: 100%;} 
.col-md-pull-11 { right: 91.66666666666666%;} 
.col-md-pull-10 { right: 83.33333333333334%;} 
.col-md-pull-9 { right: 75%;}
.col-md-pull-8 { right: 66.66666666666666%;} 
.col-md-pull-7 { right: 58.333333333333336%;} 
.col-md-pull-6 { right: 50%;}
.col-md-pull-5 { right: 41.66666666666667%;} 
.col-md-pull-4 { right: 33.33333333333333%;} 
.col-md-pull-3 { right: 25%;}
.col-md-pull-2 { right: 16.666666666666664%;} 
.col-md-pull-1 { right: 8.333333333333332%;} 
.col-md-pull-0 { right: 0;}

.col-md-push-12 { left: 100%;}
// 其他同理,上pull的设置类似,唯一不同的就是right和left的区别 
.col-md-push-0 { left: 0;}

6, 响应式栅格

Bootstrap为不同的屏幕尺寸提供了4种不同的栅格样式

中型屏幕(md)，超小(xs)、小型(sm)、大型(lg)

代码实现如下：

// 超小型是默认实现 
// 小型
 
@media (min-width: 768px) { 
   .container { width: 750px;
}

// 中型
@media (min-width: 992px) {
   .container { width: 970px;
}

// 大型
@media (min-width: 1200px) {
   .container { width: 1170px;
}

Bootstrap深入理解（二）