BootStrap 简介
概念:
课程目标：
- 响应式布局技术
- 了解BootStrap前端框架
二.BootStrap
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap 是一个用于 HTML、CSS 和 JS 开发的开源工具包,来自于Twitter,利用 Bootstrap 提供的 Sass 变量和混合（mixins）、响应式栅格系统、可扩展的预制组件以及强大的 jQuery 插件，能够让你快速地开发出产品原型或构建整个 app。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X2TH0vnA-1589444900650)(E:\政通路\课堂笔记\S2\bootstrap\assets\image-20200514104947017.png)]
2.1 引入文件
bootStrap.min.css
jquery.min.js
bootStrap.min.js
2.2 栅格系统
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mB2xHvew-1589444900655)(E:\政通路\课堂笔记\S2\bootstrap\assets\image-20200514105715506.png)]
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
我们也可以根据自己的需要，定义列数：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pMmnc2G1-1589444900658)(E:\政通路\课堂笔记\S2\bootstrap\assets\image-20200514105759039.png)]
Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。
Bootstrap 4 网格系统有以下 5 个类(class):
- .col- 针对所有设备
- col-xs 小设备
- .col-sm 平板 - 屏幕宽度等于或大于 576px
- .col-md 桌面显示器 - 屏幕宽度等于或大于 768px)
- .col-lg 大桌面显示器 - 屏幕宽度等于或大于 992px)
- .col-xl 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
2.2.1网格系统规则
Bootstrap4 网格系统规则:
- 网格每一行需要放在设置了
.container(固定宽度) 或.container-fluid(全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。 - 使用行样式row来创建水平的列组。
- 内容需要放置在列中，并且只有列可以是行的直接子节点。
- 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。col:column列单词；sm:平板;-4:4个格
col-sm-n，n（1–12）设置列。 - 列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
- 网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用用三个.col-sm-4 来设置。
- Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。
列组合
row/col-md-4 col-md-8等测试
列偏移
col-md-offset-4,原理 margin-left
列嵌套
<div class=‘row’>div代码嵌套代码</div>
列排序
col-md-push-8 推向右侧
2.2.2 CSS全局样式
的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。
列组合
row/col-md-4 col-md-8等测试
列偏移
col-md-offset-4,原理 margin-left
列嵌套
<div class=‘row’>div代码嵌套代码</div>
列排序
col-md-push-8 推向右侧
2.2.2 CSS全局样式
是CSS最基础、最简单的语法组合而成的，通过这些基础而又核心的布局语法，不需要太多时间就能制作出来比较精美的页面。并且为什么叫它是全局样式，主要是它的使用比较自由，可以在页面中的任意位置使用，也可以放在Bootstrap组件里使用
