bootstrap之栅格化

2024-02-07 22:34:41

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之栅格化

相关文章