字进行页面开发,最头疼的问题在于:页面写完了,发现换个浏览器不支持了(显示风格瞬间改变).
如果要真想实现栅格,那么就必须有一个可以容纳第一个栅格的行,而多个栅格行最终就组成了一个页面.在整个bootstrap之中最多只能够存在有12个栅格
如果现在是一个宽容器的窗口,那么整个栅格都会按照宽屏幕的方式完整显示显示,而到了窄屏的页面,那么会自动改变现实的风格.
栅格布局的基础实现
如果要想实现栅格布局,主要是通过四个样式完成的:col-lg-*(大型设备),col-md-*(中型设备),col-sm-*(小型 设备),col-xs-*(极小型设备),不同的样式主要应用在不同的设备的屏幕宽度上.
但问题是,我们如何确定要使用的是何种栅格呢?bootstrap会自动检测
@media (min-width:768px) { ->最低为768像素的设备
.container {
width: 750px
}
}
@media (min-width:992px) { ->最低为992像素设备
.container {
width: 970px
}
}
@media (min-width:1200px) { ->最低为1200像素设备
.container {
width: 1170px
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!---->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>bootstrap</title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<!--//Bootstrap需要jquery的支持，所以一定要导入jquery开发包-->
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div class=".container"> <!--表示定义一个容器-->
<div class="row">
<div class="col-md-1">栅格1</div>
<div class="col-md-1">栅格2</div>
<div class="col-md-1">栅格3</div>
<div class="col-md-1">栅格4</div>
<div class="col-md-1">栅格5</div>
<div class="col-md-1">栅格6</div>
<div class="col-md-1">栅格7</div>
<div class="col-md-1">栅格8</div>
<div class="col-md-1">栅格9</div>
<div class="col-md-1">栅格10</div>
<div class="col-md-1">栅格11</div>
<div class="col-md-1">栅格12</div>
</div>
</div>
</body>
</html>
此时可以发现,栅格会根据屏幕宽度的改变,而自动的进行排版.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!---->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>bootstrap</title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<!--//Bootstrap需要jquery的支持，所以一定要导入jquery开发包-->
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div class=".container"> <!--表示定义一个容器-->
<div class="row">
<div class="col-md-1">栅格1</div>
<div class="col-md-1">栅格2</div>
<div class="col-md-1">栅格3</div>
<div class="col-md-1">栅格4</div>
<div class="col-md-1">栅格5</div>
<div class="col-md-1">栅格6</div>
<div class="col-md-1">栅格7</div>
<div class="col-md-1">栅格8</div>
<div class="col-md-1">栅格9</div>
<div class="col-md-1">栅格10</div>
<div class="col-md-1">栅格11</div>
<div class="col-md-1">栅格12</div>
</div>
<div class="row">
<div class="col-md-6">
栅格1
</div>
<div class="col-md-6">
栅格2
</div>
<div class="col-md-3">
栅格1
</div>
<div class="col-md-9">
栅格2
</div>
</div>
</div>
</body>
</html>
如果需要跨列就写多少个列.
范例:实现列偏移
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!---->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>bootstrap</title>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<!--//Bootstrap需要jquery的支持，所以一定要导入jquery开发包-->
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div class=".container"> <!--表示定义一个容器-->
<div class="row">
<div class="col-md-1">栅格1</div>
<div class="col-md-1">栅格2</div>
<div class="col-md-1">栅格3</div>
<div class="col-md-1">栅格4</div>
<div class="col-md-1">栅格5</div>
<div class="col-md-1">栅格6</div>
<div class="col-md-1">栅格7</div>
<div class="col-md-1">栅格8</div>
<div class="col-md-1">栅格9</div>
<div class="col-md-1">栅格10</div>
<div class="col-md-1">栅格11</div>
<div class="col-md-1">栅格12</div>
</div>
<div class="row">
<!--向左偏移3格-->
<div class="col-md-3 col-md-offset-3">
栅格1
</div>
<div class="col-md-6">
栅格2
</div>
</div>
<div class="row">
<!--向左偏移3格-->
<div class="col-md-3">栅格1</div>
<div class="col-md-3 col-md-offset-3">栅格2</div>
</div>
</div>
</body>
</html>
除了可以进行整体栅格操作(代码之中需要清楚的是栅格就相当于是一个表格),所以栅格依然是可以进行嵌套的
范例:栅格嵌套
<div class="col-md-9" style="background-color: #398439;">
<span style="background-color: red;">
使用9个栅格
</span>
<div class="row">
<div class="col-md-6">
内嵌栅格1
</div>
<div class="col-md-6">
内嵌栅格2
</div>
</div>
</div>col-md-push-* 推 col=md-pull=*拉
在实际的工作环境之中,经常会使用到这样的推拉效果进行布局
响应式栅格
栅格的最大特征是可以根据不同的设备进行显示.
可以定义多种样式
范例:实现响应式布局
<div class="row">
<div class="col-md-6 col-xs-3" style="background-color: red;">栅格1</div>
<div class="col-md-6 col-xs-3" style="background-color: gray;">栅格2</div>
</div>
<div class="row">
<div class="col-md-3 col-xs-2" style="background-color: red;">栅格1</div>
<div class="col-md-6 col-xs-2" style="background-color: gray;">栅格2</div>
</div>在栅格样式定义之中定义了多种栅格显示方式..
<div class=".container"> <!--表示定义一个容器-->
<div class="row">
<div class="col-md-3 col-xs-3" style="background-color: gray;">
<span class="hidden-xs">特别小的设备隐藏</span>
<span class="visible-xs">特别小的设备上可见</span>
</div>
</div>
<div class="row">
<div class="col-md-3 col-xs-3" style="background-color: red;">
<span class="hidden-md">中型设备上隐藏</span>
<span class="visible-md">中型设备上可见</span>
</div>
</div>
</div>针对于现实操作方式在Bootstrap3.2开始出现了一些变化
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block