表单
https://v3.bootcss.com/css/#forms
小图标
https://v3.bootcss.com/components/
前端CDN3.3.7版本
http://www.bootcdn.cn/bootstrap/
进度条
https://v3.bootcss.com/components/#progress
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style> *{ margin:0; padding:0; } </style> <body> <div class="container"> <div class="row"> <div class=""> <h1>h1. Bootstrap heading <small>Secondary text</small> </h1> </div> </div> <div class="row"> <div class=" "> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 33%;"> 1/3 </div> </div> </div> <div class=" "> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Panel title<span class="glyphicon glyphicon-pushpin pull-right"></span></h3> </div> <div class="panel-body"> <form class="form-horizontal"> <div class="form-group"> <div class="col-md-2 control-label"> <label for="exampleInputEmail1">姓名</label> </div> <div class="col-md-8"> <input type="email pull-right" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> </div> <div class="form-group"> <div class="col-md-2 control-label"> <label for="exampleInputEmail1">手机</label> </div> <div class="col-md-8"> <input type="email pull-right" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> </div> <div class="form-group"> <div class="col-md-2 control-label"> <label for="exampleInputEmail1">邮箱</label> </div> <div class="col-md-8"> <input type="email pull-right" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> </div> <div class="form-group"> <div class="col-md-2 control-label"> <label for="exampleInputEmail1">密码</label> </div> <div class="col-md-8"> <input type="email pull-right" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> </div> <div class="form-group"> <div class="col-md-2 control-label"> <label for="exampleInputFile">头像</label> </div> <div class="col-md-8"> <input type="file" id="exampleInputFile"> <p class="help-block">只支持JPG格式</p> </div> </div> <div class="form-group"> <div class="col-md-2 control-label"> <label for="exampleInputFile">属性</label> </div> <div class="col-md-8"> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it‘s great </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label> </div> <div class="radio disabled"> <label> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Option three is disabled </label> </div> </div> </div> </form> </div> </div> </div> </div> <button type="submit" class="btn btn-success navbar-right">Submit</button> </div> </body> </html>
原文：https://www.cnblogs.com/shanjinghao/p/9152731.html
