HiDocs

bootstrap

全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)

![image-20220409162654025](D:\downloads\typora picture\image-20220409162654025.png)

==“行（row）”（也就是项目）==必须包含在 .container （固定宽度）（也就是响应式的宽度）或 .container-fluid （100% 宽度）（一直占满屏）中，以便为其赋予合适的排列（aligment）和内补（padding）。

通过“行（row）”在水平方向创建一组“列（column）”。

你的==内容应当放置于“列（column）”内==，并且，只有“列（column）”可以作为行（row）”的直接子元素。

类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

==栅格系统中的列是通过指定1到12的值来表示其跨越的范围==。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。

![image-20220409163145597](D:\downloads\typora picture\image-20220409163145597.png)

注：要保证每一个系列的前缀相加起来为12

注：可以设置hidden-xs，表示在手机端隐藏这个元素+-

实例：

html

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <style>
        header{
            height:100px;
            border:1px solid blue;
        }
        section{
            height:100px;
            border:1px solid purple;
        }
        .row{
            border:1px solid red;
        }
        .row>div{
            border:1px solid aquamarine;
        }
    </style>
</head>
<body>
    <header class="container"> <!--container这个类样式不需要去定义-->
        <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">1</div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">2</div>
            <div class="hidden-xs hidden-sm col-md-4 col-lg-4">3</div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">4</div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">5</div>
<!--            <div class="col-lg-0">6</div>-->
        </div>
    </header>
    <section class="container-fluid"></section>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

bootstrap ​

bootstrap