我爱编程

Bootstrap 手册 07 - JS 组件篇

2017-08-06  本文已影响150人  EncyKe

1. 动画过渡 Transition

Bootstrap 对一些组件默认使用过渡动画效果，这种效果是由 CSS3 实现，故不支持 IE 6-8。

2. 模态弹窗 Modal

Bootstrap 模态弹窗通常有以下表现——

  • 点击某按钮后弹窗，弹窗内容为文件描述、图片等，也可带有按钮操作；

2.1. 弹窗结构

模态弹窗的真正内容都放置在 .modal-content 中，其主要设置了弹窗的边框、边距、背景色和阴影等样式。包括三个部分——

其中，.modal-footer 通常用来放置按钮，已对其包含的按钮做了一定的样式处理。

2.2. 弹窗尺寸

2.3. 弹窗动画

2.4. 弹窗触发

1) 通过属性触发弹窗

  1. 为触发按钮设置 [data-toggle="modal" data-target]；
  2. 其中 data-target 属性指定为模态弹窗 .modal 的 ID 或者 CSS 选择符；
  3. 若使用 a 元素作为触发模态弹窗的按钮，则可用 href 属性替代 data-target；
弹窗属性触发 data- 参数设置一览表

2) 通过 JS 触发弹窗

a. 属性设置
弹窗 JS 触发属性一览表 
$(function(){
    $('.btn').click(function () {
        $('#mymodal‘’).modal({
            keyboard: false
        });
    });
});
b. 参数设置
参数 使用方法 描述
toggle $('#mymodal').modal('toggle') 触发时，反转模态弹窗的状态。若模态弹窗显示，则关闭；反之则显示
show $('#mymodal').modal('show') 触发时，显示模态弹窗
hide $('#mymodal').modal('hide') 触发时，关闭模态弹窗
c. 事件设置
事件类型 描述
show.bs.modal 在 show 方法调用时立即触发（尚未显示之前）；如果单击了一个元素，那么该元素将作为事件的 relatedTarget 属性
shown.bs.modal 该事件在模态弹窗完全显示后（并且等 CSS 动画完成之后）触发；如果单击了一个元素，那么该元素将作为 relatedTarget 事件
hide.bs.modal 在 hide 方法调用时（但还未关闭隐藏）立即触发
hidden.bs.modal 该事件在模态弹窗完全关闭后（并且 CSS 动画完成之后）触发 
$('#myModal').on('hidden.bs.modal', 
    function (e) {
        // 处理代码...
    }
)

3. 下拉菜单 Dropdown

下拉菜单一般出现在导航条中。

3.1. 下拉菜单触发

1) 通过属性触发下拉菜单

2) 通过 JS 触发下拉菜单

$(function(){
  $('.dropdown-toggle').dropdown();
})

$('.dropdown-toggle').one('click',function(){
  $(this).dropdown('toggle');
})

4. 滚动监视 Scrollspy

  1. 当用户鼠标滚动时，滚动条的位置会自动更新导航条中相应的导航项；
  2. 用户拖动滚动条，当滚动到特定板块上时，上方相应的导航项就会高亮显示；

4.1. 滚动监视触发

1) 通过属性触发滚动监视

  1. 导航区设置：ul.nav#nav>(li.active>a[href="#id0"])+(li>a[href="#id1"])+...；
  2. 监控区设置：[data-target="#nav" data-spy="scroll" data-offset="60"]>#id0+#id1+...；
  3. 监控区 data-target 属性需与导航区 .nav 的 ID 一致，监控区子项的 ID 则需与导航区子项中的 href 属性一一对应；
  4. 定义监控区样式，设置容器以产生垂直滚动条：
.scrollspy {
  height: 500px;
  font-size: 20px;
  overflow: auto;
}

2) 通过 JS 触发滚动监视

$(function(){
  $('#scrollspy').scrollspy({
    target: '#nav'
  });
})

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

需要注意的是，该方法只对属性触发有效。

5. 选项卡 Tab

5.1. 选项卡触发

1) 通过属性触发选项卡

2) 通过 JS 触发选项卡

在选项的单击事件中调用 tab('show') 方法，显示对应的标签面板内容。（此方法不再需要 data-toggle="tab" 或 data-toggle="pill" 自定义属性）——

$(function(){
  $('#myTab a').click(function (ev) {
    ev.preventDefault();
    $(this).tab('show');
  });
})

6. 提示框 Tooltip

6.1. 提示框触发

Bootstrap 提示框不能直接由自定义属性触发，需要通过 JS 触发。

1) 设置提示框属性

  1. 常用 a 或 button：[data-toggle="tooltip"]；
  2. 设置 data-original-title 或 title 用于存放提示信息（若同时设置，则 data-original-title 优先级高于 title）；
  3. 设置 data-placement 控制提示信息框的四种位置：top、right、bottom 和 left；
提示框属性触发 data- 参数设置一览表

2) 通过 JS 触发提示框

$(function(){
  $('[data-toggle="tooltip"]').tooltip();
});

$(function(){
  $('#myTooltip').tooltip({
    title: '我是一个提示框，我在顶部出现',
    placement: 'top'
  });
});
弹窗 JS 触发属性一览表

