您的位置：首页 > Web前端 > BootStrap

bootstrap之栅格系统

2016-03-08 12:12 736 查看 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>栅格系统</title>
<!-- 移动设备优先 -->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<style type="text/css">
.a{
height: 50px;
border: 1px solid #ccc;
background-color: #eee;
}

</style>
<body>
<!-- 布局容器 -->
<!--
固定宽度：container
100%宽度：container-fluid
-->

<div class="container a">
固定宽度
</div>
<div class="container-fluid a">
100%宽度
</div>

<hr>
<div class="container">
<p>创建响应行</p>
<!--
类前缀：    栅格系统行为：                                 container最大宽值：    最大列宽：     槽宽：
超小屏幕手机（<768px）           .col-xs-    总是水平排列                                   None(自动)            自动          30px
小屏幕平板（>=768px）            .col-sm-    开始是堆叠在一起的，当大于这些值时将变为水平排列    750px                ~62px         30px
中等屏幕桌面显示器（>=992px）     .col-md-    开始是堆叠在一起的，当大于这些值时将变为水平排列    970px                ~81px         30px
大屏幕大桌面显示器（>=1200px）    .col-lg-    开始是堆叠在一起的，当大于这些值时将变为水平排列    1170px                ~97px        30px
-->
<div class="row">
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
</div>
<div class="row">
<div class="col-md-9 a">9</div>
<div class="col-md-3 a">3</div>
</div>
<div class="row">
<div class="col-md-4 a">4</div>
<div class="col-md-4 a">4</div>
<div class="col-md-4 a">4</div>
</div>

<hr>
<p>
激活四种屏幕分类
</p>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
</div>

<hr>
<p>设置列偏移，保持空隙</p>
<!--
col-md-offset-1：设置列偏移，保持空隙
-->
<div class="row">
<div class="col-md-8 a">8</div>
<div class="col-md-3 col-md-offset-1 a">3</div>
</div>
<div class="row">
<div class="col-md-9 a" style="padding:0;">
<div class="col-md-4 a">
4
</div>
<div class="col-md-4 a">
4
</div>
<div class="col-md-4 a">
4
</div>
</div>
<div class="col-md-3 a">3</div>
</div>

<hr>
<p>交换两列的位置</p>
<!--
交换两个列的位置，push向左移动，pull向右移动
-->

<div class="row">
<div class="col-md-9 col-md-push-3 a">9</div>
<div class="col-md-3 col-md-pull-9 a">3</div>
</div>

</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航