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">-->
<!--        &lt;!&ndash; 列元素是指class属性值含:col-lg-*,col-md-*,col-sm-*,col-xs-*,&ndash;&gt;-->
<!--        <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之栅格化的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap栅格化系统设计原理

关于bootstrap3的栅格化布局

bootstrap怎么给栅格上色

Bootstrap系列之栅格系统

bootstrap框架基础知识点整理

学习 Bootstrap 5 之 Grid