bootstrap使用-插件篇

首先先了解这里一共有12中插件 这些插件可以一次性引入也可以分开引入 但在使用这些插件之前

jquery库是不可少的

可以通过设置data-api实现bootstrap插件的使用

可以使用

$(document).off(‘.data-api‘)的方式关闭插件

关闭某个插件

$(document).off(‘.alert.data-api‘)

注意在这里的每一个 插件基本都是可以通过javascript手动触发 以及有相应的配置参数和触发事件

模态框：

应该将模态框放在body下面作为直接孩子

使用方法：关键每部分 data-toggle="model" data-target="#myModel"用于点击弹出模态框 data-toggle 实现的效果 data-target 为操作的元素的id

其他的尾模态框的样式 可以根据需要添加bootstrap当中的或者自己添加样式

<!--模态框-->
      <div class="modal fade" id="mymodal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">

            </div>
            <div class="modal-footer">
              <button class="btn btn-default btn-sm">
                提交
              </button>
              <button class="btn btn-default btn-sm" data-dismiss="modal">
                &times;
              </button>
            </div>
          </div>
        </div>
      </div>
      <!--点击弹出模态框-->
      <button class="btn btn-sm btn-default " data-toggle="modal" data-target="#mymodal">注册</button>

这上面的额外属性我就不添加的

为modal-dialog添加modal-lg 可以设置大小

在modal上添加tabindex="-1"用于设定层级

删除fade可以禁止动画效果

在这里的modal我不讲如何使用ajax与后台交互 这里目标只是简单实现UI界面

下拉菜单

<div class="dropdown">
        <button class="btn btn-sm btn-default" data-toggle="dropdown">
          下拉菜单
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="">标题</a></li>
          <li><a href="">标题</a></li>
          <li><a href="">标题</a></li>
          <li><a href="">标题</a></li>
        </ul>
      </div>

滚动监听

滚动监听是根据滚动条所处的位置自动更新导航条

被监听的元素必须为相对定位 一般监听body

      <!--滚动监听-->
      <div data-spy="scroll" data-target="#tab">
          <ul class="nav nav-tabs">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
      </div>

当在删除添加元素的同时使用滚动监听的时候应该使用下面的js

$(‘[data-spy="scroll"]‘).each(function () {
  var $spy = $(this).scrollspy(‘refresh‘)
})

标签页的使用

<!--标签页的使用-->
      <ul class="nav nav-tabs">
        <li class="active"><a href="#test1" data-toggle="tab">test1</a></li>
        <li><a href="#test2" data-toggle="tab">test2</a></li>
        <li><a href="#test3" data-toggle="tab">test3</a></li>
        <li><a href="#test4" data-toggle="tab">test4</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="test1">1</div>
        <div class="tab-pane" id="test2">2</div>
        <div class="tab-pane" id="test3">3</div>
        <div class="tab-pane" id="test4">4</div>
      </div>

提示工具

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

 <script type="text/javascript">
$(function () {
  $(‘[data-toggle="tooltip"]‘).tooltip()
})
   </script>

上面重要属性data-placement控制位置 data-toggle为插件类型 title 显示的文字

弹出框

<!--弹出框的使用-->
<button class="btn btn-info btn-sm" data-placement="right" data-toggle="popover" data-container="body" data-content="这是一个弹出阿宽">弹出框</button>
$(‘[data-toggle="popover"]‘).popover();

弹出框跟提示工具有点类似 也需要js

原文地址：https://www.cnblogs.com/webcyh/p/11523411.html