简介
什么是bootstrap：
- bootstrap是专门用于响应式布局,移动设备优先的WEB框架
boostrap3和boostrap4的区别：
| bootstrap3 | bootstrap4 |
|---|---|
| less | sass |
| 4种格栅 | 五种格栅 |
| px为单位 | rem为单位 |
| float布局 | flex布局 |
bootstrap3模板
-
可以让部分国产浏览器默认采用高速模式渲染页面
<meta name="renderer" content="webkit"> -
让 IE 浏览器运行最新的渲染模式
<meta http-equiv="X-UA-Compatible" content="IE=edge"> -
为了保证在移动端能够正常的显示
<meta name="viewport" content="width=device-width, initial-scale=1"> -
自己网页的标题
<title>标题</title> -
导入Bootstrap的CSS文件
<link rel="stylesheet" href="css/bootstrap.css"> -
如果当前是IE9以下的浏览器, 那么就导入以下的两个JS文件
- 导入respond.js文件的目的, 是为了能够在IE8以及IE8以下的浏览器中使用媒体查询
- 导入html5shiv.js文件的目的, 是为了能够在IE8以及IE8以下的浏览器中使用H5新增的标签
<!-- [if xxx] ![endif]这个是IE中的条件注释, 只有在IE浏览器下才会执行 以下代码的含义: 如果当前是IE9以下的浏览器, 那么就导入以下的两个JS文件 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <script src="js/respond.js"></script> <![endif]-->
bootstrap整体导入模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--可以让部分国产浏览器默认采用高速模式渲染页面-->
<meta name="renderer" content="webkit">
<!--为了让 IE 浏览器运行最新的渲染模式下-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--为了保证在移动端能够正常的显示-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>自己网页的标题</title>
<!-- 导入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="css/bootstrap.css">
<!--导入respond.js文件的目的, 是为了能够在IE8以及IE8以下的浏览器中使用媒体查询-->
<!--导入html5shiv.js文件的目的, 是为了能够在IE8以及IE8以下的浏览器中使用H5新增的标签-->
<!--
[if xxx] ![endif]这个是IE中的条件注释, 只有在IE浏览器下才会执行
以下代码的含义: 如果当前是IE9以下的浏览器, 那么就导入以下的两个JS文件
-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-1.12.4.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.js"></script>
</body>
</html>
bootstrap容器
固定容器 container
- 只要给标签添加 container 类名,该标签就变成bootstrap中的容器
- 只要成为了bootstrap容器,那么该标签在不同窗口下,就会有不同的固定宽度
自适应容器 container-fluid
- 只要给该标签添加 container-fluid 类名,就成为bootstrap的container容器
- 只要这个标签成为了container-fluid容器,那么在不同窗口下,永远都是100%自适应的(宽度永远是100%)
bootstrap对窗口的划分
容器实现:
- 使用媒体查询,查询浏览器的宽度,当宽度达到一个点时,修改容器宽度
- @madia() 就是媒体查询
bootstrap格栅系统
- 格栅系统使用统一的"行","列"来实现复杂的响应式布局
- 默认情况下一行内容被分为12份
- 通过绑定类名的方式来指定一行中的列占据该行多少份
bootstrap格式
- <容器>
- <行>
- <列>
- <列>
- <行>
- <行>
- <容器>
格栅的特点
- 每行的宽度自动和容器宽度一致
- col(列)是自动等分行的宽度的
- 可以通过 col-num 来指定该列占据12分之几
- 如果一行的列数总宽度超过了12份,那么会自动换行
格栅的参数
bootstrap3的4种栅格:
- 特小（col-xs-） 适配手机(<768px)
- 小（col-sm-） 适配平板(≥768px)
- 中（col-md-） 适配电脑(≥992px)
- 大（col-lg-） 适配宽屏电脑(≥1200px)
bootstrap4的5种栅格:
- 特小（col-）(<576px)
- 小（col-sm-）(≥576px)
- 中（col-md-）(≥768px)
- 大（col-lg-） (≥992px)
- 特大（col-xl-）（≥1200px）
特点:
- 当使用了最小的栅格时,在大屏模式下也会保持最小的栅格比例(比例(%)不会改变)
- 当使用了大栅格时,从大屏切到小屏会换行
栅格系统的列相关操作
列偏移
- 使用 .col-md-offset-num 类可以将列向右侧偏移
栅格系统的列排序
- 通过使用 .col-md-push-* 和 .col-md-pull-* 类来改变列的排序
