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