如何仅下载和使用Bootstrap 3 Grid样式

本文概述

• A.仅使用Bootstrap网格
• B.使用Bootstrap Builder

几乎每个前端开发人员都熟悉Bootstrap的网格语法, 因为它非常易于使用, 并且每个人都知道为自己的代码中没有Bootstrap的项目创建我们自己的网格是有问题的。如果你仍然只想使用Bootstrap网格, 在本文中, 我们将向你展示两种在不包含整个Bootstrap框架的情况下在项目中获取和使用Bootstrap网格的方法。

A.仅使用Bootstrap网格

如果你访问@zirafa的”仅Bootstrap Grid Only”存储库, 则将为你的项目找到一个非常有用的资源。 Bootstrap Grid Repository仅提供具有不同格式的预编译网格, 这些格式为grid12.css(每个人都知道的默认格式), grid24.css, grid30.css, grid100.css。简而言之, 该存储库包含：

• 标准Bootstrap网格类：列, 偏移, 推和拉类
• 标准Bootstrap响应实用程序类：.visible- *, .hidden- *
• Clearfix类, * {box-sizing：border-box}声明, 向右拉, 向左拉。
• 12、24、30和100列的预编译样式表。每个的装订线宽度分别为30px, 15px, 10px, 2px。 100列网格产生的结果类似于Unsemantic, 如果你喜欢语义类命名(col-md-50表示宽度恰好为50％)或需要非常精细的布局定位(62列+ 38列), 则该结果很好
• 较少文件grid.css.less用于构建自己的引导网格, 包括网格变量(@ grid-columns和@ gutter-width)以及断点截止声明(@ screen-xs, @ screen-sm, @ screen -md, @ screen-lg)

你可以使用免费的CDN使用引导程序的典型网格(共12列)：

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/zirafa/bootstrap-grid-only/94433673/css/grid12.css">

或在文档中引用grid12.css的副本：

<link rel="stylesheet" type="text/css" href="./css/grid12.css">

然后, 你将只能在已建立的类中使用HTML中的引导网格：

<div class="row">
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-4">.col-sm-4</div>
</div>

或更复杂的结构：

<div class="row">
    <div class="col-xs-6 col-sm-3" style="background-color:lavender;">
        Column 1<br>
        Resize the browser window to see the effect. Also try to remove the div clearfix line and see what happens.
    </div>
    <div class="col-xs-6 col-sm-3" style="background-color:lavenderblush;">Column 2</div>
    
    <!-- Add clearfix for only the required viewport -->
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-3" style="background-color:lightcyan;">Column 3</div>
    <div class="col-xs-6 col-sm-3" style="background-color:lightgray;">Column 4</div>
</div>

B.使用Bootstrap Builder

如果你不愿意使用前面提到的存储库的样式, 则可以在此处的官方网站上使用Bootstrap 3的自定义生成器。在这种形式中, 只需让”网格”复选框标记：

就是这样, 下载生成的zip, 并将bootstrap.min.css文件包含在你的文档中：

<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">

然后照常使用网格：

<div class="row">
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-4">.col-sm-4</div>
</div>

这两种方法的优势在于, 你只会得到Grid CSS, 而不会获得任何可能损害你自己的样式的无用样式。

编码愉快！