学习 Bootstrap 5 之 Forms
生活随笔
收集整理的這篇文章主要介紹了
学习 Bootstrap 5 之 Forms
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
學習 Bootstrap 5 之 表單
- 表單 (Forms)
- 1. 概覽 (Overview)
- (1). 簡單的入門案例
- (2). 表單文本 (Form text)
- 1). 使用塊級元素
- 2). 使用內聯HTML元素
- (3). 表單禁用 (Disabled forms)
- 1). 快捷的禁用方式 disabled
- 2). 禁用區域
- (4). 表單中使用到的類或屬性
- 2. Bootstrap 5 中的input標簽 和 textarea標簽 (Form controls)
- (1). 簡單的例子 (Example)
- (2). 改變輸入框和文本域大小 (Sizing)
- 1). 高 class = "form-control-lg"
- 2). 默認
- 3). 小 class="form-control-sm"
- 4). 對比
- (3). 輸入框和文本域禁用 (Disabled)
- (4). 輸入框和文本域只讀 (Readonly)
- (5). 輸入框和文本域純文本 class="form-control-plaintext"
- (6). 上傳文件
- 1). 單文件上傳 (默認)
- 2). 多文件上傳 (multiple屬性)
- (7). 顏色選擇器 (Color)
- (8). 數據列表 (Datalists)
- 3. Bootstrap 5 中的Select標簽 (Select)
- (1). Bootstrap列表框 class = "form-select"
- (2). 改變列表框大小 (Sizing)
- 1). 大的 class = "form-select-lg"
- 2). 小的 class = "form-select-sm"
- 3). 對比
- (3). 列表框多選 (multiple 屬性)
- (4). 列表框禁用 (disabled 屬性)
- 4. Bootstrap 5 中的 復選框 和 圓形復選框標 (Checks and radios)
- (1). Bootstrap 復選框 class = "form-check-input"
- 選中屬性 checked
- (2). Bootstrap 圓形復選框 class = "form-check-input"
- (3). 復選框禁用 (disabled 屬性)
- 5. Bootstrap 5 中的 滑動條 (Range)
- (1). Bootstrap 滑動條 class = "form-range"
- (2). 滑動條禁用 (disabled 屬性)
- (3). 設置滑動條最大值和最小值 (Min and max)
- (3). 設置滑動條每一步 (Steps)
- 6. Bootstrap 5 中的 用戶輸入組 (Input group)
- (1). 官方例子 (Basic example)
- (2). 使用
- 1). 使用方法
- 2). class = "input-group"
- 3). class = "input-group-text"
- 4). 對比
- (3). 設置輸入組元素大小 (Sizing)
- 1). 小 class = "input-group-sm"
- 2). 大 class = "input-group-lg"
- 3). 大小的對比
- (4). 輸入組中的復選框 (Checkboxes and radios)
- 1). 普通復選框
- 2). 圓形復選框
- 3). 兩種復選框的對比
- (5). 多個輸入框 (Multiple inputs)
- (6). 多個span標簽或者label標簽 (Multiple addons)
- (7). 按鈕控件 (Button)
- (8). 下拉菜單按鈕 (Buttons with dropdowns)
- 1). 合在一起的
- 2). 分離的
- 7. 浮動標簽 (Floating labels)
- (1). 浮動標簽 class = "form-floating"
- 1). placeholder屬性
- 2). 設置初始值 value屬性
- 3). 設置無效的樣式 class = "is-invalid"
- 3). 設置有效的樣式 class = "is-valid"
表單 (Forms)
1. 概覽 (Overview)
Bootstrap 5 官方文檔
(1). 簡單的入門案例
<div class = "ms-5 w-50 align-left"><form><div class="mb-3"><label for="inputEmail" class="form-label">郵件</label><input type="email" class="form-control" id="inputEmail" aria-describedby="emailHelp"><div id="emailHelp" class="form-text">我們會確保你的隱私</div></div><div class="mb-3"><label for="inputPassword" class="form-label">密碼</label><input type="password" class="form-control" id="inputPassword"></div><div class="mb-3 form-check"><input type="checkbox" class="form-check-input" id="inputCheck"><label class="form-check-label" for="inputCheck">記住我</label></div><button type="submit" class="btn btn-primary">提交</button></form></div>??label標簽用于跟input標簽一起使用, 當點擊label標簽的文字時, 會觸發input標簽, 例如點擊"記住我:文字, 則會勾選checkbox, 因為label標簽中的for屬性的值與input標簽的id屬性的值是一樣的, 所有實現了相互關聯, 因此可以實現點擊 "記住我"文字, 實現勾選框勾選
??上面的代碼中, 使用了.form-control等類, 使用這些類后, 會創建Bootstrap樣式的控件
(2). 表單文本 (Form text)
使用.form-text類創建塊級或內聯級表單文本
1). 使用塊級元素
<div class = "ms-5 w-50"><label for="inputPassword" class="form-label">密碼</label><input type="password" id="inputPassword" class="form-control" aria-describedby="help"><div id="help" class="form-text">密碼必須包含8-20個字符, 不允許特殊字符和表情</div><br /><label for="inputPassword1" class="form-label">密碼</label><input type="password" id="inputPassword1" class="form-control" aria-describedby="help1"><div id="help1">密碼必須包含8-20個字符, 不允許特殊字符和表情</div></div>2). 使用內聯HTML元素
<div class = "ms-5 w-50"><div class="row g-3 align-items-center"><div class="col-auto"><label for="inputPassword" class="col-form-label">密碼</label></div><div class="col-auto"><input type="password" id="inputPassword" class="form-control" aria-describedby="passwordHelpInline"></div><div class="col-auto"><span id="passwordHelpInline" class="form-text">密碼必須包含8-20個字符</span></div></div></div>(3). 表單禁用 (Disabled forms)
1). 快捷的禁用方式 disabled
<div class = "ms-5 w-50"><input class="form-control" type="text" placeholder="表單禁用了" disabled><br /><input class="form-control" type="text" placeholder="表單沒有被禁用"></div>2). 禁用區域
在<fieldset>標簽中添加disabled屬性, 禁用區域中所有的控件
<div class = "ms-5 w-50"><form><fieldset disabled><h2>整個區域都被禁用</h2><div class="mb-3"><label for="disabledTextInput" class="form-label">被禁用的輸入標簽</label><input type="text" id="disabledTextInput" class="form-control" placeholder="輸入被禁用了"></div><div class="mb-3"><label for="disabledSelect" class="form-label">被禁用的選擇菜單</label><select id="disabledSelect" class="form-select"><option>禁用</option></select></div><div class="mb-3"><div class="form-check"><input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled><label class="form-check-label" for="disabledFieldsetCheck">禁用</label></div></div><button type="submit" class="btn btn-primary">提交</button></fieldset></form></div>(4). 表單中使用到的類或屬性
| .form-label | 指明這個控件是一個label標簽 |
| .form-check-input | 用于checkbox |
| .form-select | 用于select標簽 |
| .form-control | 給input標簽使用一個Bootrstrap提供的樣式 |
| placeholder屬性 | 提示信息 |
2. Bootstrap 5 中的input標簽 和 textarea標簽 (Form controls)
Bootstrap 5 官方文檔
給文本的表單控件, 像input系列的標簽和textarea系列的標簽, 增加一些定制的樣式, 大小等
(1). 簡單的例子 (Example)
使用placeholder屬性, 可以添加提示信息, 當用戶輸入時, 提示信息消失
(2). 改變輸入框和文本域大小 (Sizing)
設置輸入框的高度
1). 高 class = “form-control-lg”
2). 默認
3). 小 class=“form-control-sm”
4). 對比
<div class = "ms-5 w-50"><input class="form-control form-control-lg" type="text" placeholder=".form-control-lg"><input class="form-control" type="text" placeholder="默認" ><input class="form-control form-control-sm" type="text" placeholder=".form-control-sm"></div>(3). 輸入框和文本域禁用 (Disabled)
添加disabled屬性, 禁用的輸入框里的內容不能復制
(4). 輸入框和文本域只讀 (Readonly)
添加readonly屬性
(5). 輸入框和文本域純文本 class=“form-control-plaintext”
使input的輸入框使用純文本樣式, 一般跟readonly屬性一起使用
(6). 上傳文件
1). 單文件上傳 (默認)
<div class = "ms-5 w-50"><label for="formFile" class="form-label">單文件上傳</label><input class="form-control" type="file" id="formFile"></div>2). 多文件上傳 (multiple屬性)
添加multiple屬性
(7). 顏色選擇器 (Color)
使用.form-control-color類
(8). 數據列表 (Datalists)
<div class = "ms-5 w-50"><label for="exampleDataList" class="form-label">賬號</label><input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="輸入要搜索的賬號"><datalist id="datalistOptions"><option value="123456789" /><option value="987654321" /></datalist></div>3. Bootstrap 5 中的Select標簽 (Select)
Bootstrap 5 官方文檔
(1). Bootstrap列表框 class = “form-select”
<select class = "form-select"><option selected>打開菜單</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option> </select>(2). 改變列表框大小 (Sizing)
1). 大的 class = “form-select-lg”
2). 小的 class = “form-select-sm”
3). 對比
<div class = "ms-5 w-50">大的<select class="form-select form-select-lg mb-3"><option selected>打開菜單</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select>小的<select class="form-select form-select-sm mb-3" ><option selected>打開菜單</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select>默認的<select class="form-select mb-3" ><option selected>打開菜單</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select></div>(3). 列表框多選 (multiple 屬性)
<div class = "ms-5 w-50"><select class="form-select" multiple><option selected>打開菜單</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select></div>(4). 列表框禁用 (disabled 屬性)
<div class = "ms-5 w-50"><select class="form-select" multiple disabled><option selected>打開菜單</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select></div>4. Bootstrap 5 中的 復選框 和 圓形復選框標 (Checks and radios)
Bootstrap 5 官方文檔
(1). Bootstrap 復選框 class = “form-check-input”
<div class="form-check"><input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"><label class="form-check-label" for="flexCheckDefault">復選框</label></div><div class="form-check"><input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked><label class="form-check-label" for="flexCheckChecked">被選中的復選框, 因為使用了 checked屬性</label></div>選中屬性 checked
使用checked屬性, 可以讓復選框一開始處于選中狀態
(2). Bootstrap 圓形復選框 class = “form-check-input”
<div class = "ms-5 w-50"><div class="form-check"><input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"><label class="form-check-label" for="flexRadioDefault1">圓形復選框</label></div><div class="form-check"><input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked><label class="form-check-label" for="flexRadioDefault2">被選中的圓形復選框</label></div></div>實際上, 兩種復選框的區別只是 type 不一樣
(3). 復選框禁用 (disabled 屬性)
<div class = "ms-5 w-50"><div class="form-check"><input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" disabled><label class="form-check-label" for="flexRadioDefault1">圓形復選框</label></div><div class="form-check"><input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" disabled><label class="form-check-label" for="flexCheckDefault">復選框</label></div></div>5. Bootstrap 5 中的 滑動條 (Range)
Bootstrap 5 官方文檔
(1). Bootstrap 滑動條 class = “form-range”
<div class = "ms-5 w-50"><label for="customRange1" class="form-label">滑動條</label><input type="range" class="form-range" id="customRange1"></div>(2). 滑動條禁用 (disabled 屬性)
<div class = "ms-5 w-50"><label for="customRange1" class="form-label">被禁用的滑動條</label><input type="range" class="form-range" id="customRange1" disabled></div>(3). 設置滑動條最大值和最小值 (Min and max)
??默認情況下, 最大值是100, 最小值是0
??可以通過min屬性和max屬性設置, 滑動條會自動根據最大值和最小值的差合理安排滑動條上小圓點的位置
下面的例子是設置0 - 10
<div class = "ms-5 w-50"><label for="customRange2" class="form-label">0 - 10 滑動條</label><input type="range" class="form-range" min="0" max="10" id="customRange2"></div>(3). 設置滑動條每一步 (Steps)
默認情況下, 會自動計算, 當然也可以指定, 使用step屬性
6. Bootstrap 5 中的 用戶輸入組 (Input group)
Bootstrap 5 官方文檔
??可以理解為在輸入框附近添加一些其他的控件, 簡單的說添加了一些修飾, 讓用戶輸入信息的界面更為友好
(1). 官方例子 (Basic example)
<div class = "col-6 ms-5"><div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">@</span><input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"></div><div class="input-group mb-3"><input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"><span class="input-group-text" id="basic-addon2">@example.com</span></div><label for="basic-url" class="form-label">Your vanity URL</label><div class="input-group mb-3"><span class="input-group-text" id="basic-addon3">https://example.com/users/</span><input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"></div><div class="input-group mb-3"><span class="input-group-text">$</span><input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"><span class="input-group-text">.00</span></div><div class="input-group mb-3"><input type="text" class="form-control" placeholder="Username" aria-label="Username"><span class="input-group-text">@</span><input type="text" class="form-control" placeholder="Server" aria-label="Server"></div><div class="input-group"><span class="input-group-text">With textarea</span><textarea class="form-control" aria-label="With textarea"></textarea></div></div>(2). 使用
1). 使用方法
將input標簽單獨放到div標簽中, div標簽使用.input-group類, 提示的文字信息放到 span標簽中, span標簽使用.input-group-text類
<div class = "col-6 ms-5"><label for="url" class="form-label">使用Bootstrap 5 輸入組</label><div class="input-group mb-3"><span class="input-group-text">https://example.com/users/</span><input type="text" class="form-control" id="url" aria-describedby="basic-addon3"></div></div>效果
span標簽就是前面以灰色為背景的文字, 當然也可以放到中間
2). class = “input-group”
單使用.input-group類的效果
3). class = “input-group-text”
單使用.input-group-text類的效果
結合在一起在能實現在輸入框左邊且以灰色為背景
4). 對比
<div class = "col-6 ms-5"><label for="url" class="form-label">使用Bootstrap 5 輸入組</label><div class="input-group mb-3"><span class="input-group-text">https://example.com/users/</span><input type="text" class="form-control" id="url" aria-describedby="basic-addon3"></div><br /><label for="url1" class="form-label">不適用Bootstrap 5 輸入組</label><div class="mb-3"><span>https://example.com/users/</span><input type="text" class="form-control" id="url1" aria-describedby="basic-addon3"></div><br /><label for="url2" class="form-label">input-group</label><div class="input-group mb-3"><span>https://example.com/users/</span><input type="text" class="form-control" id="url2" aria-describedby="basic-addon3"></div><br /><label for="url3" class="form-label">input-group-text</label><div class="mb-3"><span>https://example.com/users/</span><input type="text" class="input-group-text form-control" id="url3" aria-describedby="basic-addon3"></div><br /></div>(3). 設置輸入組元素大小 (Sizing)
1). 小 class = “input-group-sm”
2). 大 class = “input-group-lg”
3). 大小的對比
<div class = "col-6 ms-5"><div class="input-group input-group-sm mb-3"><span class="input-group-text" id="inputGroup-sizing-sm">小</span><input type="text" class="form-control"></div><div class="input-group mb-3"><span class="input-group-text" id="inputGroup-sizing-default">默認</span><input type="text" class="form-control"></div><div class="input-group input-group-lg"><span class="input-group-text" id="inputGroup-sizing-lg">大</span><input type="text" class="form-control"></div></div>(4). 輸入組中的復選框 (Checkboxes and radios)
注意最好要把復選框的外邊距設置為0
1). 普通復選框
<div class = "col-6 ms-5"><div class="input-group mb-3"><div class="input-group-text"><input class="form-check-input mt-0" type="checkbox" value="" ></div><input type="text" class="form-control" ></div></div>2). 圓形復選框
<div class = "col-6 ms-5"><div class="input-group"><div class="input-group-text"><input class="form-check-input mt-0" type="radio" value="" ></div><input type="text" class="form-control" ></div></div>3). 兩種復選框的對比
<div class = "col-6 ms-5"><div class="input-group mb-3"><div class="input-group-text"><input class="form-check-input mt-0" type="checkbox" value="" ></div><input type="text" class="form-control" ></div><br /><div class="input-group"><div class="input-group-text"><input class="form-check-input mt-0" type="radio" value="" ></div><input type="text" class="form-control" ></div></div>(5). 多個輸入框 (Multiple inputs)
<div class = "col-6 ms-5"><div class="input-group"><span class="input-group-text">姓名</span><input type="text" class="form-control"><input type="text" class="form-control"></div></div>(6). 多個span標簽或者label標簽 (Multiple addons)
<div class = "col-6 ms-5"><div class="input-group mb-3"><span class="input-group-text">美元 $ </span><span class="input-group-text">0.00</span><input type="text" class="form-control" ></div></div>(7). 按鈕控件 (Button)
<div class = "col-6 ms-5"><div class="input-group mb-3"><button class="btn btn-outline-secondary" type="button">按鈕1</button><button class="btn btn-outline-primary" type="button">按鈕2</button><input type="text" class="form-control" placeholder="請輸入內容" ></div></div>(8). 下拉菜單按鈕 (Buttons with dropdowns)
1). 合在一起的
<div class = "col-6 ms-5"><div class="input-group"><button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">下拉菜單</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">超鏈接1</a></li><li><a class="dropdown-item" href="#">超鏈接2</a></li><li><a class="dropdown-item" href="#">超鏈接3</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">超鏈接4</a></li></ul><input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons"><button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">下拉菜單</button><ul class="dropdown-menu dropdown-menu-end"><li><a class="dropdown-item" href="#">超鏈接1</a></li><li><a class="dropdown-item" href="#">超鏈接2</a></li><li><a class="dropdown-item" href="#">超鏈接3</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">超鏈接4</a></li></ul></div></div>2). 分離的
<div class = "col-6 ms-5"><div class="input-group mb-3"><button type="button" class="btn btn-outline-secondary">Action</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">超鏈接1</a></li><li><a class="dropdown-item" href="#">超鏈接2</a></li><li><a class="dropdown-item" href="#">超鏈接3</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">超鏈接4</a></li></ul><input type="text" class="form-control" aria-label="Text input with segmented dropdown button"></div></div>7. 浮動標簽 (Floating labels)
Bootstrap 5 官方文檔
(1). 浮動標簽 class = “form-floating”
- 輸入框
- 文本域
1). placeholder屬性
如果不使用placeholder屬性, 輸入框不會出現鼠標點擊文字變換的效果
2). 設置初始值 value屬性
<div class = "col-6 ms-5"><div class="form-floating mb-3"><input type="email" class="form-control" id="floatingInput" value = "xxx@qq.com"><label for="floatingInput">電子郵箱</label></div><div class="form-floating"><input type="password" class="form-control" id="floatingPassword" value = "123456"><label for="floatingPassword">密碼</label></div></div>3). 設置無效的樣式 class = “is-invalid”
<div class = "col-6 ms-5"><div class="form-floating mb-3"><input type="email" class="form-control" id="floatingInput" value = "xxx@qq.com"><label for="floatingInput">電子郵箱</label></div><div class="form-floating"><input type="password" class="form-control is-invalid" id="floatingPassword" value = "123456"><label for="floatingPassword">密碼</label></div></div>3). 設置有效的樣式 class = “is-valid”
<div class = "col-6 ms-5"><div class="form-floating mb-3"><input type="email" class="form-control is-valid" id="floatingInput" value = "xxx@qq.com"><label for="floatingInput">電子郵箱</label></div><div class="form-floating"><input type="password" class="form-control is-valid" id="floatingPassword" value = "123456"><label for="floatingPassword">密碼</label></div></div>總結
以上是生活随笔為你收集整理的学习 Bootstrap 5 之 Forms的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 仿B站首页头部动画的实现
- 下一篇： 【LLM大模型】模型和指令微调方法