简介
Bootstrap是一个开源的前端 Web 框架，它为开发者提供了一系列的CSS、JS组件，能够帮助开发者快速构建漂亮且具有响应式的网页。这里介绍的是 Bootstrap v4版的使用教程，安装方式采用npm的方式；
安装 Bootstrap
在使用 Bootstrap 前，需要先在终端中通过 npm 进行安装，可以在项目目录下运行如下命令：
--- ------- -------------------
引入 CSS 和 JS 文件
安装 Bootstrap 后，要在 Web 项目中引入 Bootstrap 的 CSS 和 JS 文件，可以通过以下方式引用：
--------- -----
------
------
----- ----------------
---------------- -- ---------------
----- ---------------- -------------------------------------------------------------------
-------
------
----- -----
---- ------ ---------------- ---
------- ------------------------------------------------------
------- -------------------------------------------------------------------------
-------
-------使用 Bootstrap 组件
Bootstrap 提供了非常丰富的 HTML、CSS 和 JavaScript 组件，可以帮助开发者快速构建强大的 Web 应用程序。
字体图标
字体图标是一种通过字体格式显示各种图标而不是图片的技术。Bootstrap 提供了一套免费、开源和易用的字体图标库，可以帮助您轻松地添加漂亮的图标。可以通过以下方式引入：
----- ---------------- ----------------------------------------------------------------
使用：
-- ---------- --------------
栅格系统
Bootstrap 的栅格系统是一组用于布局的类，可以将页面水平分为12等份。可以通过以下方式使用：
---- ------------------
---- ------------
---- --------------------------
---- --------------------------
------
------表单
Bootstrap 的表单组件可以快速创建美观的表单，包括输入框、下拉框、复选框、单选框等等。以下是一些例子：
---- -------------------
------ --------------------------
------ ----------- -------------------- ------------- ---------------------
------
---- -------------------
------ -------------------------
------ --------------- -------------------- ------------- --------------------
------
---- -------------------
------ ------------------------ ------------ ----------------------- -----------------------
------ ------------------------ ------------------------
----
--------
------
---- -------------------
------ ------------------------ --------------- -------- ----------------------
------ ------------------------ -----------------------
---
--------
------按钮
Bootstrap 提供了不同大小和颜色的按钮，可以通过以下方式使用：
------- ------------- ---------- -------------------------- ------- ------------- ---------- ----------- ----------------------- ------- ------------- ---------- ---------- -----------------------
弹出框
弹出框是一种在页面中间弹出的对话框，可以用于显示警告、确认等内容。以下是例子：
------- ------------- ---------- ------------ ------------------- ----------------------------
-----
---------
---- ------------ ----- ----------------- ------------- --------------
---- ---------------------
---- ----------------------
---- ---------------------
--- ------------------------------
------- ------------- ------------- -------------------- -------------------
----- ---------------------------------
---------
------
---- -------------------
-----
------
---- ---------------------
------- ------------- ---------- -------------- --------------------------------
------- ------------- ---------- ------------------------
------
------
------
------总结
通过这篇文章，你学会了如何通过 npm 安装 Bootstrap，并使用了 Bootstrap 的一些基本组件，包括字体图标、栅格系统、表单、按钮和弹出框。可以让你的网页看起来更加漂亮，加强用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600557bd81e8991b448d4c73