响应式设计
响应式设计可以使网页适应于不同的设备,如智能手机 、平板电脑、TV、PC显示器、iPhone和Android手机,包括横向、纵向的屏幕。——《Bootstrap实战》
实现原理
- 同比例缩放元素尺寸(不使用绝对宽度的元素、网页字体也不使用绝对大小)
- 调整页面结构布局(通过Media Query来获取屏幕大小以获取适合的显示方式)
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
/* for 700px or less */
@media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
/* for 480px or less */
@media screen and (max-width: 480px) {
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
栅格系统
初识
- row 比包含在.container中
- 只有 col可以作为row的直接子元素,网页内容应当放在col中
Bootstrap设备优先化栅格
Bootstrap3.0遵循设备优先的原则来确定当前结构的布局效果,因此我们可以在相同的结构中设置不同的设备类型,以实现在不同设备在呈现不同的布局效果。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.row > div {
background-color: #eee;
height: 100px;
border: solid 1px red;
}
</style>
</head>
<body>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
<div class="visible-xs">col-xs-12</div>
<div class="visible-sm">col-sm-6</div>
<div class="visible-md">col-md-4</div>
<div class="visible-lg">col-lg-2</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
<div class="visible-xs">col-xs-12</div>
<div class="visible-sm">col-sm-6</div>
<div class="visible-md">col-md-4</div>
<div class="visible-lg">col-lg-2</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
<div class="visible-xs">col-xs-12</div>
<div class="visible-sm">col-sm-6</div>
<div class="visible-md">col-md-4</div>
<div class="visible-lg">col-lg-2</div>
</div>
</div>
</body>
</html>
固定栅格和流式栅格
固定栅格 container 声明宽度
流式栅格 container-fluid 不声明宽度,填满屏幕
列偏移
通过类名 col-md-offset-n来说明向右偏移n个列