首页

# Bootstrap 是什么

  1. 前端框架 JQ：库。仓库、工具库。一个 JS 文件 BS: 框架。一套快速搭建响应式网站的解决方案（HTML+CSS+JS） 区别：

前者是弱约定：开发权（选择权）在开发者手里，开发者可以绝对要不要它的方法和属性

后者是强约定：主导权在框架手里。开发者需要按照框架的约定来开发。必须要按照它的写法或规则来写代码。

  1. 响应式设计 BS 一套代码解决 3 端适配问题。

  2. 栅格化系统 它是一种思想，而不是技术。 网页：是一个放模块的容器。网页拆分为很多个部件（模块）：导航、搜索、tab 切换页、卡片、轮播图、侧边栏。。。

  3. 全球流行 国内，国外用的人也很多。

  4. 推特出品 世界版的微博。该前端团队推出的。

  5. 移动端优先 在移动端有很好的兼容性。反而在某些低版本浏览器存在不兼容的问题。

# 如何学习

  1. 学习方式变了。通过官方的在线文档来学习。（更新速度快） https://www.getbootstrap.com/。

  2. 正确掌握复制粘贴代码的技巧。 BS 的本质：提供了一个 HTML 结构（模块）、css、和 JS，只需要配对应的 class 即可。像搭积木那样去快速搭建一个响应式的网站。

# Bootstrap 的栅格化系统

  1. 栅格化概念。

    1. 用于通过一系列的行（row）与列（column）的组合来创建页面布局 。
    2. 随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。即 width 为 100 / 12 = 8.33333333% 。
    3. 内容应当放置于 “列（column）” 内，并且，只有 “列（column）” 可以作为行（row）” 的直接子元素。
    4. 如果一 “行（row）” 中包含了的 “列（column）” 大于 12，多余的 “列（column）” 所在的元素将被作为一个整体另起一行排列。

  2. 栅格化参数（如何实现跨行、跨列、响应式）。

    1. 类前缀：

      1
      2
      3
      4
      5
      6
      7

      .col-*   针对所有设备（手机），小于5 	
      .col-sm-* 平板 - 屏幕宽度等于或大于 576px) small 	
      .col-md-* 桌面显示器 - 屏幕宽度等于或大于 768px) medium 	
      .col-lg-* 大桌面显示器 - 屏幕宽度等于或大于 992px)  large 	
      .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)  extra large
      *表示数字：填写1-12中的某一个

    2. 列偏移：使用 offset-- 类。比如 offset-md-1 可以将列向右侧偏移一列的位置。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11

      <div class="row">
          <div class="col-5">
              <div>第1列</div>
          </div>
          <!--表示往右偏移两列-->
          <div class="offset-2 col-5">
              <div>第2列</div>
          </div>
      </div>

  3. 流式布局容器。将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

1
2
3
4
5
6
7

<div class="container-fluid">
    <div class="row">
        ...
    </div>
</div>