Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
中文bootstrap文档 -- 可以根据自己需求，选择组件进行组装，写出自己的网页。
下载地址在中文文档里面有，
下载目录结构：
1 bootstrap/ 2 ├── css/ 3 │ ├── bootstrap.css 4 │ ├── bootstrap.css.map 5 │ ├── bootstrap.min.css 6 │ ├── bootstrap.min.css.map 7 │ ├── bootstrap-theme.css 8 │ ├── bootstrap-theme.css.map 9 │ ├── bootstrap-theme.min.css 10 │ └── bootstrap-theme.min.css.map 11 ├── js/ 12 │ ├── bootstrap.js 13 │ └── bootstrap.min.js 14 └── fonts/ 15 ├── glyphicons-halflings-regular.eot 16 ├── glyphicons-halflings-regular.svg 17 ├── glyphicons-halflings-regular.ttf 18 ├── glyphicons-halflings-regular.woff 19 └── glyphicons-halflings-regular.woff2
一般的css样式的，使用bootstrap.min.css； js样式的使用bootstrap.min.js。
由于bootstrap的某些组件依赖jquery，所以在导入的时候，一定要把juqery文件导入进去。
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <title>登陆菜单</title> 8 <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> 9 <style> 10 body { 11 background-color: #eeeeee; 12 } 13 14 .row { 15 margin-top: 160px; 16 17 } 18 </style> 19 </head> 20 <body> 21 <div class="container"> 22 <form class="form_total form-horizontal col-sm-6 col-sm-offset-3 row"> 23 <div class="form-group has-feedback"> 24 <label for="inputEmail3" class="col-sm-4 control-label">用户名</label> 25 <div class="col-sm-6"> 26 <input type="text" class="form-control" id="inputEmail3" placeholder="用户名"> 27 <span class="glyphicon form-control-feedback" aria-hidden="true"></span> 28 </div> 29 </div> 30 <div class="form-group has-feedback"> 31 <label for="inputPassword3" class="col-sm-4 control-label">密码</label> 32 <div class="col-sm-6"> 33 <input type="password" class="form-control" id="inputPassword3" placeholder="密码"> 34 <span class="glyphicon form-control-feedback" aria-hidden="true"></span> 35 </div> 36 </div> 37 <div class="form-group"> 38 <div class="col-sm-offset-4 col-sm-10"> 39 <div class="checkbox"> 40 <label> 41 <input type="checkbox"> 记住我 42 </label> 43 </div> 44 </div> 45 </div> 46 <div class="form-group"> 47 <div class="col-sm-offset-4 col-sm-6"> 48 <button type="submit" class="btn btn-primary btn-block btn_submit">登陆</button> 49 </div> 50 </div> 51 </form> 52 53 </div> 54 <script src="jquery-3.2.1.min.js"></script> 55 <script> 56 var $form = $(‘.form-group:lt(2)‘); 57 $(‘.btn_submit‘).on(‘click‘, function () { 58 var flag = true; 59 $form.each(function () { 60 var $input = $(this).find(‘input‘); 61 if (! $input.val()) { 62 $(this).addClass(‘has-error‘); 63 $input.next().addClass(‘glyphicon-remove‘); 64 flag = false; 65 return false; 66 } else { 67 $(this).removeClass(‘has-error‘).addClass(‘has-success‘); 68 $input.next().removeClass(‘glyphicon-remove‘).addClass(‘glyphicon-ok‘) 69 } 70 }); 71 return flag 72 }) 73 74 </script> 75 </body> 76 </html>
bootstrapCdn ------- 又拍云
1 <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> 2 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 3 4 <!-- 可选的 Bootstrap 主题文件（一般不用引入） --> 5 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 6 7 <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 8 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
原文：http://www.cnblogs.com/wangyuanming/p/7875021.html
