标签：md color Bootstrap 系统 栅格 background col row
目录
栅格系统
- 系统会自动把页面分为12列
- 栅格系统会通过一系列的行 (row) 与 列 (column) 来创建页面布局.
- 实现列的平均划分, 需要给列添加 类前缀
- 列大于 12 , 多余的列会另起一行显示
列嵌套
列嵌套就是一个列内再分成若干份小列, 我们可以通过添加一个新的.row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.row>div {
height: 50px;
background-color: blue;
}
div [class="col-md-6"] {
background-color: crimson;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移, 这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距 (margin).
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以改变列的顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
.row div {
background-color: crimson;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">左侧</div>
<div class="col-md-4 col-md-offset-4 col-md-pull-8">右侧</div>
</div>
</div>
</body>
</html>
响应式工具
与之相反的是 visible-xs … 是显示某个页面
标签：md,color,Bootstrap,系统,栅格,background,col,row 来源： https://blog.csdn.net/qq_33962481/article/details/111034386
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。