BootStrap容器介绍

最新推荐文章于 2024-08-31 08:15:44 发布

我可能是个假开发

最新推荐文章于 2024-08-31 08:15:44 发布

阅读量4.6k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/CSDN_GIA/article/details/70314867

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

BootStrap容器介绍

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

代码：

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>Bootstrap容器介绍</title>
        <!-- 引入Bootstrap核心样式文件 -->
        <link href="../../css/bootstrap.min.css" rel="stylesheet">
        <!-- 引入jQuery核心js文件 -->
        <script src="../../js/jquery-1.11.0.min.js"></script>
        <!-- 引入BootStrap核心js文件 -->
        <script src="../../js/bootstrap.min.js"></script>
        <style>
            .container {
                border: 1px solid red;
                padding-left: 0px;
                padding-right: 0px;
            }

            .container-fluid {
                border: 1px solid blue;
            }
        </style>

    </head>

    <body>
        <div class="container">
            ...
        </div>
        <div class="container-fluid">
            ……
        </div>
        <div>
            ……
        </div>
    </body>
</html>

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

“行（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-* 不存在，也影响大屏幕设备。

栅格参数：”col--”

栅格参数.PNG

large:lg
medium:md
small:sm
x small:xs

例如：

<div class="container">
    <div class="row">
        <div class="col-md-3 col-xs-6">11</div>
        <div class="col-md-3 col-xs-6">12</div>
        <div class="col-md-3 col-xs-6">13</div>
        <div class="col-md-3 col-xs-6">14</div>
    </div>

    <div class="row">
        <div class="col-md-3 col-xs-6">21</div>
        <div class="col-md-3 col-xs-6">22</div>
        <div class="col-md-3 col-xs-6">23</div>
        <div class="col-md-3 col-xs-6">24</div>
    </div>          
</div>

按钮

按钮.PNG

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
.active类设置按钮激活状体，其表现为被按下去（底色更深，边框夜色更深，向内投射阴影）

响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。

有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式。

可用的类

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

响应式工具.PNG

<!--
    设置one div，中等屏幕和超小屏幕显示
    设置two div，小屏幕和超大屏幕隐藏
-->
<div class="visible-md visible-xs">one</div>
<div class="hidden-sm hidden-lg">two</div>

我可能是个假开发

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录