如何仅下载和使用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="http://www.srcmini.com/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="http://www.srcmini.com/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, 而不会获得任何可能损害你自己的样式的无用样式。
【如何仅下载和使用Bootstrap 3 Grid样式】编码愉快！