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>
标签:111111111,朋友,bootstrap,栅格,--,444444444,color 来源: https://www.cnblogs.com/ximixs/p/14772271.html