bootstrap之col-xs-、col-sm- 、col-md-和.col-lg-

最新推荐文章于 2023-05-25 21:07:27 发布

Mars-xq

最新推荐文章于 2023-05-25 21:07:27 发布

阅读量2.8k

点赞数 1

分类专栏： bootstrap

本文链接：https://blog.csdn.net/sinat_31057219/article/details/86242987

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

webstrom新建bootstrap项目，

在这里插入图片描述

导入css和js 项目结构如下：
在这里插入图片描述

写入代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!--bootstrap js-->
    <script src="../js/bootstrap.bundle.js"></script>
    <script src="../js/bootstrap.js"></script>
    <!--bootstrap css-->
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-grid.css">
    <link rel="stylesheet" href="../css/bootstrap-reboot.css">
    <style>
        .c3 {
            background: #c69500;
        }

        .c4 {
            background: #20c997;
        }

        .c6 {
            background: #6f42c1;
        }

        .c8 {
            background: #ed969e;
        }
    </style>
</head>
<!--
1、col是column简写：列；
2、xs是maxsmall简写：超小， sm是small简写：小，  md是medium简写：中等， lg是large简写：大；
3、-* 表示占列数，即占每行row分12列栅格系统比；
4、.col-xs-* 超小屏幕如手机 （<768px）时使用；
   .col-sm-* 小屏幕如平板 （768px ≤ 宽度 ＜992px）时使用；
   .col-md-* 中等屏幕如普通显示器 （992px ≤ 宽度 ＜ 1200px）时使用；
   .col-lg-* 大屏幕如大显示器 （≥1200px）时使用。
当屏幕尺寸
小于 768px 的时候，用 col-xs-12 类对应的样式；
在 768px 到 992px 之间的时候，用 col-sm-9 类对应的样式；
在 992px 到 1200px 之间的时候，用 col-md-6 类对应的样式；
大于 1200px 的时候，用 col-lg-3 类对应的样式；

解释
1、栅格系统都会自动的把每行row分为12列，
col-xs-*、col-sm-* 、col-md-*和.col-lg-* 后面跟的参数表示在当前的屏幕中的占列数。
例如 <div class="col-xs-6 col-md-3"></div> 这个div在屏幕中占的位置是：
 .col-xs-6 在超小屏幕中占6列，也就是屏幕的一半（12/6列=2个div），
 .col-md-3 在中等屏幕中占3列也就是1/4（12/3列=4个div）。

2、反推，
如果我们要在移动端并排显示3个div(12/3个=每个占4 列 )，则col-xs-4；
在PC端上显示6个div(12/6个=每个占2列 ) ，则 col-md-2。
-->
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 c4">col-md-4</div>
        <div class="col-md-4 c4">col-md-4</div>
        <div class="col-md-4 c4">col-md-4</div>
        <!-- 说明：每row行共12列，分个3div，每个div平占4列，即3个*4列=12列 -->
    </div>
    <div class="row">
        <div class="col-md-4 c4">col-md-4</div>
        <div class="col-md-8 c8">col-md-8</div>
        <!-- 说明：每row行共12列，分个2div，第1个div占4列，第2个div则占8列，即4列+8列=12列 -->
    </div>
    <div class="row">
        <div class="col-md-3 c3">col-md-3</div>
        <div class="col-md-6 c6">col-md-6</div>
        <div class="col-md-3 c3">col-md-3</div>
        <!-- 说明：每row行共12列，分个3div，每1,3个div占3列，第2个div则占6列，即3列+6列+3列=12列 -->
    </div>

    <div class="col-xs-12 col-sm-9 col-md-6 col-lg-3" style="background: #1e7e34">
        col-xs-12 col-sm-9 col-md-6 col-lg-3
    </div>
    <!--
    当屏幕尺寸：
    小于 768px 的时候，用 col-xs-12 类对应的样式；
    在 768px 到 992px 之间的时候，用 col-sm-9 类对应的样式；
    在 992px 到 1200px 之间的时候，用 col-md-6 类对应的样式；
    大于 1200px 的时候，用 col-lg-3 类对应的样式；
    -->
</div>
</body>
</html>

Mars-xq

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap之col-xs-*、col-sm-* 、col-md-*和.col-lg-*

webstrom新建bootstrap项目，导入css和js 项目结构如下：写入代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;
复制链接

扫一扫