1、表单基本用法
<form role="form"> <div> <label for="exampleInputEmail1">Email address</label> <input type="email" placeholder="Enter email"> </div> <div> <label for="exampleInputPassword1">Password</label> <input type="password" placeholder="Password"> </div> <div> <label for="exampleInputFile">File input</label> <input type="file"> <p>Example block-level help text here.</p> </div> <div> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit">Submit</button> </form>
2、内联表单
为 form 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
一定要添加 label 标签
如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。
<form role="form"> <div> <label for="exampleInputEmail2">Email address</label> <input type="email" placeholder="Enter email"> </div> <div> <div> <div>@</div> <input type="email" placeholder="Enter email"> </div> </div> <div> <label for="exampleInputPassword2">Password</label> <input type="password" placeholder="Password"> </div> <div> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit">Sign in</button> </form>
3、水平排列的表单
通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
<form role="form"> <div> <label for="inputEmail3">Email</label> <div> <input type="email" placeholder="Email"> </div> </div> <div> <label for="inputPassword3">Password</label> <div> <input type="password" placeholder="Password"> </div> </div> <div> <div> <div> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div> <div> <button type="submit">Sign in</button> </div> </div> </form>