Bootstrap

基本概要

   栅格系统
      1. row必须放到container和container-fluid里面
      2. 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
      
   
      列的样式  .col-xx（lg md sm xs）-数字（1~12）  
      
      container有一个padding是15px
      row有一个margin是-15px
      
      列是支持嵌套的
      
      列偏移： col-xx-offset-数字（1~12）
      
      列排序：  .col-md-pull-数字 .col-md-push-数字
      
      
   文本对齐类：
   
      - .text-left
      - .text-center
      - .text-right

   列右对齐:
     - .pull-right
      
   表单
      .form-group
      .form-inline
      .form-horizontal
       autocomplete="off"  //关闭每次的输入提示
       novalidate  //关闭自动教验
      

   表格
      .table
      .table-striped
      .table-bordered
      .table-hover
      .table-condensed
      
      响应式表格：
      <div class="table-responsive">  // table外面包裹一层div
        <table class="table">
         ...
        </table>
      </div
   
   按钮
      .btn
      .btn-default
      .btn-success
      .btn-warning
      .btn-danger
      
      .btn-lg
      .btn-sm
      .btn-xs
      
   
         
   快速浮动:
      - .pull-left
      - .pull-right
   
   清除样式：
      - .clearfix

css组件概要

   Bootstrap3居中处理：
      水平居中：
         - .center-block 不涉及到列的居中 本质上就是 margin: 0 auto 
         让那个标签居中就把它写在哪个标签的样式类中
         
         - 我们自定义的居中 在涉及到列的居中时使用
            .col-centered {
              float: none;
              margin: 0 auto;
            }
         - 文本类居中或者display: inline
            .text-center
            
      垂直居中：
         .vertical-center {
           display: flex;
           align-items: center;
         }
         
         
         用在父标签中，让子块级标签垂直居中
         
   Bootstrap组件：
      图标：
         span标签，里面加上样式类
         <span class="glyphicon glyphicon-search" aria-hidden="true"></span>

         
       下拉菜单：
            后面我们就要用到bootstrap.js --> 之前还要引用jQuery.js
            通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）。
            下拉菜单中添加标题 :<li class="dropdown-header">Dropdown header</li>
            分割线 :<li role="separator" class="divider"></li>
            禁用选项 : <li class="disabled"><a href="#">Disabled link</a></li>
      
      
      按钮组
         .btn-group
      
         .btn-toolbar
      
         尺寸
         
      分列式下拉菜单按钮
      
      
      .css 和.min.css的区别是：
         .min.css是压缩版的，用于生产环境的，因为它把多余的空格都去掉了，体积很小
         .css 是没有压缩的
         
         我们现在是开发阶段，用哪个都可以
         
      .min.js
      .js
         同上
         
         
      js文件我们通常放在body标签里面的最下面
      除非你的js代码就必须在文档加载之前运行，这个时候要放在head标签里面
      
         
   导航
   
      <!--导航区开始-->
      <ul class="nav nav-tabs nav-stacked" role="tablist">
        <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
      </ul>
      <!--导航区结束-->

      <!--面板区开始-->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">这里是主页的内容</div>
        <div role="tabpanel" class="tab-pane" id="profile">这里是简介页面的内容</div>
        <div role="tabpanel" class="tab-pane" id="messages">这里是消息页面的内容</div>
      </div>
      <!--面板区结束-->

   
      .nav-tabs      --> tab式
      .nav-pills       --> 胶囊式
      .nav-justified   --> 两端对齐
      
   导航条
   
      .navbar-btn
      .navbar-text
      .navbar-left .navbar-right  --> 在导航条里面用左右浮动的化需要使用这俩个
      .navbar-link
      
   **导航条不需要放在.container里面**
   
      .navbar-fixed-top            --> 固定在顶部
      如果使用了上面固定在顶部的样式，那么就需要给body设置padding
      body { padding-top: 70px; }

      
      .navbar-static-top           --> 静止在顶部
      
      .navbar-inverse              --> 反色
      
   面包屑导航/路径导航
      <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Library</a></li>
        <li class="active">Data</li>
      </ol>
      
   分页
      
   
   翻页
         

   标签
      .label 
      
   徽章
      微信未读消息
      个人中心通知的提示
      
   巨幕
      铺满整个屏幕
         <div class="jumbotron">
            <div class="container">
               <h1>Hello, world!</h1>
               <p>...</p>
               <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
            </div>
         </div>
         
   页头
   
   
   缩略图  --> 前女友的页面
   
   进度条
      应用场景：
         - 上传下载加载
         - 体现步骤进度
      
      <div class="progress">
        <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
         60%
        </div>
      </div>
      
      .progress-bar-striped 条纹状进度条      
      动起来
         .active 
         
      颜色
         .progress-bar-success
         .progress-bar-warning
         .progress-bar-info
         .progress-bar-danger

   媒体对象
      后面写项目会用到
      
      .media-left
      .media-body
      .media-right
      
      头像的位置：
         .默认
         .media-middle   --> 中间
         .media-bottom   --> 底部
      
   列表组
      外面的div加这个样式： .list-group
      里面的元素加这个样式: .list-group-item
   
   
   面板
   
      <div class="panel panel-default">
        <div class="panel-heading">
         <h3 class="panel-title">这里写标题</h3>
        </div>
        
        <div class="panel-body">
         这里面是内容
        </div>
        
        <div class="panel-footer">Panel footer</div>
      </div>
      
   Well

js插件概要


1. 模态框

   位置要放在body里面（body的直接子元素）
   
   
   弹出方式：
      1. 通过 data 属性
         data-toggle="modal" data-target="#myModal"
      2. 通过JS代码
         - $("#myModal").modal("show")  --> 显示出来
         - $("#myModal").modal("hide)   --> 隐藏
         
   模态框大小：(放在modal里面标签上的)
       <div class="modal-dialog modal-sm" role="document">
      .modal-lg
      .modal-sm
   
   
   动画效果：
      fade

   一个正经模态框：
      1. .modal-header
      2. .modal-body
      3. .modal-footer
      
   参数
      backdrop： true/false/'static'   --> 遮罩层的参数
      keyboard:  true/false            --> 键盘上的ESC按键
      
      
   
   事件
      显示之前
      显示完
      隐藏之前
      隐藏完
      
      $(document).ready(function () {
      $('#myModal').on('show.bs.modal', function (e) {
         // do something...
         alert("我让模态框显示出来，但是它还没来得及显示");
      });

       $('#myModal').on('shown.bs.modal', function (e) {
         // do something...
         alert("我让模态框显示出来，现在它已经显示出来了");
      })
      

font awesome
   http://fontawesome.io/

   i 标签 区别于Bootstrap自带图标的span标签

sweetalert:
   https://limonte.github.io/sweetalert2/
   
   引用css文件和JS文件之后
   
   swal("标题", "内容", "success")