Bootstrap 自定义网格类 Grid System

最新推荐文章于 2023-09-05 11:21:09 发布

不好～

最新推荐文章于 2023-09-05 11:21:09 发布

阅读量257

点赞数

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_45769992/article/details/107968593

版权

Bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Bootstrap 自定义网格类 Grid System

媒体查询

媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。

Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

我们有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

媒体查询有两个部分，先是一个设备规范，然后是一个大小规则。在上面的案例中，设置了下列的规则：

让我们来看下面这行代码：

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。

网格选项

设备	Class类
超小设备手机（<768px）	.col-xs-
小型设备平板电脑（≥768px）	.col-sm-
中型设备台式电脑（≥992px）	.col-md-
大型设备台式电脑（≥1200px)	.col-lg-

test

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- device-width 可以确保它能正确呈现在不同设备上。
    initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
    在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。
    通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
   <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 自定义网格类 Grid System
            行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
        class="col-xs-6 col-sm-4 col-md-2" 
        网格系统是通过指定您想要横跨的十二个可用的列来创建的。
        例如，要创建三个相等的列，则使用三个 .col-xs-4。
        不同的设备Class前缀不同 -->
    <div class="container">
        <!-- 一旦添加了容器，接下来您需要考虑以行为单位。添加 <div class="row">...</div>， -->
        <div class="rows">
            <div class="col-xs-6 col-sm-4 col-md-3" style="background-color: bisque; border: black solid 1px;">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
                    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
                    enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                    nisi ut aliquip ex ea commodo consequat.
                    </p>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3" style="background-color: bisque; border: black solid 1px;">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
                    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
                    enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                    nisi ut aliquip ex ea commodo consequat.
                    </p>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3" style="background-color: bisque; border: black solid 1px;">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
                    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
                    enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                    nisi ut aliquip ex ea commodo consequat.
                    </p>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-3" style="background-color: bisque; border: black solid 1px;">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
                    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
                    enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                    nisi ut aliquip ex ea commodo consequat.
                    </p>
            </div>
        </div>
        <!-- 确保总和总是 12  9+3=12-->
        <div class="rows">
            <div class="col-md-9" style="background-color: darkgray; border: black solid 1px;">
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                    accusantium doloremque laudantium.
                    </p>
            </div>
            <div class="col-md-3" style="background-color: darkgray; border: black solid 1px;">
                <p>quis nostrud exercitation 
                    </p>
            </div> 
        </div>
    </div>
</body>
</html>

参考了菜鸟教程