Bootstrap 的基本使用
一、Bootstrap简介
Bootstrap 是目前受欢迎的前端框架之一，是基于HTML，CSS，JavaScript的，它简洁灵活，使web开发更加快捷
中文官网：http://www.bootcss.com/
官网：http://getbootstrap.com/
推荐：https://v3.bootcss.com/
1.优点
2. 版本
二、 Bootstrap 使用
控制权在框架本身，使用者要安装框架所规定的某种规范进行开发
Bootstrap 使用四部曲：
2.1 创建文件夹结构
2.2 创建html骨架结构
2.3 引入相关样式文件
2.4 书写内容
三、Bootstrap 布局容器
四、Bootstrap 栅格系统
4.1 栅格系统简介
注意：
rem 是把整个屏幕划分为若干等份
而栅格系统是把页面内容划分为若干等宽的列
不同屏幕下container一定会进行一个缩放的效果，这时候把container划分为12等份，如果是在大屏幕下，每列的宽就会变宽了，那么内容就会相对大一些，如果container变小了，每列的宽度也会跟着变小了，页面的内容就会发生相应的缩放，就会实现缩放的效果
总结：在BootStrap中，是把整个大的容器 container划分为12等份，container宽度不同，那么每一列的宽度也会不同，页面的内容也会随着宽度的变化而发生缩放的效果
4.2 栅格选项参数
4.3 栅格系统的基本使用
基本使用（一）
栗子：
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
我们发现，这些 div 并没有平均分成 4 等份，想要实现列的平均划分，需要添加类前缀
我们当前是在大屏幕下，所以类前缀是 .col-lg
4个盒子平均占满12等份，每个盒子占3份
- 如果子元素的 份数相加等于12，那么子元素就能占满整个 container 的宽度
栗子：
<style>
[class^=col]{
border: 2px solid pink;
}
</style>
<div class="container">
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
栗子2：
<div class="container">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
</div>
- 如果孩子的份数相加 小于12，那么就占不满整个宽度
<div class="container">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-1">4</div>
</div>
3. 如果孩子的份数相加 大于12 ，多余的那一列会另起一行来显示
<div class="container">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-3">4</div>
</div>
基本使用（二）
栗子1： 在中等屏幕下，让孩子各占 4份
<div class="container">
<div class="col-lg-3 col-md-4">1</div>
<div class="col-lg-3 col-md-4">2</div>
<div class="col-lg-3 col-md-4">3</div>
<div class="col-lg-3 col-md-4">4</div>
</div>
栗子2： 在小屏幕下，让孩子占6份
<div class="container">
<div class="col-lg-3 col-md-4 col-sm-6">1</div>
<div class="col-lg-3 col-md-4 col-sm-6">2</div>
<div class="col-lg-3 col-md-4 col-sm-6">3</div>
<div class="col-lg-3 col-md-4 col-sm-6">4</div>
</div>
栗子3：在超小屏幕下，每个孩子占 12 份
<div class="container">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
</div>
4.4 栅格系统的列嵌套
栗子：
<style>
.container>div{
height: 50px;
background-color: pink;
}
.row>div {
height: 50px;
background-color: pink;
/* margin: 0 10px; */
}
</style>
<body>
<div class="container">
<div class="col-md-4">
<div class="row">
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
</div>
</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</body>
4.5 栅格系统的列偏移
栗子1： 两个盒子贴边
<style>
.container div {
height: 50px;
background-color: pink;
}
</style>
<body>
<div class="container">
<div class="col-md-3">左侧</div>
<!-- 偏移的份数 就是 12 - 两个盒子的份数 = 6 -->
<div class="col-md-3 col-md-offset-6">右侧</div>
</div>
</body>
栗子2： 盒子水平居中
<div class="container">
<!-- 如果只有一个盒子 那么就偏移 = (12 - 6) /2 = 6 -->
<div class="col-md-6 col-md-offset-3">中间</div>
</div>
4.6 栅格系统列排序
栗子： 左侧右侧交换
没有排序之前：
<div class="container">
<div class="col-md-4">左侧</div>
<div class="col-md-8">右侧</div>
</div>
排序之后：
<div class="container">
<div class="col-md-4 col-md-push-8">左侧111</div>
<div class="col-md-8 col-md-pull-4">右侧222</div>
</div>
4.7 响应式工具
栗子：隐藏
<style>
.row div {
height: 300px;
background-color: purple;
color: red;
font-size: 20px;
}
.row div:nth-child(3) {
background-color: pink;
color: red;
font-size: 20px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-xs-3">1</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3 hidden-md">我可是会隐藏的哦！！！</div>
<div class="col-xs-3">4</div>
</div>
</div>
</body>
只在中等屏幕下隐藏，其他屏幕下不会隐藏
栗子：显示
<body>
<div class="container">
<div class="row">
<div class="col-xs-3">
<span class="visible-lg">我会显示哦</span>
</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">4</div>
</div>
</div>
</body>
span的文字只有在大屏才显示，其他屏幕下不显示