7. 弹出框 Popover

Bootstrap 弹出框外表与提示框差不多，不同在于：弹出框除了有标题
title 以外还增加了内容 content 部分；样式风格上弹出框有边框、圆角、背景、阴影以及三角形等样式；提示框的默认触发事件是 hover 和 focus，而弹出框是 click。

7.1. 弹出框触发

与提示框一样，弹出框也只能通过 JS 触发。

1) 设置弹出框属性

  1. 常用 a 或 button：[data-toggle="popover" data-original-title="提示信息" data-placement=""]；
  2. 比提示框多出 data-content="提示内容" 属性；
弹出框属性触发 data- 参数设置一览表

2) 通过 JS 触发弹出框

$(function(){
  $('[data-toggle="popover"]').popover();
});

$(function(){
    $('#myPopover').popover({
        title:"我是弹出框的标题",
        content:"我是弹出框的内容",
        placement:"top"
    });
});

8. 警告框 Alert

Bootstrap 警告框插件是在警示框组件的基础上添加单击 X 能关闭警告框的功能。

8.1. 通过属性关闭警告框

<div class="alert alert-success" role="alert">
  <button class="close" data-dismiss="alert" type="button" data-target>×</button>
  <p>恭喜您操作成功！</p>
</div>

8.2. 通过 JS 关闭警告框

$(function(){
  $('#close').on('click', function(){
    $(this).alert('close');
  });
});

9. 按钮 Button

9.1. 按钮加载状态

a) 通过属性提供单击加载状态

<button
  class="btn btn-primary"
  id="loaddingBtn"
  data-loading-text="正在加载中,请稍等..."
  type="button" >
    加载
</button>

b) 通过 JS 提供单击加载状态

$(function(){
  $('#loaddingBtn').click(function () {
    $(this).button('loading');
  });
});

9.2. 单选按钮

9.3. 复选按钮

9.4. 按钮状态切换

a) 通过属性切换按钮状态

b) 通过 JS 切换按钮状态

$('#myButton').button('toggle');

$('#myButton').button('reset');

$('#myButton').button('任意字符参数名');

可替换 data-任意字符参数名-text 的属性值为「按钮上显示的文本值」。

10. 折叠 Collapse

每个标题对应一个内容，这两个部分组合起来称为一个 panel 面板，多个 panel 构成 panel-group 面板组，即手风琴折叠的结构。

10.1. 声明式触发

11. 图片轮播 Carousel

一个轮播图片主要包括三个部分——

  • 轮播图片
  • 轮播图片计数器
  • 轮播图片控制器
<div class="carousel-caption">
  <h3>图片标题</h3>
  <p>描述内容...</p>
</div>

<a class="left carousel-control" href="" >
  <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="">
  <span class="glyphicon glyphicon-chevron-right"></span>
</a>

11.2. 通过属性触发图片轮播

属性名称 类型 默认值 描述
data-interval number 5000 幻灯片轮换的等待时间（毫秒）。如果为false,轮播将不会自动开始循环
data-pause string hover 默认鼠标悬停留在幻灯片区域即停止播放，离开即开始播放
data-wrap 布尔值 true 轮播是否持续循环 
<div id="id" class="carousel slide" data-ride="carousel">
  <!-- .carousel 层添加 slide 样式可使图片切换有平滑感 -->
  <!-- 设置图片轮播的顺序 -->
  <ol class="carousel-indicators">
    <li class="active" data-target="#slidershow" data-slide-to="0"></li>
    <li data-target="#slidershow" data-slide-to="1"></li>
    <li data-target="#slidershow" data-slide-to="2"></li>
    <li data-target="#slidershow" data-slide-to="3"></li>
    <li data-target="#slidershow" data-slide-to="4"></li>
    <li data-target="#slidershow" data-slide-to="5"></li>
  </ol>
    
  <!-- 设置轮播图片 -->
  <div class="carousel-inner">
    ...
  </div>
    
  <!-- 设置轮播图片控制器 -->
  <a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

11.3. 通过 JS 触发图片轮播

$('.carousel/#id').carousel({
  ...// 参数
});
属性名称 类型 默认值 描述
interval number 5000 幻灯片轮换的等待时间（毫秒）。如果为false,轮播将不会自动开始循环
pause string hover 默认鼠标悬停留在幻灯片区域即停止播放，离开即开始播放
wrap 布尔值 true 轮播是否持续循环

12. 固定定位 Affix

Affix 的主要功能是使某个需要固定的元素在浏览器窗口中固定（元素带有 affix 类名固定）和不固定（元素不带有 affix 类名）的效果。

Affix 效果常见的有以下三种——

  • 顶部固定
  • 侧边栏固定
  • 底部固定

12.1. 通过属性触发固定定位

<body data-spy="scroll" data-target="sidebarMenu">

13. 自定义配置

Bootstrap 框架自定义配置主要包括三个部分——

  • Bootstrap 组件
  • Bootstrap 插件
  • Bootstrap 的 LESS 版本变量设置

组件设置提供了公共样式 Common CSS，U I组件 Components 和 JS 组件 JavaScript components 三个部分。

上一篇 下一篇

猜你喜欢

热点阅读