基本实例
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control
类的 <input>
、<textarea>
和 <select>
元素都将被默认设置宽度属性为 width: 100%;
。 将 label
元素和前面提到的控件包裹在 .form-group
中可以获得最好的排列。
<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> <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>
<==多选框==> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
注:
不要将表单组合输入框组混合使用
(不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。)