bootstrap是一个前端框架，是人家写好的第三方框架，可以直接拿来使用，且是别人写好的规则，提高开发效率，里面有很多模板、表单、控件等等功能；
使用前准备:
去bootstrap官网下载 http://www.bootcss.com/
把这三个保留，css，js里面只保留min.css min.js 她们都是压缩过的 fonts全部完好无损得拿过来；
还有图标库去fontawesome里面找 里面有600多个图案，微信，微博，什么鬼都有；
以后开发都是按照文档里面的模板来用；
案例:信息收集卡
1 <!doctype html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> 9 <title>信息收集卡</title> 10 </head> 11 <body> 12 13 <div class="container"> 14 <div class="row"> 15 <div class="page-header"> 16 <h1>信息收集卡 17 <small>共三步</small> 18 </h1> 19 </div> 20 </div> 21 22 <div class="row"> 23 <div class="progress"> 24 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" 25 aria-valuemax="100" 26 style="width: 33%;"> 27 1/3 28 </div> 29 </div> 30 </div> 31 32 <div class="row"> 33 <div class="panel panel-primary"> 34 <div class="panel-heading">基本信息 35 <span class="glyphicon glyphicon-pushpin col-md-offset-11"></span> 36 </div> 37 38 <div class="panel-body"> 39 40 <form class="form-horizontal"> 41 <div class="form-group"> 42 <label for="exampleInputName1" class="col-sm-2 control-label">姓名</label> 43 <div class="col-sm-4"> 44 <input type="email" class="form-control" id="exampleInputName1" placeholder="姓名"> 45 </div> 46 </div> 47 48 <div class="form-group"> 49 <label for="exampleInputName3" class="col-sm-2 control-label">手机</label> 50 <div class="col-sm-4"> 51 <input type="password" class="form-control" id="exampleInputName3" placeholder="手机"> 52 </div> 53 </div> 54 55 <div class="form-group"> 56 <label for="exampleInputEmail3" class="col-sm-2 control-label">邮箱</label> 57 <div class="col-sm-4"> 58 <input type="password" class="form-control" id="exampleInputEmail3" placeholder="邮箱"> 59 </div> 60 </div> 61 <div class="form-group"> 62 <label for="inputPassword3" class="col-sm-2 control-label">密码</label> 63 <div class="col-sm-4"> 64 <input type="password" class="form-control" id="inputPassword3" placeholder="密码"> 65 </div> 66 </div> 67 <div class="form-group"> 68 <label for="exampleInputFile" class="col-sm-2 control-label">头像</label> 69 <div class="col-sm-4"> 70 <input type="file" id="exampleInputFile"> 71 <p class="help-block">只支持jpg、png、gif格式</p> 72 </div> 73 74 </div> 75 76 <div class="form-group"> 77 <label for="exampleInputFile" class="col-sm-2 control-label">属性</label> 78 <div class="col-sm-4"> 79 <div class="radio disabled"> 80 <label> 81 <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" 82 checked> 83 我是一个好人 84 </label> 85 </div> 86 <div class="radio disabled"> 87 <label> 88 <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 89 我是一个坏人 90 </label> 91 </div> 92 <div class="radio disabled"> 93 <label> 94 <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" 95 > 96 你不是人 97 </label> 98 </div> 99 </div> 100 </div> 101 102 103 <!--<div class="form-group">--> 104 <!--<label for="exampleInputName5" class="col-sm-2 control-label">密码</label>--> 105 <!--<div class="col-sm-10">--> 106 <!--<input type="password" class="form-control" id="exampleInputName5" placeholder="密码">--> 107 <!--</div>--> 108 <!--</div>--> 109 </form> 110 111 </div> 112 </div> 113 </div> 114 115 <div class="row"> 116 <div class="btn-group btn-group-justified" role="group" aria-label="..."> 117 118 <div class="btn-group-xm col-lg-offset-11" role="group"> 119 120 <button type="button" class="btn btn-success">下一步</button> 121 </div> 122 </div> 123 </div> 124 </div> 125 126 127 <script src="jquery-3.3.1.min.js"></script> 128 <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> 129 130 <script> 131 132 133 </script> 134 135 </body> 136 </html>