Bootstrap每天必学之表单

Bootstrap是一款流行的前端开发框架，它为网页设计师和开发者提供了丰富的组件和样式，使得构建响应式、移动设备优先的网站变得简单。在Bootstrap中，表单是不可或缺的一部分，用于收集用户输入的数据。本文将深入探讨Bootstrap表单的各种特性和用法。 1. 基本案例 Bootstrap的基础表单设计包括了`.form-group`类，用于组织表单元素，以及`.form-control`类，用于给输入框、文本区域和选择框添加样式。例如，一个包含电子邮件和密码输入框的表单可以这样创建： ```html <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <!-- ... --> </form> ``` 2. 内联表单 内联表单允许你将表单元素紧密排列在同一行内，通过添加`.form-inline`类到`<form>`标签实现。需要注意的是，由于Bootstrap的控件默认宽度为100%，所以要实现内联效果，需要为每个控件指定宽度。同时，内联表单的`<label>`元素应使用`.sr-only`类，以便屏幕阅读器能够正确识别： ```html <form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <!-- ... --> </form> ``` 3. 水平排列的表单 Bootstrap提供了一种水平布局的表单样式，通过使用`.form-horizontal`类，可以将表单控件与对应的`<label>`元素并排显示。这通常通过使用`<div class="form-group">`、`.col-*-*`类和`<label class="control-label">`来实现： ```html <form class="form-horizontal"> <div class="form-group"> <label for="exampleInputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"> </div> </div> <!-- ... --> </form> ``` 4. 被支持的控件 Bootstrap支持多种表单控件，如`<input>`（不同类型的输入框）、`<textarea>`、`<select>`、`<button>`、`<fieldset>`和`<legend>`等。每个控件都可以应用`.form-control`类以获得Bootstrap的样式。 5. 静态控件 对于不需用户输入的文本，可以使用`.form-control-static`类创建静态控件，例如显示已经保存的用户信息： ```html <div class="form-group"> <label class="control-label" for="input-static">Email</label> <p class="form-control-static" id="input-static">email@example.com</p> </div> ``` 6. 控件状态 Bootstrap提供了几种控件状态，如`.has-warning`、`.has-error`和`.has-success`，这些状态可以帮助用户了解输入是否有效或有误： ```html <div class="form-group has-error"> <label class="control-label" for="inputError">Input with error</label> <input type="text" class="form-control" id="inputError"> </div> ``` 7. 控件尺寸 Bootstrap允许调整表单控件的尺寸，通过`.input-lg`、`.input-sm`和`.input-xs`类改变输入框的大小： ```html <input type="text" class="form-control input-lg" placeholder="Large input"> <input type="text" class="form-control" placeholder="Default input"> <input type="text" class="form-control input-sm" placeholder="Small input"> ``` 8. 帮助文本 `.help-block`类可用于添加辅助性文本，通常用于显示表单验证信息： ```html <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> ``` 总结起来，Bootstrap表单提供了一套强大且灵活的工具，使开发者可以轻松地创建美观、响应式的表单界面。通过理解并熟练运用上述特性，你可以创建出符合用户需求、易用且具有视觉吸引力的表单。无论是基础的、内联的，还是水平排列的表单，Bootstrap都提供了丰富的选项来满足各种设计需求。