bootstrap响应式框架

BootStrap：

框架：顾名思义就是一套结构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预知样式库、组件和插件。

注意点：如果网页内容多的话，响应式的缺点显而易见，加载速度会慢，相反比较适合页面简单的

八字真言(重要)：

判断最小值，从小到大写：向上兼容，向下覆盖

BootStrap基本使用：要引入bootstrap源码

1.要引入bootstrap.css    如果仅仅只是样式的话就引入css

<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css" />

2.引入bootstrap.js 如果需样式和其他功能如：轮播图，想要引入js

    <script src="./js/jquery.js"></script>

    <script src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script>

注意：

1. jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边)
2. 如果需要js就要先引入jquery.js文件
3. Bootstrap 是移动设备优先的
4. 在网站找到定制，找到grid system 把12改15，可以把col-xs-12变成15

布局容器：

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器，屏幕不同，width也不同。

<div class="container">

  ...</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">

  ...</div>

栅格系统：

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

 

注意点：

BootStrap3默认将网页分成12等份

col-xs-8 //占8份

<div class="col-xs-3 col-sm-6 col-md-12">1</div>    //超小屏幕3份，小屏幕6份，大屏幕12份

1. “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

<div class=”container”>

<div class=”row”> //.row可以把container里面的左右padding去掉

...

</div>

</div>

1. 通过“行（row）”在水平方向创建一组“列（column）”。
2. 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
3. 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
4. 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
5. 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
6. 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
7. 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。

列偏移：

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

本质是使用了margin-left

列排序：
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

本质是使用了定位

push是往后移 pull是往前拉

辅助类：显示和隐藏

hidden-xs

CSS object-fit 属性

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。

fill	默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
contain	保持原有尺寸比例。内容被缩放。
cover	保持原有尺寸比例。但部分内容可能被剪切。        object-fit:cover
none	保留原有元素内容的长度和宽度，也就是说内容不会被重置。
scale-down	保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。