<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<style type="text/css">
.container-fluid{
background-color: pink;
}
</style>
<body>
<div class="container">
<h1>sit</h1>
<h1>sit</h1>
<!--small副标题
p标签 被设置为等高为二分之一行高
lead 突出显示
mark 有背景效果
容器
1.流体容器
2.固定容器
@media (min-width:768px){.container{width:750px}}
@media (min-width:992px){.container{width:970px}}
@media (min-width:1200px){.container{width:1170px}}
.container-fluid{padding-right:15px;padding-left:15px;``````
有上面的源码可以看出
阈值 width
1.大于1200px(lg 大屏PC) 1170px（1130px+槽宽）
2.大于等于992px(md 中屏PC)小于1200px 970px（940px+槽宽）
3.大于等于768px(sm 平板)小于992px 750px（720px+槽宽 所以值可能变）
4.小于768px(xs 移动手机) auto
栅格源码分析
1.流体容器&固定容器 公共样式
margin-right:auto;
margin-left:auto;
padding-left:15px;
padding-right:15px;
2.固定容器 特定样式
顺序不能变
@media(min-width:@screen-sm-min){
width:@container-sm;
}
@media(min-width:@screen-md-min){
width:@container-md;
}
@media(min-width:@screen-lg-min){
width:@container-lg;
}
如果宽度是1300px，那么 @media(min-width:@screen-sm-min){
width:@container-sm;
}
@media(min-width:@screen-md-min){
width:@container-md;
}被读到过，但是被覆盖了
如果宽度700px，则上面三个样式都不能读到，样式直接是auto
-->
<h4>sit<small>sit</small></h4>
<p>hello</p>
<p class="lead mark">hello</p>
<del>123</del>
<p class="text-left text-lowercase">bootStrap</p>
<p class="text-right text-uppercase">bootStrap</p>
<p class="text-center text-capitalize">bootStrap</p>
<div class="container-fluid">test</div>
</div>
</body>
</html>
