- 一、bootstrap布局
- 1.什么是bootstrap布局
- 2.布局容器
- 3.使用方法
- 二、栅格系统
- 1.栅格系统
- 2.栅格选项参数
- 2.1 份数相加结果出现的情况
- 2.1.1
- 2.1.2
- 2.1.3
- 3.响应式工具
- 总结
一、bootstrap布局 1.什么是bootstrap布局
Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。基于HTML、CSS、Javascript开发的简洁、直观、强悍的前端开发框架，提供了优雅的HTML和CSS规范，由动态CSS语言Less写成。
2.布局容器bootstarp需要为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好了这个类
3.使用方法1创建文件夹结构
2创建html骨架结构
3引入相关样式文件
4书写内容
做完这步后就可以去网站里面找已经写好的模型进行修改，就可以快速的写出需要做的样式
二、栅格系统 1.栅格系统指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局，然后bootstrap提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为12列
2.栅格选项参数| 超小屏幕（小于768px） | col-xs-份数 |
|---|---|
| 小屏设备（>=768px ~ <992px） | col-sm-份数 |
| 中等屏幕（>= 992px ~ <1200px） | col-md-份数 |
| 宽屏设备（>=1200px） | col-lg- 份数 |
1.如果孩子的份数相加 等于 12 则孩子能占满整个 的container 的宽度
2.如果孩子的份数相加 小于 12 则占不满整个宽度会有空白
3.如果孩子的份数相加 大于 12 则多出来的那一列会另起一行显示
相加得12的代码演示：
效果图：
2.1.2相加小于12
效果图：
2.1.3相加大于12
效果图：
3.响应式工具隐藏：
| hidden-xs | 只在 超小屏隐藏 |
|---|---|
| hidden-sm | 只在小屏隐藏 |
| hidden-md | 只在中屏隐藏 |
| .hidden-lg | 只在大屏隐藏 |
显示：
| visible-xs | 只在超小屏显示 |
|---|---|
| visible-sm | 只在小屏显示 |
| visible-md | 只在中屏显示 |
| visible-lg | 只在大屏显示 |
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
