Bootstrap表单控件是一种扩展了我们用类重置的表单样式的工具,它提供了许多用于自定义显示的选项,以便在浏览器和设备之间实现更一致的呈现。这些控件包括文本输入框、文本区域、复选框、单选按钮和下拉菜单等,它们都可以通过Bootstrap的样式进行定制和扩展。
一、示例
下面是一个演示 Bootstrap 表单样式的简单示例。
<form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1"> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" class="btn btn-primary">Submit</button>
二、表单控件
文本表单控件(如<input>、<select> 和<textarea>)使用.form-control类设置样式。包括一般外观、焦点状态、大小等样式。
<form> <div class="form-group"> <label for="exampleFormControlInput1">Email address</label> <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com"> </div> <div class="form-group"> <label for="exampleFormControlSelect1">Example select</label> <select class="form-control" id="exampleFormControlSelect1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="exampleFormControlSelect2">Example multiple select</label> <select multiple class="form-control" id="exampleFormControlSelect2"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Example textarea</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> </div> </form>
对于文件输入,请将 for ..form-control.form-control-file
<form> <div class="form-group"> <label for="exampleFormControlFile1">Example file input</label> <input type="file" class="form-control-file" id="exampleFormControlFile1"> </div> </form>
三、大小
使用诸如.form-control-lg 和 .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">
<select class="form-control form-control-lg"> <option>Large select</option> </select> <select class="form-control"> <option>Default select</option> </select> <select class="form-control form-control-sm"> <option>Small select</option> </select>
四、只读
在输入上添加readonly 属性以防止修改输入的值。只读输入看起来更轻(就像禁用的输入一样),但保留标准光标
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
五、只读纯文本
如果要将表单中的<input readonly> 元素设置为纯文本样式,请使用.form-control-plaintext纯文本类删除默认表单字段样式并保留正确的边距和填充。
<form> <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com"> </div> </div> <div class="form-group row"> <label for="inputPassword" class="col-sm-2 col-form-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword"> </div> </div> </form>
<form class="form-inline"> <div class="form-group mb-2"> <label for="staticEmail2" class="sr-only">Email</label> <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com"> </div> <div class="form-group mx-sm-3 mb-2"> <label for="inputPassword2" class="sr-only">Password</label> <input type="password" class="form-control" id="inputPassword2" placeholder="Password"> </div> <button type="submit" class="btn btn-primary mb-2">Confirm identity</button> </form>
六、范围输入
使用.form-control-range可以设置水平滚动的范围输入。
<form> <div class="form-group"> <label for="formControlRange">Example Range input</label> <input type="range" class="form-control-range" id="formControlRange"> </div> </form>
七、复选框和单选按钮
默认复选框和单选按钮在.form-check的帮助下得到了改进,这两种输入类型的单个类改进了其 HTML 元素的布局和行为。
1、默认
默认情况下,任意数量的直系同级复选框和无线电都将垂直堆叠,并用.form-check适当间隔。
<div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Default checkbox </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled> <label class="form-check-label" for="defaultCheck2"> Disabled checkbox </label> </div>
<div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked> <label class="form-check-label" for="exampleRadios1"> Default radio </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2"> <label class="form-check-label" for="exampleRadios2"> Second default radio </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled> <label class="form-check-label" for="exampleRadios3"> Disabled radio </label> </div>
2、内嵌
通过将复选框或单选按钮添加到任何 .form-check-inline.form-check。
<div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> <label class="form-check-label" for="inlineCheckbox1">1</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> <label class="form-check-label" for="inlineCheckbox2">2</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label> </div>
<div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> <label class="form-check-label" for="inlineRadio1">1</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> <label class="form-check-label" for="inlineRadio2">2</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled> <label class="form-check-label" for="inlineRadio3">3 (disabled)</label> </div>
3、无标签
添加到没有任何标签文本的输入中。请记住,仍要为辅助技术提供某种形式的辅助名称(例如,使用.position-static.form-checkaria-label)。
<div class="form-check"> <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="..."> </div> <div class="form-check"> <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="..."> </div>