day59---前端之Bootstrap框架二

1. Bootstrap组件

Glyphicons 字体图标

按钮组

按钮式下拉菜单

输入框组

导航

导航条

路径导航

分页

标签

徽章

巨幕

页头

缩略图

警告框

进度条

媒体对象

列表组

面版

具有响应式特性的嵌入内容

Well效果

2. Bootstrap常用插件

模态框

• 模态框的HTML代码放置的位置：务必将模态框的HTML代码放在文档的最高层级内(也就是说，尽量作为body标签的直接子元素)，以避免其他组件影响模态框的展现或功能

• HTML代码

    <!-- 触发模态框的按钮 -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Launch demo modal
    </button>
    
    <!-- 模态框 -->
    <div class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" >Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

• 注意：

  • 通过为模态框设置.bs-example-modal-lg和.bs-example-modal-sm来控制模态框的大小

  • 通过 .fade类来控制模态框弹出时的动画效果(淡入淡出效果)

  • 通过在.modal-bodydiv中设置.row可以使用Bootstrap的栅格系统

• 调用方式：

  • 通过data属性：通过在一个触发弹出模态框的元素上添加data-toggle="modal"属性，然后设置data-target="#foo"属性或href="#foo"属性，用来指向被控制的模态框

      <button type="button" data-toggle="modal" data-target="#myModal">显示模态框</button>
  

  • 通过js代码：使用.modal方法，show参数为显示，hide参数为隐藏

      $(\'#myModal\').modal("show");  // 显示
      $(\'#myModal\').modal("hide")   // 隐藏
  

• 常用参数：

  • backdrop：默认值为true，可选值( true/false/"static")，false表示有没有遮罩层，\'static\'表示点击遮罩层不关闭模态框

  • keyboard：默认值为true，可选值( true/false)，键盘上的 esc 键被按下时关闭模态框

  • show：默认值为true，可选值( true/false)，模态框初始化之后就立即显示出来

• 参数使用方法：

    $(\'#myModal\').modal({
        backdrop: "static",
        keyboard: false
    })

图片轮播

• HTML代码

    <div  class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>
    
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        ...
      </div>
    
      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

• 为图片添加介绍信息

    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        <h3>...</h3>
        <p>...</p>
      </div>
    </div>

• 设置间隔时间为2秒(默认5秒)

    $(\'.carousel\').carousel({
      interval: 2000
    })

FontAwesome字体

• http://fontawesome.io/

• https://github.com/FortAwesome/Font-Awesome

• http://fontawesome.io/examples/

弹框(SweetAlert系列)

• https://github.com/t4t5/sweetalert

• https://github.com/sweetalert2/sweetalert2/wiki/Migration-from-SweetAlert-to-SweetAlert2

• https://github.com/sweetalert2/sweetalert2

Toastr通知

• http://codeseven.github.io/toastr/

• https://github.com/CodeSeven/toastr

• http://codeseven.github.io/toastr/demo.html

管理后台模板

http://metronic.kp7.cn/

3. Bootstrap实例

参考：http://v3.bootcss.com/getting-started/#examples

4. jQuery实时监听input输入值变化

    <!DOCTYPE html>
    <html >
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery实时获取input框的值</title>
        <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
    </head>
    <body>
    <input type="text" >
    <script src="../day58/jquery-3.2.1.min.js"></script>
    <script>
        $("#i1").on("input propertychange", function () {
            console.log($(this).val());
        })
        // oninput是HTML5的标准事件能够检测textarea,input:text,input:password和input:search这几个元素的内容变化，在内容修改后立即被触发，不像onchange事件需要失去焦点才触发oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代使用jQuery库的话直接使用on同时绑定这两个事件即可
    </script>
    </body>
    </html>