容器
流体容器
流体容器是自适应的，效果相当于width为auto
但，注意：width为auto和width为100%是不一样的
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<style type="text/css">
.container-fluid{
background: pink;
}
</style>
</head>
<body>
<div class="container-fluid">
test
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
效果图：
固定容器
| 阈值 | width |
|---|---|
| 大于等于1200px (lg:大屏pc) | 1170px（1140px+槽宽） |
| 大于等于992px (md:中屏pc) 小于1200px | 970px（940px+槽宽） |
| 大于等于768px (sm:平板) 小于992px | 750px（720px+槽宽） |
| 小于768px (xs：移动手机) | auto(流体布局、流体容器) |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<style type="text/css">
.container{
background: pink;
}
</style>
</head>
<body>
<div class="container">
test
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
效果图：
栅格系统
一行默认会一行分成12份
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<style type="text/css">
.container{
background: pink;
}
div[class|=col]{
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-10">col-lg-10</div>
<div class="col-lg-2">col-lg-2</div>
</div>
<div class="row">
<div class="col-lg-6">col-lg-6</div>
<div class="col-lg-6">col-lg-6</div>
</div>
<div class="row">
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-8">col-lg-8</div>
</div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
效果图：
栅格组合
<div class="container">
<div class="row">
<div class="col-lg-10 col-md-6">col-lg-10</div>
<div class="col-lg-2 col-md-6">col-lg-2</div>
</div>
</div>
自定义栅格系统
①自己写一个less文件
damu.less
@import "grid.less";
@import "variables.less";
@import "mixin/clearfix.less";
@import "mixin/grid.less";
@import "mixin/grid-framework.less";
②将variables.less中的col-都改为damu-col
③编译less文件
注意：clearfix不能有括号，否则不能继承
栅格源码分析
- 流体容器&固定容器的公共样式
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
清除浮动
- 固定容器特定样式
顺序不可变
@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;
}
- 行
margin-left: -15px;
margin-right: -15px;
清除浮动
.make-grid-columns();
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
...
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
bootstrap里面，移动优先
.make-grid(xs);
.float-grid-columns(@class);
.loop-grid-columns(@grid-columns, @class, width);
//列排序
.loop-grid-columns(@grid-columns, @class, pull);
.loop-grid-columns(@grid-columns, @class, push);
//列偏移
.loop-grid-columns(@grid-columns, @class, offset);
而.float-grid-columns(@class);
.col-xs-1,.col-xs-2,...,.col-xs-12{
float；left;
}
.loop-grid-columns(@grid-columns, @class, width);
.col-xs-12{
width:12/12;
}
.col-xs-11{
width:11/12;
}
...
.col-xs-1{
width:1/12;
}
//列排序
.loop-grid-columns(@grid-columns, @class, pull);
.col-xs-pull-12{
right:12/12;
}
.col-xs-pull-11{
right:11/12;
}
...
.col-xs-pull-1{
right:1/12;
}
.col-xs-pull-0{
right:auto;
}
.loop-grid-columns(@grid-columns, @class, push);
.col-xs-push-12{
left:12/12;
}
.col-xs-push-11{
left:11/12;
}
...
.col-xs-push-1{
left:1/12;
}
.col-xs-push-0{
left:auto;
}
//列偏移
.loop-grid-columns(@grid-columns, @class, offset);
.col-xs-offset-12{
margin-left:12/12;
}
.col-xs-offset-11{
margin-left:11/12;
}
...
.col-xs-offset-1{
margin-left:1/12;
}
.col-xs-offset-0{
margin-left:0;
}
例子：列偏移的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<style type="text/css">
.row{
background: pink;
}
div[class|=col]{
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!--
居中：使用列偏移
-->
<div class="col-lg-4 col-lg-offset-4">col-lg-4</div>
</div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
效果图：
若未写col-lg-offset-4,则效果图为
响应式工具
visible-xs:在小于等于768px的时候,显示
hidden-xs:在小于等于768px的时候，隐藏
<body>
<div class="container">
<div class="row">
<div class="jumbotron hidden-xs">
<h1>Hello, world!</h1>
</div>
</div>
</div>
</body>
栅格盒模型设计的精妙之处
- 容器两边具有15px的padding
- 行两边具有-15px的margin
- 列两边具有15px的padding
-
为了维护槽宽的规则，列两边必须得要15px的padding
-
为了能使列嵌套行，行两边必须得要-15px的margin
-
为了让容器可以包裹住行，容器两边必须得要15px的padding
栅格实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<style type="text/css">
a{
display: block;
text-align: center;
color: gray;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="jumbotron">
<h1>Hello, world!</h1>
</div>
<div class="col-lg-3 col-lg-push-9 col-md-4 col-md-push-8 col-sm-6 col-sm-push-6">
<div class="thumbnail">
<img src="img/webpack.png" alt="...">
<div class="caption">
<h3>Bootstrap 编码规范 </h3>
<a href="javascript">by @mdo</a>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-lg-push-3 col-md-4 col-md-pull-0 col-sm-6 col-sm-pull-6 ">
<div class="thumbnail">
<img src="img/react.png" alt="...">
<div class="caption">
<h3>Bootstrap 编码规范 </h3>
<a href="javascript">by @mdo</a>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-lg-pull-3 col-md-4 col-md-pull-8 col-sm-6 ">
<div class="thumbnail">
<img src="img/yarn.png" alt="...">
<div class="caption">
<h3>Bootstrap 编码规范 </h3>
<a href="javascript">by @mdo</a>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-lg-pull-9 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="img/bootstrap.png" alt="...">
<div class="caption">
<h3>Bootstrap 编码规范 </h3>
<a href="javascript">by @mdo</a>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
效果：
随着宽度的减小，它是从前面开始掉下去的
初始图：
随着宽度的减小
随着宽度的减小
bootstrap定制化
@import "../less/bootstrap.less";
@grid-gutter-width:200px;
//将槽宽改为200px
bootstrap实例
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<title>1208</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<style type="text/css">
img{
width: 100%;
}
.damu-thumbnail img{
width: auto;
}
.damu-threeC{
margin-top: 50px;
}
.damu-hr{
margin:50px auto ;
}
.damu-hr > hr{
border: 1px solid yellow;
}
.damu-carousel{
margin-top: 50px;
}
.damu-carousel,.damu-carousel .item{
height: 500px;
overflow: hidden;
}
.carousel-caption{
bottom: 5%;
}
@media only screen and (max-width:768px ) {
.damu-carousel,.damu-carousel .item{
height: 200px;
}
}
</style>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--导航-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">现代浏览器博物馆</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">综述 <span class="sr-only">(current)</span></a></li>
<li><a href="#">简述</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">特点 <span class="caret"></span></a>
<ul class="dropdown-menu" id="damu-nav">
<li><a href="#Chrome">Chrome</a></li>
<li><a href="#firefox">Firefox</a></li>
<li><a href="#Safari">Safari</a></li>
<li><a href="#opera">Opera</a></li>
<li><a href="#ie">IE</a></li>
</ul>
</li>
<li><a href="javascript:;" data-toggle="modal" data-target="#myModal">关于</a></li>
</ul>
</div>
</div>
</nav>
<!--轮播图-->
<div id="carousel-example-generic" class="carousel slide damu-carousel" data-ride="carousel" data-interval="1000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-tar get="#carousel-example-generic" data-slide-to="2"></li>
<li data-tar get="#carousel-example-generic" data-slide-to="3"></li>
<li data-tar get="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/chrome-big.jpg" >
<div class="carousel-caption">
<h2>chrome</h2>
</div>
</div>
<div class="item">
<img src="images/firefox-big.jpg">
<div class="carousel-caption">
<h2>firefox</h2>
</div>
</div>
<div class="item">
<img src="images/safari-big.jpg">
<div class="carousel-caption">
<h2>safari</h2>
</div>
</div>
<div class="item">
<img src="images/opera-big.jpg">
<div class="carousel-caption">
<h2>opera</h2>
</div>
</div>
<div class="item">
<img src="images/ie-big.jpg">
<div class="carousel-caption">
<h2>ie</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--三列布局-->
<div class="container damu-threeC">
<div class="row">
<div class="col-md-4 damu-thumbnail text-center">
<img src="images/chrome-logo-small.jpg">
<div class="caption">
<h3>chrome</h3>
<p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
<p><a href="#" class="btn btn-default" role="button">点我下载</a></p>
</div>
</div>
<div class="col-md-4 damu-thumbnail text-center">
<img src="images/firefox-logo-small.jpg">
<div class="caption">
<h3>firefox</h3>
<p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>
<p><a href="#" class="btn btn-default" role="button">点我下载</a></p>
</div>
</div>
<div class="col-md-4 damu-thumbnail text-center">
<img src="images/safari-logo-small.jpg">
<div class="caption">
<h3>safari</h3>
<p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
<p><a href="#" class="btn btn-default" role="button">点我下载</a></p>
</div>
</div>
</div>
</div>
<!--线-->
<div class="container damu-hr">
<hr />
</div>
<!--标签页-->
<div class="container" id="damu-tab">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="damu-list">
<li role="presentation" class="active"><a href="#Chrome" aria-controls="Chrome" role="tab" data-toggle="tab">Chrome</a></li>
<li role="presentation"><a href="#firefox" aria-controls="firefox" role="tab" data-toggle="tab">firefox</a></li>
<li role="presentation"><a href="#Safari" aria-controls="Safari" role="tab" data-toggle="tab">Safari</a></li>
<li role="presentation"><a href="#opera" aria-controls="opera" role="tab" data-toggle="tab">Opera</a></li>
<li role="presentation"><a href="#ie" aria-controls="ie" role="tab" data-toggle="tab">ie</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="Chrome">
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<h3>IE 你懂的</h3>
Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
</div>
<div class="col-md-5">
<img src="images/chrome-logo.jpg"/>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="firefox">
<div class="container-fluid">
<div class="row">
<div class="col-md-5">
<img src="images/firefox-logo.jpg"/>
</div>
<div class="col-md-7">
<h3>IE 你懂的</h3>
Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="Safari">
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<h3>IE 你懂的</h3>
Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
</div>
<div class="col-md-5">
<img src="images/safari-logo.jpg"/>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="opera">
<div class="container-fluid">
<div class="row">
<div class="col-md-5">
<img src="images/opera-logo.jpg"/>
</div>
<div class="col-md-7">
<h3>IE 你懂的</h3>
Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="ie">
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<h3>IE 你懂的</h3>
Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
</div>
<div class="col-md-5">
<img src="images/ie-logo.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
<!--版权-->
<div class="container">
©喜羊羊
</div>
<!--模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">模态框</h4>
</div>
<div class="modal-body">
<p>我是一个模态框</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="js/jquery.min.js" ></script>
<script src="js/bootstrap.min.js" ></script>
</body>
<script type="text/javascript">
$(function(){
$("#damu-nav li a").click(function(e){
var href = $(this).attr("href");
$(document).scrollTop($("#damu-tab").offset().top-100);
$("#damu-list li a[href="+href+"]").tab("show");
e.preventDefault();
})
})
</script>
</html>
效果图：
5114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
