Bootstrap栅格系统实例

时间：6年前阅读：4970

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份

　　栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，内容可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

复杂应用

　　在bootstrap中，.col-xs-应用于(<768px)的情况，.col-sm-应用于(≥768px and <992px)的情况，.col-md-应用于(≥992px and <1200px)的情况，.col-lg-应用于(≥1200px)的情况

　　而.col-xs-、.col-sm-、.col-md-、.col-lg-是可以用混合使用的

　　比如，要实现≥992px的时候分四列一排，(≥768px and <992px)的时候两列一排，(<768px)的时候一列一排

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<style>
.row div{border:1px solid black;}    
</style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
      <div class="col-md-3 col-sm-6">aaa</div>
      <div class="col-md-3 col-sm-6">bbb</div>
      <div class="col-md-3 col-sm-6">ccc</div>
      <div class="col-md-3 col-sm-6">ddd</div>
    </div>
</div>
</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

Bootstrap栅格系统实例

网友评论