什么是 bower-strapless
Bower-strapless 是一个基于 Bower 平台的 JavaScript 库，主要用于快速轻松地实现页面布局和美化。它基于 Bootstrap 框架构建，又去掉了部分不常用组件和样式，保留了常用的基础组件和常用样式，减小了文件大小，提高了加载速度。
安装 bower-strapless
使用 bower-strapless 首先需要安装 Bower 的环境，并确保电脑已经配置好 Node.js。安装命令如下：
npm install -g bower
安装完成后，就可以安装 bower-strapless 库了，安装命令如下：
bower install bower-strapless
bower-strapless 支持的组件
Bower-strapless 保留了 Bootstrap 常用的组件和样式，其中组件包括：
| 组件类型 | 组件名称 |
|---|---|
| 布局系统 | grid, containers |
| 按钮样式 | button, button-group |
| 导航样式 | navbar |
| 标签页和面板 | tab, panel |
| 列表和表格 | list, table |
| 表单和输入框 | form, input |
| MooTools插件插件 | calender, colorpicker |
bower-strapless 示例代码
以下是一个使用 bower-strapless 实现响应式布局的示例代码。该示例代码基于 bower-strapless 的 Grid 组件实现的布局，同时利用 Bootstrap 的导航样式实现响应式导航栏：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------------------
---- -- --------------- --- -- ---
----- ---------------- ----------------------------------------------------------
----- ---------------- ---------------------------------------------------------------------
---- ----- ---
-------
-- ---- --
---- -
----------------- --------
-
-- --------- -- --
---------- -
----------- -----
-
-- ------ -- --
------- -
----------- -------
----------------- -----
-------- -----
----------- --- --- --- ------- -- -- -----
-
-- ---- -- --
----- -
---------- -----
------------ ---------- -------
------------ -----
------ --------
----------- -----
-------------- -----
-
-- ----- --
--------------- ----------- - -- - - -
---------- -----------
-
--------
-------
------
---- ---------------
---- ------------------
--- ---------------------------------
------
------
---- ------------- ----------------
---- ---------------------
---- ------------------
---- ------ ---
------- ------------- ---------- ----------- ---------------------- ----------------------------
----- ------------------------
----- ------------------------
----- ------------------------
---------
-- ------------- ------------------
---- ------------------- ----------
--- ------------
--- ----------------- ----------------------
------ ----------------------
------ ----------------------
------ ----------------------
-----
------------------------ ---
------
------
------
---- ----------------
---- ------------------
---- ------------------
---- --------------
------------
-----------------------------------------------------
----- ----------- ------------- ---------------
------------------
---- --------------
------------
-------------------------------------------
----- ----------- ------------- ---------------
------------------
---- --------------
------------
---------------------------------------------------------------
----- ----------- ------------- ---------------
------------------
-----------------
------
------
---- -- --------------- ---------- -- ---
------- -----------------------------------------------------------------
------- --------------------------------------------------------------------
-------
-------总结
Bower-strapless 是一个非常方便实用的前端 JS 库，它能够帮助我们快速地实现页面布局和美化，同时减小文件大小，提高页面加载速度。通过学习使用 bower-strapless，我们可以更好地掌握前端布局和美化的技能，决定于它对项目开发和工程实践都具有很高的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c86ccdc64669dde4f5e