bootstrap

最新推荐文章于 2022-04-26 20:16:55 发布

waiting 5h

最新推荐文章于 2022-04-26 20:16:55 发布

阅读量154

点赞数 1

本文链接：https://blog.csdn.net/weixin_43717987/article/details/96902097

版权

Bootstrap是一个易用、优雅、灵活、可扩展的前端工具包，里面包含了丰富的Web组件，包括布局、栅格、表格、表单、导航、按钮、进度条、媒体对象等，基于这些组件，可以快速搭建一个漂亮、功能完备的网站。由于Firefox、Chrome、Safari等主流浏览器对W3C标准有着较好的支持，因此，Bootstrap在网页夸浏览器兼容方面也有相当不错的表现。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/bootstrap.min.css"/>
    <style>
        .tb_row>div{
            border: 1px solid red;
            height: 100px;
        }
    </style>
</head>
<body>
<!--container固定布局；container-fluid:流动布局-->
<div class="container">
    <div class="row tb_row">
        <div class="col-lg col-sm  col-md col-xl">1</div>
        <div class="col-md col-lg col-sm col-xl">2</div>
        <div class="col-lg col-md col-sm col-xl">3</div>
        <div class="col-md col-lg col-sm col-xl">4</div>
        <div class="col-md col-sm col-lg col-xl">5</div>
        <div class="col-lg col-md col-sm col-xl">6</div>
        <div class="col-lg col-md col-sm col-xl">7</div>
        <div class="col-lg col-md col-sm col-xl">8</div>
        <div class="col-md col-lg col-sm col-xl">9</div>
        <div class="col-lg col-md col-sm col-xl">10</div>
        <div class="col-lg col-md col-sm col-xl">11</div>
        <div class="col-lg col-md col-sm col-xl">12</div>
        <!--<div class="col-lg col-md col-sm col-xl">13</div>--><!--超过12个会折行-->
    </div>
    <div class="row tb_row">
        <div class="col-sm-1 col-lg-2 col-md-3 col-xl-1">a</div>
        <div  class="col-sm-4 col-lg-4 col-md-1 col-xl-1">s</div>
        <div  class="col-sm-6 col-lg-3 col-md-1 col-xl-1">d</div>
       <!-- 屏幕分辨率不同时的比例调整-->
    </div>
    <div class="row tb_row">
        <div class="col-sm-auto">z111111111111111</div>
        <div class="col-sm-2">x</div>
        <div class="col-sm-3">c</div>
        <!--col-..-auto按内容自动分配-->
    </div>
    <div class="row tb_row">
        <div class="col-md-4 offset-2"></div>
        <div class="col-md-6"></div>
        <div class="col-md-2"></div>
        <!--设置margin-left 8.333%-->
    </div>
    <div class="row tb_row">
        <div class="col-md-2 offset-lg-3"></div>
        <div class="col-md-5"></div>
        <div class="col-md-1"></div>
       <!-- 设置不同屏幕的margin-left-->
    </div>
    <div class="row tb_row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
       <!-- 均等分配-->
    </div>
    <div class="row tb_row">
        <div class=" pt-1 col"></div><!--margin-top设为4px，0.25em-->
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
    <div class="row tb_row">
        <div class=" py-1 col"></div><!--margin-top和margin-bottom设为4px，0.25em-->
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
    <div class="row tb_row">
        <div class=" w-75 col"></div><!--w-75为75% w-100为100% -->
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
    <div class="row tb_row">
        <div class=" h-120 col"></div><!-- h-100为100% 120就会撑开-->
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
    <div class="row align-content-center" style="height: 300px;border: 1px solid red">
        <div class="col-lg-1" style="height: 60px;border: 1px solid black"></div>
        <div class="w-100"></div><!--折行-->
        <div class="col-lg-1" style="height: 60px;border: 1px solid black"></div>
        <div class="w-100"></div>
        <div class="col-lg-1" style="height: 60px;border: 1px solid black"></div>
       <!-- align-content-center考虑多行，y轴居中-->
       <!-- align-items-center  相对父容器垂直居中
        align-items-start 相对父容器顶部对齐
        align-items-end  相对父容器底部对齐-->
    </div>
    <div class="row " style="height: 300px;border: 1px solid red">
        <div class="col-lg-1 align-self-center" style="height: 60px;border: 1px solid black"></div>
        <div class="col-lg-1 align-self-end" style="height: 60px;border: 1px solid black"></div>
        <div class="col-lg-1 " style="height: 60px;border: 1px solid black"></div>
        <!-- align-self-center y轴居中 align-self-end y轴末端 align-self-start y轴顶部-->
       <!-- align-self-center  自身在flexbox中的y轴分布-->
    </div>
    <div class="row align-items-center " style="height: 300px;border: 1px solid red">
        <div class="col-lg-1 " style="height: 60px;border: 1px solid black"></div>
        <div class="col-lg-1 " style="height: 60px;border: 1px solid black"></div>
        <div class="col-lg-1 " style="height: 60px;border: 1px solid black"></div>
        <!-- align-items-center  相对父容器垂直居中-->
    </div>
    <div class="row justify-content-center" style="height: 300px;border: 1px solid red">
        <div class="col-lg-1 " style="height: 60px;border: 1px solid black"></div>
        <div class="col-lg-1 " style="height: 60px;border: 1px solid black"></div>
        <div class="col-lg-1 " style="height: 60px;border: 1px solid black"></div>
        <!-- justify-content-center 子元素水平居中-->
    </div>



</div>

</body>
</html>