<div> <form> <!--父div的类要增加两项--> <!--成功状态--> <div> <label for="inputSuccess2">Input with success</label> <input type="text" aria-describedby="inputSuccess2Status"> <!--右边的图标--> <span aria-hidden="true"></span> <!--这个信息隐藏，增加了代码的可读性--> <span>(success)</span> </div> <!--警告状态--> <div> <label for="inputWarning2">Input with warning</label> <input type="text" aria-describedby="inputWarning2Status"> <span aria-hidden="true"></span> <span>(warning)</span> </div> <!--错误状态--> <div> <label for="inputError2">Input with error</label> <input type="text" aria-describedby="inputError2Status"> <span aria-hidden="true"></span> <span>(error)</span> </div> </form> </div>
7.按钮
按钮是必不可少的一样东西
<!-- 白色背景 --> <button type="button">（默认样式）Default</button> <!-- 蓝色背景 --> <button type="button">（首选项）Primary</button> <!-- 绿色背景 --> <button type="button">（成功）Success</button> <!-- 浅蓝色背景 --> <button type="button">（一般信息）Info</button> <!-- 橙黄色背景 --> <button type="button">（警告）Warning</button> <!-- 红色背景 --> <button type="button">（危险）Danger</button>
类中还可以添加尺寸
<button type="button">（大按钮）Large button</button> <button type="button">（默认尺寸）Default button</button> <button type="button">（小按钮）Small button</button> <button type="button">（超小尺寸）Extra small button</button>
以上就是Bootstrap的使用步骤和常用用法
用上这个框架后不仅开发的速度上去了，质量也提升了。
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：