新聞中心
Bootstrap5 表單
在本章中,我們將學(xué)習(xí)如何使用 Bootstrap 創(chuàng)建表單。Bootstrap 通過一些簡單的 HTML 標(biāo)簽和擴(kuò)展的類即可創(chuàng)建出不同樣式的表單。

創(chuàng)新互聯(lián)公司專注于臨川網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供臨川營銷型網(wǎng)站建設(shè),臨川網(wǎng)站制作、臨川網(wǎng)頁設(shè)計、臨川網(wǎng)站官網(wǎng)定制、成都微信小程序服務(wù),打造臨川網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供臨川網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
表單元素 ,
Bootstrap5 表單布局
- 堆疊表單 (全屏寬度):垂直方向
- 內(nèi)聯(lián)表單:水平方向
Bootstrap 提供了兩種類型的表單布局:
堆疊表單
以下實例使用兩個輸入框,一個復(fù)選框,一個提交按鈕來創(chuàng)建堆疊表單:
實例
<
form
>
<
div
class
=
"
mb-3 mt-3
"
>
<
label
for
=
"
email
"
class
=
"
form-label
"
>
Email:
label
>
<
input
type
=
"
email
"
class
=
"
form-control
"
id
=
"
email
"
placeholder
=
"
Enter email
"
name
=
"
email
"
>
div
>
<
div
class
=
"
mb-3
"
>
<
label
for
=
"
pwd
"
class
=
"
form-label
"
>
Password:
label
>
<
input
type
=
"
password
"
class
=
"
form-control
"
id
=
"
pwd
"
placeholder
=
"
Enter password
"
name
=
"
pswd
"
>
div
>
<
div
class
=
"
form-check mb-3
"
>
<
label
class
=
"
form-check-label
"
>
<
input
class
=
"
form-check-input
"
type
=
"
checkbox
"
name
=
"
remember
"
>
Remember me
label
>
div
>
<
button
type
=
"
submit
"
class
=
"
btn btn-primary
"
>
Submit
button
>
form
>
嘗試一下 ?
顯示效果:
實例中我們使用 .form-label 類來確保標(biāo)簽元素有一定的內(nèi)邊距。
復(fù)選框(checkboxe)使用不同的標(biāo)記。 它們使用 .form-check 包裹在容器元素周圍。復(fù)選框和單選按鈕使用 .form-check-input,它的標(biāo)簽可以使用 .form-check-label 類。
內(nèi)聯(lián)表單
如果您希望表單元素并排顯示,請使用 .row 和 .col:
以下實例的兩個輸入框并排顯示,創(chuàng)建內(nèi)聯(lián)表單:
實例
<
form
>
<
div
class
=
"
row
"
>
<
div
class
=
"
col
"
>
<
input
type
=
"
text
"
class
=
"
form-control
"
placeholder
=
"
Enter email
"
name
=
"
email
"
>
div
>
<
div
class
=
"
col
"
>
<
input
type
=
"
password
"
class
=
"
form-control
"
placeholder
=
"
Enter password
"
name
=
"
pswd
"
>
div
>
div
>
form
>
嘗試一下 ?
顯示效果:
文本框
使用 textarea 標(biāo)簽創(chuàng)建文本框提交表單,使用 .form-control 類渲染文本框 textareas 標(biāo)簽:
實例
<
label
for
=
"
comment
"
>
請輸入評論:
label
>
<
textarea
class
=
"
form-control
"
rows
=
"
5
"
id
=
"
comment
"
name
=
"
text
"
>
textarea
>
嘗試一下 ?
顯示效果:
輸入框大小
我們可以通過在 .form-control 輸入框中使用 .form-control-lg 或 .form-control-sm 類來設(shè)置輸入框的大小:
實例
<
input
type
=
"
text
"
class
=
"
form-control form-control-lg
"
placeholder
=
"
大號輸入框
"
>
<
input
type
=
"
text
"
class
=
"
form-control
"
placeholder
=
"
正常大小輸入框
"
>
<
input
type
=
"
text
"
class
=
"
form-control form-control-sm
"
placeholder
=
"
小號輸入框
"
>
嘗試一下 ?
顯示效果:
禁用/只讀表單
使用 disabled/readonly 屬性設(shè)置輸入框禁用/只讀:
實例
<
input
type
=
"
text
"
class
=
"
form-control
"
placeholder
=
"
Normal input
"
>
<
input
type
=
"
text
"
class
=
"
form-control
"
placeholder
=
"
Disabled input
"
disabled
>
<
input
type
=
"
text
"
class
=
"
form-control
"
placeholder
=
"
Readonly input
"
readonly
>
嘗試一下 ?
純文本輸入
使用 .form-control-plaintext 類可以刪除輸入框的邊框::
實例
<
input
type
=
"
text
"
class
=
"
form-control-plaintext
"
placeholder
=
"
Plaintext input
"
>
<
input
type
=
"
text
"
class
=
"
form-control
"
placeholder
=
"
Normal input
"
>
嘗試一下 ?
取色器
使用 .form-control-color 類可以創(chuàng)建一個取色器:
實例
<
input
type
=
"
color
"
class
=
"
form-control form-control-color
"
value
=
"
#CCCCCC
"
>
嘗試一下 ?
顯示效果:
當(dāng)前文章:創(chuàng)新互聯(lián)Bootstrap5教程:Bootstrap5 表單
標(biāo)題URL:http://www.dlmjj.cn/article/djoegpi.html


咨詢
建站咨詢
