什么是bootstrap？
bootstrap是由css，js组成的一个轻量级的ui框架，css提供了一种布局方式,和组件样式，js提供了插件，而本文是通过快速的知识点学习，让同学能够学习到通过bootstrap布局，并且能够懂得css和js来自己写组件和布局。
我们将通过学习，使用原生css和bootstrap实现下面考题
要学习Bootstrap需要懂得以下知识
1.html
2.css
3.js
3.jquery
4.bootstrap
首先提出几个问题，为什么需要Bootstrap，它的比原生好在哪里？它的实现原理是什么？
要搞明白这几个问题，就要从最原始的布局方法开始讲起。
HTML
1.快速理解html
html本身是不具备功能的，就是一个为了让浏览器解析容器，容器中装着css，js，所以html标签具备什么功能，长什么样子，都是css和js决定的，浏览器对html都有自己css默认值，和一些自有或公有的属性用于内置的功能。
2.基础的html架构
有的标签是唯一的，他们在html只能够出现一次，有html，head, title, body
引入顺序：
1.css引入尽量要写在head中
2.css引入要将自己的css后引入
3.js引入尽量要写在html中的最后
4.js引入时依赖需要先引入
bootstrap文件下载：
下载后创建一个文件夹object
|++css
|--bootstrap.css
|++img
|++js
|--bootstrap.js
| index.html
https://v3.bootcss.com/css/
推荐v3版本的入门文档，
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ico是一个16*16的一个图片文件 -->
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
具体标签属性：
a
ul
img
form
input
table
table的写法有两种，
第一种是以列为开头
<table border="1" cellspacing="0">
<tr>
<th>身高</th>
<td>160cm</td>
<td>158cm</td>
</tr>
<tr>
<th>体重</th>
<td>50kg</td>
<td>55kg</td>
</tr>
</table>
另外一种是以行为开头
<tr>
<th>身高</th>
<th>体重</th>
</tr>
<tr>
<td>170cm</td>
<td>50kg</td>
</tr>
<tr>
<td>165cm</td>
<td>60kg</td>
</tr>
因此不同的浏览器对标签的解析是不同的，就会有浏览器兼容的问题
所以为了让布局很听话，我们将所有标签都会进行样式重置。
*{
margin: 0;
padding: 0;
border: 0;
}
css选择器的基本语法
1.css的引入方式：
行内，内联，外联
2.css的格式：
选择器{key:value}
常见选择器：
class，id，tag，后代选择器，子代选择器，分组选择器
对于同一个元素的选择器优先级：
行内样式：1000
id选择器：100
class选择器：10
tag选择器：1
.father table{
border-spacing: 0;
background:red;
}
html>body>table{
border-spacing: 0;
background:black;
}
但是选择器优先级并不是简单的相加，而是相同的优先级以最大的优先级选择器做对比，在两个相同的选择器中，又以后加载的优先级高于先加载的
注意：越精确优先级越高
<style>
.wrap p{
color: red;
}
div>p>span{
color:yellow;
}
</style>
<div class="wrap">
<p>
<span>测试</span>
</p>
</div>
盒模型：
盒模型决定了一个标签在排版上所占据的宽度，和高度
盒模型分为内部结构和外部结构：
内部结构会改变自身的宽高，
而外部结构控制的是与兄弟元素相关的属性
内部结构有：border，padding，content
外部结构有：margin，position
content：又分为width和hight
带领大家将这几个css属性看一遍，以及如何设置
而默认整个元素的宽高是由border+padding+content计算而来
而有没有办法让border和padding计算入content中呢？
box-sizing：border-box；//bootstrap已经默认设置了全部元素
border：
border：1px solid #000;
margin的坑
1.margin穿透我们有一个正常嵌套，一个block中嵌套一个inline-block
2.给inline-block一个margin-top，会传递给父级
<div style="backgound:red;height:50px;">
<div style="margin-top:100px;"></div>
</div>
解决办法：
1.给父级添加border
2.给父级添加overflow：hidden
3.用padding取代margin
4.将内部块变为内联块
margin上下折叠
<div style="background:red;height:50px;margin-bottom:100px;"></div>
<div style="background:yellow;height:50px;margin-top:100px;"></div>
解决办法：
1.将div变为内联块
2.将margin减少
浏览器文档流：
1.所有标签 排版默认都是从上到下，从左到右
2.并且后一个标签只会出现在上一个标签之后，
3.如果上一行放不下就会另起一行
小作业：一个总宽高20px正方体，padding:4px，带有border:1px的一个div元素
position
position是一种使元素脱离文档流的属性
都具有top，bottom，left，right四个方向的值，和z-index
默认值：position：static；
position：relative；相对于当前位置
position：absolute；相对于往上层的最先找到的具有relative的元素
position：fixed；相对于窗口
常见的display
display是html中必有的css元素，display决定html的默认排版方式，以及受一些属性的影响方式，和盒模型的计算方式
常见的display有：block，inline-block，inline，none
分为块，内联块, 内联
block:是一个块元素，具有宽高，独占一行，
inline-block：是一个内联块元素，具有宽高，但是不独占一行，margin，padding正常起作用
inline：是一个内联元素，没有宽高，宽高由内容决定,margin只有左右起作用，padding不占据宽高
常见的块元素：
div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre
常见的内联块元素：
img、lable、input、abbr（缩写）、em（强调）、big、cite（引用）textarea、select、button
常见的内联元素：
span,a,i
嵌套的规则：
内联元素不嵌套块元素
5.布局开始
根据使用的css属性，分为普通流布局，浮动布局，定位布局，flex布局
首先我们用刚刚学的display和盒模型进行普通流布局
使用的属性有：width，height，display, font-size, background，vertical-align,
<style>
*{
margin:0;
/* font-size: 0; */
}
.wrap{
width: 500px;
height: 500px;
margin:auto;
}
.header{
width: 500px;
height: 100px;
background:pink;
}
.aside{
display: inline-block;
width: 100px;
height: 400px;
background:red;
vertical-align: middle;
}
.content{
display: inline-block;
width: 400px;
height: 400px;
background:yellow;
vertical-align: middle;
}
.main{
height: 300px;
background:green;
}
.footer{
height: 100px;
background:fuchsia;
}
</style>
<div class="wrap">
<div class="header">header</div>
<div class="aside">aside</div><div class="content">
<div class="main">main</div>
<div class="footer">footer</div>
</div>
</div>
普通流布局的坑：
使用display：inline-block；会受到折行或者空行的影响，
解决办法：
1.font-size：0；
2.或者去掉空格；
float浮动
float多用于文字环绕效果，后来被广泛应用到了排版中，半脱离文档流，不占据宽高，但是会阻挡元素。
需要注意：两个元素同时使用float，后一个使用float的，会在前面；
需要注意：使用float后，块元素自身会变为内联块元素；
float的坑
1.当使用float后元素的父级会塌陷。
解决办法：
添加第三个元素，使用清除浮动
div{
clear:both;
}
或者给父级加上
.clearfix::after{
content:"";
height:1px;
line-height:0;
display:block;
visibility:hidden;
clear:both;
}
或给父级加上：overflow:auto | hidden
又或者给父级加上：float属性
行内元素的设置
设置文字：
color,font-size,font-weight,font-famliy
设置文字的排版：
text-align,line-height
设置段落：
words-spacing,word-break,word-wrap
注意：行内元素具有遗传性，会影响内部嵌套的所有元素
常用设置
背景设置：
background，background-image，background-repeat，background-size, background-clip,background-position
background-image: url('./img/image.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
background-clip: content-box;
background-position: 10px 10px;
用处：雪碧图,动画
.test{
margin:auto;
width:58px; height:100px; background-image:url('./img/bird.jpeg'); background-repeat:no-repeat; background-position:-32px -190px; background-size:400px;
-webkit-animation:test_anim 2.2s steps(4) both;
animation:test_anim 2.2s steps(4) both ;
animation-iteration-count:infinite;
}
@-webkit-keyframes test_anim{
0%{ background-position:-32px -190px;}
100%{ background-position:-308px -190px;}
}
@keyframes test_anim{
0%{ background-position:-32px -190px;}
100%{ background-position:-308px -190px;}
}
边框设置：
border，border-radius，box-shadow
透明度设置：
opacity，rgba
元素居中的常用方法：
块元素的居中方法：
.father {
width: 100px;
height: 100px;
background: red;
position: relative;
}
.son {
width: 50px;
height: 50px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: yellow;
}
使行内元素居中的方法：
.father{
width:100px;
height:100px;
background:red;
text-align:center;
line-height:100px;
}
.son{
display:inline-block;
background:yellow;
}
高级选择器
：hover
随堂测试：
1.利用hover做：会变色的a标签
.title{
color:#000;
text-decoration: none;
}
.title:hover{
color:red;
}
<a class="title" href="#">链接</a>
2.使用ul与li写一个nav常见的特效
background：red；fuchsia；
<style>
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:100px;
text-decoration:none;
color:white;
background-color:purple;
padding:4px 12px;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
随堂测试
图片
http://www.w3school.com.cn/i/tulip_peach_blossom_w_s.jpg
文字
This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.
---------------------------------------以上是原生css布局------------------------------------------
bootstrap布局
又称为栅格布局或网格系统（grid system）：
整个布局被区分为：
行（row）列（col）
一行具有12列
v3版本中规定：col必须要放置在row中，row必须要放置在容器中
容器：分为container和container-fluid
container:使容器两边有具有margin和padding
container-fluid:使容器宽度具有100%
简单使用默认设置：
<style>
.test{
height: 100px;
background:coral;
}
.test1{
height: 200px;
background:red;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 test"></div>
<div class="col-lg-6 test1"></div>
</div>
</div>
可以理解为元素默认是独占一行的，当触发设置的屏幕宽度，将会把执行所设置的宽度进行水平排列
偏移
当触发设置的屏幕大小时，执行偏移
<style>
.test{
height: 100px;
background:coral;
}
.test1{
height: 100px;
background:red;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-lg-1 test"></div>
<div class="col-lg-1 test1 col-md-offset-1"></div>
</div>
</div>
作业：
bootstrap v3的布局
栅格布局
在原生布局当中，大家体会到了原生css的布局繁琐，并且自适应效果并不理想，不能够满足现在日益复杂的自适应要求，由此bootstrap提供了一种新的布局方式：栅格布局。
我们通常布局都是需要多个元素在同一排，使用display：inline-block；会受到空格影响，由此诞生了float布局，然而使用float布局会遇到float的一些坑和问题，不注意仍然会以隐形的方式破坏布局，并且不利于页面维护。
而bootstrap提供的布局方式，具有简单易用，维护方便的特点，在前后端不分离的项目中被极大的推崇。
栅格布局的下载：
https://v3.bootcss.com/
选择最左边的下载选项
当下载后滑到页面的下面部分，可以发现有很多已经排好版的实例，需要单独下载
栅格布局的原理：
@media (min-width: 768px) and (max-width: 1000px){
.test-xs-6{
background:pink;
width: 600px;
height: 600px;
}
}
@media(min-width:100px) and (max-width:768px){
.test-ss-1{
background:orangered;
width: 100px;
height: 100px;
}
}
<div class="test-xs-6 test-ss-1">
</div>
栅格布局的理念：
将页面排版分为行（row）和列（col）的概念，并且使用class进行设置，使用方便，并且基于此排版，还提供了：push，pull，offset等用法。
要点：页面必须采取 容器 > row > column 的形式
名词解释
容器：有.container（固定宽度）和 .container-fluid （100% 宽度）两种。
行（row）：使用 .row 来定义一个行
列（column）：使用 .col 来定义一列,列的类名组成为：col-设备宽度-宽度
槽（gutter）：每一列的左右内边距
偏移（offsets）：是以列宽计算的margin-left，用法：col-md-offset-*
<div class="container-fluid">
<div class="row">
<div class="col-md-1">.col-md-1</div>
</div>
</div>
