什么是 bootstrap4c-forms
bootstrap4c-forms 是一个基于 Bootstrap 4.x 的表单插件。它提供了一系列的样式和功能，可以帮助我们更方便地创建漂亮的表单。
bootstrap4c-forms 的特点如下：
- 基于 Bootstrap 4.x
- 支持响应式布局
- 内置常见的表单组件和校验规则
- 可以方便地自定义样式和校验规则
- 具有丰富的 API 和事件
安装 bootstrap4c-forms
我们可以通过 npm 安装 bootstrap4c-forms：
npm install bootstrap4c-forms --save
使用 bootstrap4c-forms
在 HTML 中引入 bootstrap4c-forms
在 HTML 中引入 bootstrap4c-forms 的 CSS 和 JS 文件：
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="node_modules/bootstrap4c-forms/dist/css/bootstrap4c-forms.min.css"> <script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <script src="node_modules/bootstrap4c-forms/dist/js/bootstrap4c-forms.min.js"></script>
在 JS 中初始化
在 JS 中初始化 bootstrap4c-forms：
$(function () {
$('form').bootstrap4c({
// 配置信息
});
});配置信息
bootstrap4c-forms 的配置信息如下：
-- -------------------- ---- -------
-----------------------
-- -------
------- -
-
----- -----------
------ ------
----- -------
------ ------------ ---------
--------- -
--------- ---------
------ -------------
--
--
-
----- -----------
------ -----
----- -----------
------ -----------
--------- -
--------- --------
--
--
-
----- ------------------
------ -------
----- -----------
------ ------------ --------------------------
--------- -
--------- --------
-------- -------------
--
--
-
----- ---------
------ -----
----- --------
-------- -
- ------ ------- ------ --- --
- ------ --------- ------ --- --
--
------ -------------
--------- -
--------- --------
--
--
--
-- ---------
----------- ---------------
----------- --------- ----------------
------------- ----------- -----
-- --------
----------- -------------------
----------- -----------------
--------------- -------------
----------------- -----------
--------------- -------- ------- -------- -
-- --------------------------------------- -
------------------------------------
- ---- -
---------------------------
-
--
-- --------
-------------- -
------ ---------- --------------
-------- ---------- ------------------
----------- ---------- -------------------
--
-- ------
-------------- -----
------------- -----
--------------- ---- -------------
-------------- ---- ---------------
-- -------
------- --------
--------- -
------ -
--------- --- ------
------ --- --------------
-------- --- --- -- ----
------- --- ---------
--
------ -
--------- --- -- ----------
------ --- ---- -- - ----- ----- ---------
-------- --- ---- -- --- ---- -- ----
------- --- ---- -- - --------
--
--
-- ------
------- -------- -- ---
------------- -------- ------- ---
------------ -------- ------- ----- ---
---示例代码
以下是一个使用 bootstrap4c-forms 创建表单的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------ ------------
----- ---------------- ---------------------------------------------------------
----- ---------------- -------------------------------------------------------------------------
-------
--------------- -
-------------- -----
-
--------
-------
------
---- ------------------
--------------------- ---------
------
---- ----------------- -----
------ --------------- --------------- --------------------------
---- ------------------
------ -------------------- ----------- ------------- ----------------
------
------
---- ----------------- -----
------ --------------- --------------- -------------------------
---- ------------------
------ -------------------- --------------- ------------- ----------------
------
------
---- ----------------- -----
------ --------------- --------------- ----------------------------------
---- ------------------
------ -------------------- --------------- -------------------- -----------------------
------
------
---- ----------------- -----
------ --------------- --------------------------
---- ------------------
---- ----------------- -------------------
------ ------------------------ ------------ --------- ------------- -------------
------ ------------------------ --------------------
------
---- ----------------- -------------------
------ ------------------------ ------------ ----------- ------------- ---------------
------ ------------------------ ----------------------
------
------
------
---- ----------------- -----
---- ---------------- -------------
------- ---------- ------------ -------------------------
------- ---------- -------------- ------------------------
------
------
-------
------
------- ------------------------------------------------------
------- ---------------------------------------------------------------
------- -------------------------------------------------------------------------------
--------
---------- -- -
-----------------------
------- -
-
----- -----------
------ ------
----- -------
------ ------------ ---------
--------- -
--------- ---------
------ -------------
--
--
-
----- -----------
------ -----
----- -----------
------ -----------
--------- -
--------- --------
--
--
-
----- ------------------
------ -------
----- -----------
------ ------------ --------------------------
--------- -
--------- --------
-------- -------------
--
--
-
----- ---------
------ -----
----- --------
-------- -
- ------ ------- ------ --- --
- ------ --------- ------ --- --
--
------ -------------
--------- -
--------- --------
--
--
--
----------- ---------------
----------- --------- ----------------
------------- ----------- -----
----------- -------------------
----------- -----------------
--------------- -------------
----------------- -----------
--------------- -------- ------- -------- -
-- --------------------------------------- -
------------------------------------
- ---- -
---------------------------
-
--
-------------- -
------ ---------- --------------
-------- ---------- ------------------
----------- ---------- -------------------
--
-------------- -----
------------- -----
--------------- ---- -------------
-------------- ---- ---------------
------- --------
--------- -
------ -
--------- --- ------
------ --- --------------
-------- --- --- -- ----
------- --- ---------
--
------ -
--------- --- -- ----------
------ --- ---- -- - ----- ----- ---------
-------- --- ---- -- --- ---- -- ----
------- --- ---- -- - --------
--
--
------- -------- -- ---
------------- -------- ------- ---
------------ -------- ------- ----- ---
---
---
---------
-------
-------以上就是 bootstrap4c-forms 的使用教程。希望对大家的学习和开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c83ccdc64669dde4e0c