概述
Gridstrap 是一个支持响应式设计的栅格系统，可以帮助前端开发人员快速构建布局。它提供了一系列的样式类，开发者可以根据自己的需求进行选择和组合。该文章将介绍如何使用 npm 包的方式来引入 gridstrap，以下是具体步骤。
安装
如果你已经有了一个现成的项目，并且使用 npm 管理依赖的话，可以直接在命令行中执行以下命令进行安装：
npm install gridstrap --save
如果你使用 yarn 管理依赖，可以执行以下命令：
yarn add gridstrap
这样就可以在项目中使用 gridstrap 了。
使用
引入样式文件
安装完 gridstrap 后，需要在项目中引入 gridstrap 的样式文件。方式如下：
<head> <link rel="stylesheet" href="node_modules/gridstrap/dist/gridstrap.css"> </head>
如果你安装的是 gridstrap 的 Sass 版本，还需要引入以下文件：
<head> <link rel="stylesheet" href="node_modules/gridstrap/dist/gridstrap.css"> <link rel="stylesheet" href="node_modules/gridstrap/dist/utils.css"> <link rel="stylesheet" href="node_modules/gridstrap/dist/gridstrap-responsive.css"> </head>
使用样式类
引入样式文件后，就可以开始使用 gridstrap 了。以下是 gridstrap 提供的样式类：
container
container 是包含网页主体内容的容器。使用 container 可以使内容在不同分辨率下居中，并保证水平留白的一致性。在一个页面中应该只出现一次 container。
<div class="container"> <!-- 你的网页主体内容在这里 --> </div>
row
row 是 container 的直接子元素，也是网格系统的主要结构。row 中包含若干 column。
<div class="container">
<div class="row">
<!-- 列组在这里 -->
</div>
</div>column
column 是对内容进行排版的最基本单位，每个 column 都被指定了一个固定的宽度，可以用于构建网格布局。
-- -------------------- ---- -------
---- ------------------
---- ------------
---- -----------------
---- ------- - -- ---
------
---- -----------------
---- -------- - -- ---
------
---- -----------------
---- -------- - -- ---
------
------
------上述代码中，.col-sm-4 表示在小屏幕（sm）上，这个列占据 4 个单位（一共有 12 个单位），也就是占据了 1/3 的宽度。
除了 .col-sm-*，gridstrap 还提供了以下样式类：
.col-xs-*：在超小屏幕下（<576px）使用的列样式。.col-sm-*：在小屏幕下（≥576px）使用的列样式。.col-md-*：在中等屏幕下（≥768px）使用的列样式。.col-lg-*：在大屏幕下（≥992px）使用的列样式。.col-xl-*：在超大屏幕下（≥1200px）使用的列样式。
根据自己的需求选择合适的样式类进行使用。
示例代码
我们来看一个简单的使用示例：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
----- --------------- ---------------------------- -------------------
------------ -------------
----- ---------------- ---------------------------------------------------
-------
------
---- ------------------
---- ------------
---- --------------- ----------
---- ------------------------ ---- ------- --------------
------
---- --------------- ----------
---- ------------------------ ----- ------- --------------
------
---- --------------- ----------
---- ------------------------ ------ ------- --------------
------
------
------
-------
-------上述代码在小屏幕和中等屏幕下的效果分别如下：
结语
本文简单介绍了如何使用 npm 包的方式来引入 gridstrap 栅格系统。gridstrap 提供了一系列的样式类，可以方便地进行布局设计。希望本文能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005598881e8991b448d7200