简介
Overstrap 是 Bootstrap 上层构建的 CSS 框架，通过对 Bootstrap 的高级定制和扩展，让你更容易地构建出各种类型的 Web 应用。
在本文接下来的部分，将逐步讲解 Overstrap 的基本用法。
安装和使用
你可以使用 npm 来安装 Overstrap，安装命令如下：
npm install overstrap
但是在使用之前，你需要先通过 npm 安装 bootstrap 以及 popper.js。可以使用以下命令完成：
npm install bootstrap popper.js
在 HTML 文件中，先引入 popper.js 和 bootstrap 的 CSS 和 JS，然后再引入 Overstrap 的 CSS 文件即可。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------------- ------------ ----- --------------- ---------------------------- ----------------- ----- ---------------- --------------------------------------------------------- ----- ---------------- --------------------------------------------------------- ------- ------ ---------- --------------- ------- ------------------------------------------------------ ------- ------------------------------------------------------------- ------- --------------------------------------------------------------- ------- -------
栅格系统
Overstrap 的栅格系统和 Bootstrap 的栅格系统相同，用于在网页布局中进行分栏。栅格系统有四个类型的布局：xs、sm、md、lg。其中，xs 表示屏幕小于 576px，sm 表示屏幕大于等于 576px，md 表示屏幕大于等于 768px，lg 表示屏幕大于等于 992px。
每个栅格系统要使用一系列的 .col-* 类。例如下面这个 HTML 代码就构建了一个应用了栅格系统的四列布局。
<div class="container">
<div class="row">
<div class="col-sm-3">Left Column</div>
<div class="col-sm-3">Left Middle Column</div>
<div class="col-sm-3">Right Middle Column</div>
<div class="col-sm-3">Right Column</div>
</div>
</div>实际上，你可以使用更多的辅助类，如.offset-、.order-、.justify-content-* 等来更好地控制栅格的表现。
组件
Overstrap 包含了诸多的 UI 组件，用于快速地搭建 Web 应用的界面。
下拉菜单
下拉菜单是一个常见的组件，用于在用户点击特定元素后呈现某些信息。在 Overstrap 中，你可以使用 .dropdown 类来添加一个下拉菜单组件。在下面这个例子中，点击“菜单”按钮会弹出一个下拉菜单。
-- -------------------- ---- -------
---- -----------------
------- ---------- ------------- ---------------- ------------- ----------------------- ---------------------- -------------------- ----------------------
--
---------
---- --------------------- -------------------------------------
-- --------------------- ------------ -----
-- --------------------- ------------ -----
-- --------------------- ------------ -----
------
------模态框
模态框是一个弹出式的 HTML 窗口，通常用于呈现内容或请求用户输入。在 Overstrap 中，你可以使用 .modal 类来添加一个模态框组件。在下面这个例子中，点击“打开模态框”按钮会弹出一个模态框。
-- -------------------- ---- -------
---- ------------ ----- ------------ ------------- ------------- ----------------------------------- -------------------
---- -------------------- ----------------
---- ----------------------
---- ---------------------
--- ------------------- ---------------------------------
------- ------------- ------------- -------------------- -------------------
----- ---------------------------------
---------
------
---- -------------------
-------
------
---- ---------------------
------- ------------- ---------- -------------- --------------------------------
------- ------------- ---------- ------------------------
------
------
------
------
------- ------------- ---------- ------------ ------------------- -----------------------
-----
---------结论
Overstrap 是一个非常好用的字库，通过扩展 Bootstrap 的原有功能以及定制，让开发者可以更快速，更优美的构建 Web 应用。
显然，在上面这个文章中演示的代码和 Overstrap 所提供的组件并不全面，但是请敬请期待，Overstrap 真的是一个非常优秀的前端资源包。
不论是从组件可用性、样式设计等方面，Overstrap 相信会帮助到更多的前端工程师。
为了更好的使用，我们可以到 Overstrap 的官网阅读更加完备的文档。
最后，本篇文章提供的例子，以及所提及到的所有组件都可以在我的博客中找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b3481e8991b448d8d21