Form controls
Give textual(文本性) form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states(获取的焦点状态), and more.
Sizing
Set heights using classes like .form-control-lg and .form-control-sm. 利用这样的类来设置高度
<input class="form-control form-control-lg"
type="text" placeholder=".form-control-lg" >
<input class="form-control" type="text"
placeholder="Default input">
<input class="form-control form-control-sm"
type="text" placeholder=".form-control-sm">
Disabled & Readonly
Add the disabled boolean attribute on an input to give it a grayed out(灰暗) appearance(外观), remove pointer events, and prevent(阻止) focusing.
 disabled boolean attribute可以让一个input框变灰并且无法被选定
 readonly boolean attribute不会让input失去选中状态但是无法触发事件,无法写入
<input class="form-control" type="text"
placeholder="Disabled input" disabled>
<input class="form-control" type="text"
value="Disabled readonly input" readonly>
Plain text
.form-control-plaintext
it will remove the default form field styling 会取消掉input框的边缘线
<div class="mb-3 row">
<label for="Email" class="col-sm-2 col-form-label">
Email</label>
<div class="col-sm-10">
<input type="text" class="form-control-plaintext"
id="Email" value="email@example.com" readonly>
</div>
</div>
Color
Set the type="color" and add .form-control-color to the <input>.
因为不同的浏览器可能对于type:color的input框会设置不同的高度,bootstrap规定了固定的大小
.form-control-color
<label for="colors" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color"
id="colors" value="#563d7c">
Datalists
Datalists allow you to create a group of <option>s that can be accessed (and autocompleted) from within an <input>.
有些时候,我们需要提供给用户一些默认的可期待的选项,而这时我们希望在用户点击input框时,有跳出的内容以供用户选择,当然用户也可以手动输入,而这些选择就是属于datalist的内容
在input的list属性标注<datalist>的id得到绑定
<option>的value属性被作为展开的选项
但是这种datalist的style在各个浏览器是不同的
<label for="DataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="DataList" placeholder="Type to search...">
<datalist id="datalistOptions">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>