<form role="form"> <div> <label> <input type="checkbox" value="option1">游戏 </label> <label> <input type="checkbox" value="option2">摄影 </label> <label> <input type="checkbox" value="option3">旅游 </label> </div> <div> <label> <input type="radio" value="option1">男性 </label> <label> <input type="radio" value="option2">女性 </label> <label> <input type="radio" value="option3">中性 </label> </div> </form>
五、表单的验证
<form role="form"> <div> <label for="inputSuccess1">成功状态</label> <input type="text" placeholder="成功状态" > <span>你输入的信息是正确的</span> <span></span> </div> <div> <label for="inputWarning1">警告状态</label> <input type="text" placeholder="警告状态"> <span>请输入正确信息</span> <span></span> </div> <div> <label for="inputError1">错误状态</label> <input type="text" placeholder="错误状态"> <span>你输入的信息是错误的</span> <span></span> </div> </form>
具体解释：
给div加上不同的类，如.has-warning警告状态，显示为黄色，.has-error错误状态，显示为红色，.has-success成功状态，显示为绿色；第一个span的.help-block为提示信息；第二个span加上后面的一长串类名，是为了在输入框后面提示不同的图标，其中.form-control-feedback必须和div的.has-feedback一同使用，不然图标不能显示在输入框内部。
总结：以上介绍了表单的不同显示样式，以及表单的具体的一些标签，个人觉得作为框架，最主要的是它的嵌套结构，在用时需要知道哪个标签里嵌套哪个标签。想要不同的风格，可以加入自己的css样式，总之灵活运用吧！
您可能感兴趣的文章: