介绍
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>
使用cdn加速
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>
前段插件
注意：
- 不是bootstarp的插件。
- 使用之前一定要引入对应的文件
FontAwesome(字体图标)
与bootstrap组件中，字体图标不同的是， fontAwesome提供了更多，更丰富的样式。它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。
中文官网： http://www.fontawesome.com.cn/
使用方式：http://www.fontawesome.com.cn/get-started/
SweetAlert系列（alert弹出框美化）
SweetAlert 与 SweetAlert2 是两个人编写的，所以在用法上可以有些不一样。
中文可以在这个网址搜索这两个插件的具体用法： http://www.htmleaf.com/ --> jQuery之家
Toastr通知插件
http://www.jq22.com/jquery-info476 可以查看具体用法
jQueryLazyload懒加载
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"> 7 <title>懒加载示例</title> 8 </head> 9 <body> 10 <div> 11 <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div> 12 ... 13 <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div> 14 </div> 15 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 16 <script src="jquery.lazyload.min.js"></script> 17 <script> 18 $("img.lazy").lazyload({ 19 effect: "fadeIn", 20 event: "click" 21 }) 22 </script> 23 </body> 24 </html>
模板
居中
文本类或行内标签居中
1 <div class="text-center"> 2 <p>这里是一段文本。</p> 3 </div>
水平居中一个col-*的div
1. 使用 offset
1 <div class="container"> 2 <div class="row"> 3 <div class="col-md-4 col-md-offset-4" style="border: 1px solid red">这是一个column div。</div> 4 </div> 5 </div>
2. 使用自定义样式
1 // 自定义 css 2 .col-centered { 3 float: none; 4 margin: 0 auto; 5 }
1 <div class="container"> 2 <div class="row"> 3 <div class="col-centered col-md-4" style="border: 1px solid red">这是一个column div。</div> 4 </div> 5 </div>
Bootstrap3里面有个.center-block样式类，可以用于不涉及float标签的水平居中。
1 <div class="container"> 2 <div class="center-block" style="border: 1px solid red">一般水平居中</div> 3 </div>
Bootstrap3.0.1版本新添加的.center-block样式类其实就是我们之前经常用到的margin: 0 auto。
Bootstrap4中：
text-center还是用来水平居中display:inline的元素mx-auto取代center-block用来水平居中display:block的元素offset-*或mx-auto用来水平居中栅格系统的列元素
来自stack overflow Bootstrap3水平居中的回答
垂直居中
1 // css 2 .vertical-align { 3 display: flex; 4 align-items: center; 5 }
1 <div style="height: 200px;border: 1px solid black" class="vertical-align"> 2 <div style=" 100px;height: 100px;background-color: red"></div> 3 </div>