Bootstrap学习笔记（四）插件

超、凢脫俗 2022-04-06 13:01 250阅读 0赞

小知识点：

盲人、智力低下、行动障碍等H5标签中有两类属性与“无障碍阅读”相关：

(1)<ANY  role="">       <b role="button"></b>       VDA

(2)<ANY  aria-\*="">

1、插件——概述

Bootstrap基于jQuery提供了十几个插件函数（类似于jQueryUI插件库），每个插件对应一个.js文件，可以单独引用，也可以整体引用(bootstrap.js)。

调用上述十几个插件可以用两种格式：

(1)传统的JS方式调用：  $(...).dropdown();   $().tab(...);

(2)使用data-\*扩展属性方式调用：  <a  data-toggle="dropdown">   主

2、插件——下拉菜单

(1)$().dropdown( );

(2)<a data-toggle="dropdown">

<div style="position: relative">  
<a data-toggle="dropdown" href="\#">Products<span class="caret"></span></a>  
<ul class="dropdown-menu">  
  <li><a href="\#">TV</a></li>  
  <li><a href="\#">Camera</a></li>  
  <li><a href="\#">Computer</a></li>  
  <li class="divider"></li>  
  <li><a href="\#">MilkPowder</a></li>  
  <li><a href="\#">BabyClothes</a></li>  
</ul>  
</div>

3、插件——标签页(tab)

(1) $().tab();

(2) <a data-toggle="tab">

<ul class="nav nav-tabs">  
  <li><a data-toggle="tab" href="\#p1">十元套餐</a></li>  
  <li class="active"><a data-toggle="tab" href="\#p2">二十元套餐</a></li>  
  <li><a data-toggle="tab" href="\#p3">三十元套餐</a></li>  
</ul>  
  
<div class="tab-content">  
  <div id="p1" class="fade tab-pane">十元套餐详情：</div>  
  <div id="p2" class="fade in tab-pane active">二十元套餐详情：</div>  
  <div id="p3" class="fade tab-pane">三十元套餐详情：</div>  
</div>

4、插件——Bootstrap提供的弹出框

(1)工具提示框(tooltip)    data-toggle="tooltip"

(2)弹出框(popover) data-toggle="popover"

(3)警告框(alert) —— 小重点

xxxx

</div>

例：

<div class="alert alert-danger alert-dismissible fade in">   **

<p>

警告：没有更多的消息了。

</p>

</div>

(4)模态对话框(modal) —— 小重点

模态框定义：在父窗体中弹出一个子窗体，子窗体若不关闭，父窗体就无法获得焦点，同时父子窗体间还可以传递数据。window.alert()/confirm()/prompt()就是典型例子。模态框必需的结构：

</div>

例：

<a class="btn btn-success" href="\#mymodal1" data-toggle="modal">LOGIN</a>

</div>

a与其他元素不同的引用

1) <a href="\#模态框ID" data-toggle="modal">

2) <button data-toggle="modal" data-target="\#模态框ID">

例2：模态框中插入表单

<h3 class="modal-title">User Register</h3>

</div>

</div>

</div>

</form>

</div>

</div>

5、插件——折叠效果(collapse)

触发一个折叠效果：

1) <a href="\#折叠元素ID" data-toggle="collapse">

2) <button data-toggle="collapse" data-target="\#折叠元素ID">

</div>

<button class="btn btn-info" type="button" data-toggle="collapse" data-target="\#my-collapse">BTN触发折叠效果</button>

<div id="my-collapse" class="collapse in">  
  <div class="alert alert-success">  
    Lorem ipsum dolor sit amet, conseconsectetur adipisicing elit. Delectus dolorem facilis inventore maxime minima  
    nisi perspiciatis repudiandae rerum unde veniam. Alias autem fugiat impedit odio officia similique soluta? Error,  
    sit!eat, q Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque cum doloribus eos, eum explicabo harum  
    id, ipsum maiores placeat possimus quasi quibusdam quisquam repellendus repudiandae similique veniam vero  
    voluptates voluptatibus.uo rec Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto commodi  
  </div>  
</div>

折叠组件的两个扩展用途：

(1)Accordion（手风琴）

(2)响应式导航条在手机屏幕中的效果

面板

<h3 class="panel-title">这里是标题</h3>

</div>

maxime minima non quam quod. Architecto odio ratione saepe!t v Lorem ipsum dolor sit amet, consectetur adipisicing

elit. A ad deserunt, doloribus, eveniet, fugiat id laboriosam laudantium magnam nam neque officia quaerat quasi

quis sunt tempora velit vitae voluptas voluptatum.ero, voluptate.

</div>

这里是尾部

</div>

手风琴：

<a data-parent="\#my-accordion" data-toggle="collapse" href="\#hlm">《红楼梦》简介</a>**

</h3>

</div>

Lorem ipsum dolor , rem repudiandae. Aspernatur, eius.li Lorem ipsum dolor sit amet, consectetur adipisicing

elit. Animi culpa cupiditate debitis deleniti repellendus, similique sit totam voluptas. Aliquid consectetur

laboriosam maxime minima non quam quod. Architecto odio ratione

</div>

</h3>

</div>

Lorem ipsum dolor , rem repudiandae. Aspernatur, eius.li Lorem ipsum dolor sit amet, consectetur adipisicing

elit. Animi culpa cupiditate debitis deleniti repellendus, similique sit totam voluptas. Aliquid consectetur

laboriosam maxime minima non quam quod. Architecto odio ratione

</div>

6、插件——轮播广告(carousel)（不常用，因为有局限性）

本身结构较复杂，编写时只需要记住根class:  .carousel

<img>

</div>

7、插件——附加导航（Affix）

<div data-spy="affix" data-offset-top="100">  监听固定定位， 设置页面向下100px后为固定定位

</div>

8、插件——滚动监听（scrollspy）——了解

随着页面内容的滚动，某个导航中的项目，会自动的更改.active位置。

实现思路：

1.  页面中必须首先有一个导航菜单(.nav)——其中可以定义一个菜单项为.active
2.  导航菜单中的超链接的href属性值必须和页面中的某个锚点名一样
3.  为页面添加滚动事件的监听函数

body.οnscrοll= function()\{

if(body滚动的距离 === 某个锚点距离顶端的距离)\{

此锚点对应的超链接的父元素li添加.active；

例：

<h1>jQuery插件——滚动监听(scrollspy)</h1>

<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur culpa labore porro quae repellendus? Atque consequuntur culpa delectus dolorum, eos expedita facere facili Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, dolorum fugit inventore nobis provident quasi quibusdam quidem quo? A adipisci cumque deserunt facere fuga impedit itaque laborum nihil non rem.s hi Lorem ipsum dolor sit amet, </p>

<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur culpa labore porro quae repellendus? Atque consene!si re Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam autem culpa dicta distinctio .</p>

</div>

</ul>

</div>