【03】Bootstrap — 栅格系统

最新推荐文章于 2022-11-03 21:54:34 发布

有心博客

最新推荐文章于 2022-11-03 21:54:34 发布

阅读量224

点赞数

文章标签： bootstrap 栅格系统

本文链接：https://blog.csdn.net/qq_32629809/article/details/77828823

版权

栅格系统一般是用于一系列的行(row)和列(column)的组合对页面进行布局，我们可以将内容放置到这些布局格子中完成页面效果。

栅格参数解释

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
.container最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <style>
            .c {
                border: 1px solid red;
            }
        </style>
    </head>

    <body style="padding: 20px;">
        <div class="container">
            <div class="row">
                <div class="col-md-1 c">.col-md-1</div>
                <div class="col-md-1 c">.col-md-1</div>
                <div class="col-md-1 c">.col-md-1</div>
                <div class="col-md-1 c">.col-md-1</div>
                <div class="col-md-1 c">.col-md-1</div>
                <div class="col-md-1 c">.col-md-1</div>
                <div class="col-md-1 c">.col-md-1</div>
                <div class="col-md-1 c">.col-md-1</div>
                <div class="col-md-1 c">.col-md-1</div>
                <div class="col-md-1 c">.col-md-1</div>
                <div class="col-md-1 c">.col-md-1</div>
                <div class="col-md-1 c">.col-md-1</div>
            </div>
            <div class="row">
                <div class="col-md-8 c">.col-md-8</div>
                <div class="col-md-4 c">.col-md-4</div>
            </div>
            手机、平板、桌面<br />
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-8 c">.col-xs-12 .col-sm-6 .col-md-8</div>
                <div class="col-xs-6 col-md-4 c">.col-xs-6 .col-md-4</div>
            </div>
            <div class="row">
                <div class="col-xs-6 col-sm-4 c">.col-xs-6 .col-sm-4</div>
                <div class="col-xs-6 col-sm-4 c">.col-xs-6 .col-sm-4</div>
                <div class="clearfix visible-xs-block c"></div>
                <div class="col-xs-6 col-sm-4 c">.col-xs-6 .col-sm-4</div>
            </div>
        </div>
    </body>
</html>