Bootstrap 是一个非常流行的前端框架，用于构建响应式、移动优先的 Web 项目。而在 Bootstrap 之上，还有许多其他的开源项目，用于扩展 Bootstrap 的功能。其中一个比较有用的 npm 包是 bootstrap-formz，它为 Bootstrap 提供了更加灵活的表单布局和控件。
安装
使用 npm 安装 bootstrap-formz：
npm install bootstrap-formz
除此之外，还需要额外引入以下两个样式文件，以便在页面中使用 bootstrap-formz 样式：
<link href="https://cdn.jsdelivr.net/npm/bootstrap-formz/dist/bootstrap-formz.min.css" rel="stylesheet" integrity="sha384-3q4y51AJlMJg47f6G26RZtySfxZfP85x64N6Jpgc6+qz4xbg/6fJ++/gfL8rcRZG" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.1.0/font/bootstrap-icons.css" rel="stylesheet">
使用
基本表单结构
在 HTML 中，使用 Bootstrap 和 bootstrap-formz 可以轻松地定义基本表单结构。例如：
-- -------------------- ---- -------
------
---- -------------------
------ ---------------------- ---------------
------ ------------ -------------------- --------------- --------------------
------
---- -------------------
------ ------------------------------------
------ --------------- -------------------- ------------------ -----------------------
------
------- ------------- ---------- ----------------------------
-------上述代码片段展示了一个典型的 Bootstrap 表单，但它的样式是默认的。如果想为表单添加 bootstrap-formz 样式，则需要添加一些附加的 class，例如：
-- -------------------- ---- -------
----- -----------------------
---- ------------
---- --------------- ---------- ------
------ ---------------- ------------------------ ---------------
------ ------------ ------------------- ---------------- --------------- --------------------
------
---- --------------- ---------- ------
------ ------------------- -----------------------------------
------ --------------- ------------------- ---------------- ------------------ -----------------------
------
---- --------------- ---------- ------
------ -------------------------- -------------------------- ----------------
------ --------------- ------------------- ---------------- ------------------------- -------------------- ----------
------
------
---- ------------
---- ------------- ---------- ------
------ -------------------- ------------------------ ------------
------ ----------- ------------------- ---------------- ------------------- ------------------ ------
------
---- ------------- ---------- ------
------ ------------------- ----------------------- ------------
------ ----------- ------------------- ---------------- ------------------ ----------------- ------
------
------
------- ------------- ---------- ----------------- -----------
-------这里我们添加了 form-container 类来定义表单的容器，使用了 row 和 col-* 类来定义表单的布局。同时，我们还添加了 mb-3 类来为表单控件之间添加间距，并使用了 form-control-lg 类来定义控件的高度。
支持的控件
bootstrap-formz 提供了一些比较常用的表单控件，并且每个控件都可以自定义样式。以下是一些常用控件的示例代码：
- 文本输入框
<input type="text" class="form-control" placeholder="Text input">
- 文本域
<textarea class="form-control" rows="3"></textarea>
- 下拉菜单
<select class="form-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>- 单选框
-- -------------------- ---- -------
---- -------------------
------ ------------------------ ------------ ------------ ----------- -------------- --------
------ ------------------------ -------------
----- -
--------
------
---- -------------------
------ ------------------------ ------------ ------------ ----------- ---------------
------ ------------------------ -------------
----- -
--------
------- 复选框
-- -------------------- ---- -------
---- -------------------
------ ------------------------ --------------- -------------- ---------
------ ------------------------ ----------------
-------- -
--------
------
---- -------------------
------ ------------------------ --------------- -------------- ---------
------ ------------------------ ----------------
-------- -
--------
------- 滑块
<input type="range" class="form-range">
自定义样式
bootstrap-formz 允许用户自定义控件的样式。例如，可以通过添加额外类来定义控件的大小、颜色、背景等。以下是一些示例：
- 文本输入框
<input type="text" class="form-control form-control-lg bg-dark text-white" placeholder="Text input">
- 文本域
<textarea class="form-control form-control-lg border-top-0 border-end-0 border-start-0" rows="3"></textarea>
- 下拉菜单
<select class="form-select form-select-lg bg-primary text-white">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>- 单选框
-- -------------------- ---- -------
---- -------------------
------ ----------------------- ------------- ------------ ------------ ----------- -------------- --------
------ ------------------------ -------------
----- -
--------
------
---- -------------------
------ ----------------------- ------------- ------------ ------------ ----------- ---------------
------ ------------------------ -------------
----- -
--------
------- 复选框
-- -------------------- ---- -------
---- -------------------
------ ----------------------- ---------------- --------------- -------------- ---------
------ ------------------------ ----------------
-------- -
--------
------
---- -------------------
------ ----------------------- ---------------- --------------- -------------- ---------
------ ------------------------ ----------------
-------- -
--------
------- 滑块
<input type="range" class="form-range range-custom">
结论
bootstrap-formz 是一个很好的 Bootstrap 表单控件库，可以极大地提高开发人员的工作效率。与其他前端库类似，它的学习成本并不高，同时提供了丰富的文档和示例。对于想要使用 Bootstrap 且想要更加灵活的表单控件的开发人员来说，bootstrap-formz 是一个值得尝试的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005574081e8991b448d4362