BootStrap入门响应式栅栏

最新推荐文章于 2024-05-08 16:31:38 发布

llayjun

最新推荐文章于 2024-05-08 16:31:38 发布

阅读量765

点赞数

分类专栏：前端学习文章标签： bootstrap 响应式

本文链接：https://blog.csdn.net/llayjun/article/details/78868085

版权

前端学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

介绍：
1. 注意:
bootstrap将每一行分成12份
媒体查询:

假如大屏幕,每行显示6个
    超大电脑,屏幕分辨率>1200     使用: col-lg-2

假如屏幕小点,每行显示4个
    992<屏幕分辨率<1200          使用: col-md-3

再小点,每行显示2个
    768<屏幕分辨率<992           使用: col-sm-6

继续小,每行显示1个  
    屏幕分辨率<768               使用:col-xs-12

2. 代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <!--增加移动端的条件 viewport-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>哈哈</title>

        <!--导入bootstrap的css-->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <!--导入jquery.js-->
        <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
        <!--导入bootstrap.js-->
        <script type="text/javascript" src="js/bootstrap.min.js"></script>

    </head>

    <body>

        <div class="container-fluid">
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
            <div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>
        </div>

    </body>

</html>