BootScrap

Posted 2020-07-20 Frank55

　　Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 html、CSS、javascript 的，它简洁灵活，使得 Web 开发更加快捷。

一些基本的用法：

 Normalize  css.Reset 重置，浏览器兼容

font-family：sans-serif(无衬线字体)

衬线字体指的是有装饰效果的字体比如宋体

一般屏幕都是要求显示无衬线字体

自带响应式布局效果

屏幕可以分为超小、小型、中等和大型

超小 XS  <768

小型  SM  >768  <992

中型  MD  >992  <1192/1200

大型  LG  >1200

输入设置屏幕大小，用XS的设定就可以兼容其他大的屏幕

offect可以移动  把两个一起移动

push  移动 但是后面的会重叠到前面的来

pull  拉回来

如果只是初步的学习，其实可以只引入“bootstrap.min.css”这一个就可以了。其它文件都可以看成是功能的扩展和增强。

要用珊格系统呢，首先要创建一个容器，container或container-fluid.

<div class="container">
  ...
</div>

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

这相当于是创建一个<table></table>,所以接下来，要创建行和列也是情理之中的啦。

<div class="row">
      <div class="col-xs-4">col-xs-4</div>
     <div class="col-xs-8">col-xs-8</div>
</div>

<div class="row"></div> 这个就相当于是<tr></tr>,<div class="col-xs-4"></div>就相当于是<td></td>

col-xs-4 是代表了三个意义：col表是创建的是一个列，xs表示小屏设备，4呢，表示把一行划分成12份，它占4份。它就是用这种方法来实现布局的，所以，这和表格的布局方式多少有几分相似，但是表格呢不会根据屏幕的宽度实现自动增减列数和调整列宽，栅格系统可以看成是一个更灵活的表格。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

• “行（row）”必须包含在  .container  （固定宽度）或  .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似  .row  和  .col-xs-4  这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
• 通过为“列（column）”设置  padding  属性，从而创建列与列之间的间隔（gutter）。通过为  .row  元素设置负值 margin  从而抵消掉为  .container 元素设置的  padding ，也就间接为“行（row）”所包含的“列（column）”抵消掉了 padding 。
• The negative margin is why the examples below are outdented. It‘s so that content within grid columns is lined up with non-grid content.
• Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three  .col-xs-4 .
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。