Boostrap（未完待续）(六十三)

Boostrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局，移动端设备优先的WEB项目。基于jquery。适用于小型项目，因为boostrap很多样式都预设好了，所以大型项目还是尽量自己手写的好。
Bootstrap相当于就是它有许多现成的样式可以引用，你就需要添加个类名就行。不过理解原理，自己能够手动写一个更好了。
特色：1.响应式布局：我们不需要自己去写madia queries，系统已经帮我们写好了。只需要调用给我们的样式就行

2.基于flex的栅格系统

3.丰富的组件和工具方法

4.常见交互使用

官网：https://getbootstrap.com/
章先学习boostrap的HTML、CSS部分

下载源码->解压->dist->css

boostrap.css:包含了bootstrap.grid.css（网格布局，栅格系统运用flex）和boostrap.reboot.css（重置默认样式css）、以及utilities.css（sass修改和扩展）的。所以在css当中只需要引入boostrap.css文件即可


container:（布局）

包含：

container（版心）

container-fluid(通栏)
源码：

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
   
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
   
  .container-sm, .container {
   
    max-width: 540px;
  }
}
@media (min-width: 768px) {
   
  .container-md, .container-sm, .container {
   
    max-width: 720px;
  }
}
@media (min-width: 992px) {
   
  .container-lg, .container-md, .container-sm, .container {
   
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
   
  .container-xl, .container-lg, .container-md, .container-sm, .container {
   
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
   
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
   
    max-width: 1320px;
  }
}

responsive breakpoints ：响应式回调节点

@media (min-width: 576px) {
   ...}
@media (min-width: 768px) {
   ...}
@media (min-width: 992px) {
   ...}
@media (min-width: 1200px) {
   ...}
@media (min-width: 1400px) {
   ...}

grid-system（网格系统）
grid options:网格配置

responsive classes：响应式classes
gutters：间距
alignment：对齐方式
reordering：排序
offsetting：中间空的栅格
示例：

部分源码：

.row {
   
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;   /* 换行*/
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}
.row > * {
   
  flex-shrink: 0;   /*防止其他元素增大，造成元素被压缩*/
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-top: var(--bs-gutter-y);
}

.col {
   
  flex: 1 0 0%;   /* 每列平均占据剩余空间的*/
}

不难看出，boostrap的栅格化系统是利用flex布局完成的

折行：源码

.w-100 {
      /* 换行*/
  width: 100% !important;
}

根据跨列数设置

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>  /*整个容器占8列*/
    <div class="col-4">col-4</div>