<div> <label for="inputSuccess2">Input with success</label> <input type="text"> <span></span> </div> <div> <label for="inputWarning2">Input with warning</label> <input type="text"> <span></span> </div> <div> <label for="inputError2">Input with error</label> <input type="text"> <span></span> </div>
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1"> <link href="https://www.jb51.net/bootstrap-3.3.7-dist/css/bootstrap.min.css" /> <!--判断IE9 用来支持HTML5 html5shiv.min.js-没有那个元素，就创建那个元素 respond.min.js支持响应式布局的 --> <!--[if lt IE 9]> <script src="https://www.jb51.net/js/html5shiv.min.js"></script> <script src="https://www.jb51.net/js/respond.min.js"></script> <![endif]--> <title>BootStrap基础入门</title> </head> <body> <div> <form> <!--表单中的栅栏系统用form-horizontal，其他的用row --> <h1>用户注册表单</h1> <div> <!--control-label控制label和input之间的水平距离 --> <label for="username">用户名</label> <div> <input type="text" placeholder="请输入用户名" disabled="disabled"/> </div> </div> <div> <label for="password">密码</label> <div> <input type="password" placeholder="请输入密码" /> </div> </div> <!-- 作者：chenhaoxiang@chaojijuhui.com 时间：2017-01-18 描述：sr-only -隐藏元素 --> <div> <label for="email">邮箱</label> <div> <input type="email" placeholder="请输入邮箱" /> </div> </div> <div> <label>上传图片</label> <div> <input type="file" /> <!-- 作者：chenhaoxiang@chaojijuhui.com 时间：2017-01-18 描述：class="help-block" 帮助信息以块显示- 间距变长了点，颜色变淡了。 --> <p>上传的图片类型只能是:.jpg/.gif/.png</p> </div> </div> <div> <label>兴趣爱好:</label> <div> <label> <input type="checkbox" value="画画" />画画 </label> <label> <input type="checkbox" value="音乐" />音乐 </label> <label> <input type="checkbox" value="体育" />体育 </label> <label> <input type="checkbox" value="唱歌" />唱歌 </label> </div> </div> <div> <label>学历:</label> <div> <label> <input type="radio"/>小学 </label> <label> <input type="radio"/>初中 </label> <label> <input type="radio"/>高中 </label> <label> <input type="radio"/>大专 </label> <label> <input type="radio"/>本科 </label> </div> </div> <div> <label>个人简介:</label> <div> <textarea rows="5" placeholder="请输入你的个人简介信息"></textarea> </div> </div> <div> <button type="button">提交表单</button> </div> </form> </div> <script type="text/javascript" src="https://www.jb51.net/js/jquery.slim.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </body> </html>
按钮样式