Bootstrap

介绍

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://fontawesome.io/

中文官网： 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>

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片。

模板

http://metronic.kp7.cn/ 模板网站

居中

文本类或行内标签居中

  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>

flex布局介绍