bootstrap之栅格化
Posted ximirensen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap之栅格化相关的知识，希望对你有一定的参考价值。
bootstrap之栅格化
栅格化布局基本原理：栅格化把页面在水平方向等分为一定数目（假设为n）的基本宽度列
然后开发人员可根据需要给页面里的相应元素设置它应占据m个列宽。（m<=n）
我的理解：栅格化就是把浏览器的一行分为12列，自己去分配列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>栅格化</title>
</head>
<body>
<!--css比较灵活，但是也是有缺陷的，那就是容易错位
栅格特性：设置了宽度，如果字太多，会换行，但是如果是数字就不会自动换行
-->
<link rel="stylesheet" href="../../bootstrap-3.4.1-dist/css/bootstrap.css">
<style>
.row{color: #dca7a7}
.aaa{background-color: yellow}
.bbb{background-color: blueviolet}
.ccc{background-color: orangered}
.ddd{background-color: deeppink}
</style>
<!-- 列元素是指class属性值含：col-lg-*，col-md-*，col-sm-*，col-xs-*，摆放界限不一样-->
<div class="container">
<div class="row">
<!-- 列元素是指class属性值含：col-lg-*，col-md-*，col-sm-*，col-xs-*，-->
<!--col-md低于992就会被竖着摆放，高于992才横着摆放-->
<div class="col-md-4 aaa">111111111</div>
<div class="col-md-3 bbb">左边的朋友，右边的朋友</div>
<div class="col-md-2 ccc">333333333</div>
<div class="col-md-3 ddd">444444444</div>
</div>
</div>
<div class="container">
<div class="row">
<!--col-lg低于1200就会被竖着摆放，高于1200才横着摆放-->
<div class="col-lg-4 aaa">111111111</div>
<div class="col-lg-3 bbb">左边的朋友，右边的朋友</div>
<div class="col-lg-2 ccc">333333333</div>
<div class="col-lg-3 ddd">444444444</div>
</div>
</div>
<div class="container">
<div class="row">
<!-- 列元素是指class属性值含：col-lg-*，col-md-*，col-sm-*，col-xs-*，-->
<!--col-xs不会堆叠摆放-->
<div class="col-xs-4 aaa">111111111</div>
<div class="col-xs-3 bbb">左边的朋友，右边的朋友</div>
<div class="col-xs-2 ccc">333333333</div>
<div class="col-xs-3 ddd">444444444</div>
</div>
</div>
<div class="container">
<div class="row">
<!-- 列元素是指class属性值含：col-lg-*，col-md-*，col-sm-*，col-xs-*，-->
<!--col-sm低于768就会被竖着摆放，高于768才横着摆放-->
<div class="col-sm-4 aaa">111111111</div>
<div class="col-sm-3 bbb">左边的朋友，右边的朋友</div>
<div class="col-sm-2 ccc">333333333</div>
<div class="col-sm-3 ddd">444444444</div>
</div>
</div>
<!--<div class="container">-->
<!-- <div class="row">-->
<!-- <!– 列元素是指class属性值含：col-lg-*，col-md-*，col-sm-*，col-xs-*，–>-->
<!-- <div class="col-md-4 aaa">111111111</div>-->
<!-- <div class="col-md-4 bbb">左边的朋友，右边的朋友，山上的朋友，左边的朋友，右边的朋友，山上的朋友，左边的朋友，右边的朋友，山上的朋友</div>-->
<!-- <div class="col-md-4 ccc">333333333</div>-->
<!-- <div class="col-md-4 ddd">444444444</div>-->
<!-- </div>-->
<!--</div>-->
</body>
</html>
以上是关于bootstrap之栅格化的主要内容，如果未能解决你的问题，请参考以下文章