在前端开发中，随着移动设备的普及，越来越多的网站也需要具备移动端适配。其中，基于微信开发的小程序的兴起，也让开发者需要在小程序中快速实现手机端的 UI 页面设计。而 Bootstrap 作为一个流行的 CSS 框架，可以快速的实现手机端的 UI 设计，于是有了基于小程序的框架 bootstrap-mp。
安装步骤
Step 1：安装 Node.js
在 Node.js 官网 上下载最新版本的 Node.js 并按照默认配置进行安装。
Step 2：创建一个新项目
在控制台上进入项目所在目录，然后通过 npm init 命令来创建一个新项目：
- --- ----
在按照提示填写信息的过程中，如果不确定可以直接一路回车。
Step 3：安装 bootstrap-mp
通过 npm 命令来安装 bootstrap-mp：
- --- - ------------ ------
使用步骤
Step 1：引入 bootstrap-mp
通过 require 或 import 引入 bootstrap-mp：
------ ---------------
或者
----- --------- - ------------------------
Step 2：HTML 结构
在小程序页面的 WXML 文件中，添加基础的 HTML 结构和 bootstrap 所需的样式和脚本：
---- ---- --- ------- ----------------------------------------- ----- ------------------ ---- ---- --- ------- ---- ---- --- ------- ------------------------------------- ------- ------------------------------------- ------- ----------------------------------------
Step 3：UI 设计
在小程序页面的 WXML 文件中，使用 bootstrap 提供的样式来进行 UI 设计：
----- ------------
----- ---------------
---------- -----------
--------- ------------ ----------
-------
-------示例代码
app.js
------ ---------------
index.wxml
------- ------------------------------------------
----- ------------------
----- ------------
----- ---------------
---------- -----------
--------- ------------ ----------
-------
-------
-------
------- --------------------------------------
------- --------------------------------------
------- -----------------------------------------总结
通过使用 npm 包 bootstrap-mp 以及基于 HTML 结构的编写方式，可以轻松快速的在小程序中构建出符合手机端 UI 设计的页面。同时，也提高了网站或小程序的可维护性和可扩展性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671d730d0927023822cd2