Bootstrap学习笔记--插件之Carousel插件轮播图片,模态插件,提示插件,滚动监听插件,Affix插件-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

Bootstrap学习笔记--插件之Carousel插件轮播图片,模态插件,提示插件,滚动监听插件,Affix插件

简介: 轮播插件: Carousel插件: 轮播插件。 是一个通过元素循环的组件,如旋转木马(幻灯片) 插件可以单独包含(使用Bootstrap“carousel.js”文件),或者一次全部使用(使用“bootstrap.js”或“bootstrap.min.js”)。

轮播插件:

Carousel插件: 轮播插件。
是一个通过元素循环的组件,如旋转木马(幻灯片)

插件可以单独包含(使用Bootstrap“carousel.js”文件),或者一次全部使用(使用“bootstrap.js”或“bootstrap.min.js”)。

注意:
在Internet Explorer 9及更早版本中不被正确支持(因为它们使用CSS3转换和动画来实现幻灯片效果

举例:

 <script src="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

实现图片轮播:
源码:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>

<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="1.jpg" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="2.jpg" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="3.jpg" alt="Flower" width="460" height="345">
      </div>

    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>

效果图:
这里写图片描述

最外面的<div>:

传送带要求使用id="myCarousel"传送带控件的id(在这种情况下)才能正常工作。

的class="carousel" 规定,这<div>包含传送带。

该.slide 课程添加了一个CSS过渡和动画效果,这使得项目在显示新项目时可以滑动。如果你不想要这个效果,请省略这个类。

该data-ride="carousel" 属性告诉Bootstrap在页面加载时立即开始为轮播制作动画。

“指标”部分:

指标是每张幻灯片底部的小点(表示转盘中有多少张幻灯片,以及用户当前正在查看哪张幻灯片)。

这些指标在具有等级的有序列表中指定.carousel-indicators。

该data-target属性指向传送带的ID。

data-slide-to当点击特定的点时,该属性指定要去哪个幻灯片。

“幻灯片包装”部分:

幻灯片在<div>课堂上指定.carousel-inner。

每个幻灯片的内容都是<div>用class 来定义的.item。这可以是文字或图像。

该.active课程需要添加到其中一张幻灯片中。否则,传送带将不可见。

“左右控件”部分:

此代码添加了“左”和“右”按钮,允许用户手动在幻灯片之间来回切换。

该data-slide属性接受关键字,"prev""next"相对于其当前位置改变幻灯片位置。

添加<div class="carousel-caption"><div class="item">
还可以给图片添加标题和说明文字哦

源码:

<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="1.jpg" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>

      <div class="item">
        <img src="2.jpg" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>

      <div class="item">
        <img src="3.jpg" alt="Flower" width="460" height="345">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beatiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

效果图:
这里写图片描述


模态插件:

是显示在当前页面顶部的对话框/弹出窗口
有三部分组成:
1. “触发器”部分:要触发模式窗口,您需要使用按钮或链接
2. “Modal”部分
3. “Modal内容”部分

举个栗子:
单击按钮顶部弹出模式窗口
这里写图片描述

源码:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

</body>
</html>

分析:

“触发器”部分:

要触发模式窗口,您需要使用按钮或链接。

然后包含两个data- *属性:

data-toggle="modal" 打开模式窗口
data-target="#myModal" 指向模态的id
“Modal”部分:

<div>模态的父级必须具有与用于触发模态的数据目标属性(“myModal”)的值相同的ID。

本.modal类标识的内容<div>为模式,并带来聚焦到它。

这个.fade类增加了一种淡入淡出模式的过渡效果。如果你不想要这个效果,请删除这个类。

该属性role="dialog"改善了使用屏幕阅读器的人的可访问性

的.modal-dialog类设置的模态的适当的宽度和幅度。

“Modal内容”部分:

在<div>与class="modal-content“风格模式(边框,背景颜色等)。这里面<div>,添加模式的标题,正文和页脚。

在.modal-header类用于定义样式的模态的头。在<button>头内有一个data-dismiss="modal",如果你点击它,其封闭模式的属性。的.close类样式的关闭按钮,和.modal-title类样式以适当的行高的报头。

在.modal-body类用于定义样式的模态的身体。在这里添加任何HTML标记; 段落,图片,视频等

在.modal-footer类用于定义样式为模态的脚注。请注意,此区域默认情况下是右对齐的。

模态大小

通过添加.modal-sm 小模态的类或.modal-lg大模态的类来 更改模态的大小。

将大小类添加到<div>具有class 的元素.modal-dialog:

小模式窗口:

<div class="modal-dialog modal-sm">

大模式窗口:

<div class="modal-dialog modal-lg">

提示插件:data-toggle="tooltip"将该 属性添加到元素

提示插件是用户将鼠标指针移到元素上时出现的小型弹出框:
使用该title属性来指定应在工具提示内显示的文本
tooltip()指定可以弹出小黑框框的元素

注意:默认情况下,工具提示将出现在元素的顶部。

举个栗子:

<div class="container">
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>
<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});
</script>

当你鼠标有移动到该超链接位置时,就会在连接上方弹出一个黑色小框框显示 Hooray!

提示框位置:
data-placement属性可以在元素的顶部,底部,左侧或右侧设置工具提示的位置

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>

“auto”的data-placement属性,这会让浏览器决定工具提示的位置。


Popover插件:

Popover插件与工具提示类似;
它是一个弹出框,当用户点击一个元素时出现。区别在于popover可以包含更多内容。
再次单击元素时,弹出窗口会关闭,单击其他地方无效

Popovers必须用jQuery初始化:选择指定的元素并调用popover()方法。
源码:

<div class="container">
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>
<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});
</script>

title表示标题
data-content表示内容

效果图:
这里写图片描述

定位弹出:

默认情况下,弹出窗口将显示在元素的右侧
data-placement属性来设置元素顶部,底部,左侧或右侧的弹出位置

<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>

注意:还可以使用值为“auto”的data-placement属性,这将允许浏览器确定弹出窗口的位置。

data-trigger="focus"
默认情况下,当您再次单击元素时,弹出窗口会关闭。
但是,您可以使用data-trigger="focus"在单元外部单击时关闭弹出窗口

举例:

<div class="container">
<a href="#" data-toggle="popover" title="Popover Header" data-trigger="focus" data-content="Some content inside the popover">Toggle popover</a>
</div>
<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});
</script>

data-trigger=“hover”
在将鼠标指针移到元素上时显示弹出窗口
离开时 退出弹出窗口
举例:

<div class="container">
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
</div>
<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});
</script>

滚动监听(Scrollspy)插件:(只做简单介绍)

具体参考:https://www.quanzhanketang.com/bootstrap/bootstrap_scrollspy.html

即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class。

向您想要监听的元素(通常是 body)添加 data-spy=”scroll”。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作,您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。
模板:

<body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
    <ul class="nav nav-tabs">
        ...
    </ul>
</div>
...
</body>

举例:

<body>

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
    <div class="container-fluid"> 
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" 
                    data-target=".bs-js-navbar-scrollspy">
                <span class="sr-only">11111111</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">2222222222</a>
        </div>
        <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
            <ul class="nav navbar-nav">
                <li><a href="#ios">iOS</a></li>
                <li><a href="#svn">SVN</a></li>
                <li class="dropdown">
                    <a href="#" id="navbarDrop1" class="dropdown-toggle" 
                       data-toggle="dropdown">Java
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" role="menu" 
                        aria-labelledby="navbarDrop1">
                        <li><a href="#jmeter" tabindex="-1">jmeter</a></li>
                        <li><a href="#ejb" tabindex="-1">ejb</a></li>
                        <li class="divider"></li>
                        <li><a href="#spring" tabindex="-1">spring</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div> 
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" 
     style="height:200px;overflow:auto; position: relative;">
    <h4 id="ios">iOS</h4>
    <p>aaaaaa
    </p>
    <h4 id="svn">SVN</h4>
    <p>bbbbbbbbbbbb
    </p>
    <h4 id="jmeter">jMeter</h4>
    <p>ccccccccccccccc
    </p>
    <h4 id="ejb">EJB</h4>
    <p>ddddddddddddddd
    </p>
    <h4 id="spring">Spring</h4>
    <p>eeeeeee
    </p>
    <p>ffffffff
    </p>
</div>

</body>
添加data-spy="scroll"到应该用作可滚动区域的<body>元素(通常这是元素)。

然后添加该data-target属性的id或导航栏的类名称(.navbar)的值。这是为了确保导航栏与可滚动区域连接。

请注意,可滚动元素必须与导航栏列表项(<div id="section1">匹配<a href="#section1">)内的链接的ID 相匹配。

可选data-offset属性指定在计算滚动位置时从顶部偏移的像素数。当你感觉到在跳转到可滚动元素时,导航栏内的链接过早或过早地改变活动状态时,这很有用。默认值是10像素。

效果图:
这里写图片描述


Affix插件:(简单理解)

具体的:https://www.quanzhanketang.com/bootstrap/bootstrap_affix.html
允许将元素粘贴(锁定)到页面上的某个区域。这通常与导航菜单或社交图标按钮一起使用,以便在页面上下滚动时使其“粘”在特定区域。

显示了如何创建一个水平粘贴的导航菜单:

如图 下拉网页 导航栏还存在

这里写图片描述

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">

源码:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
  /* Note: Try to remove the following lines to see the effect of CSS positioning */
  .affix {
      top: 0;
      width: 100%;
  }

  .affix + .container-fluid {
      padding-top: 70px;
  }
  </style>
</head>
<body>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</nav>

<div class="container-fluid" style="height:1000px">
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
  <h1>Some text to enable scrolling</h1>
</div>

</body>
</html>

显示如何创建垂直粘贴的导航菜单:
源码:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
  /* Note: Try to remove the following lines to see the effect of CSS positioning */
  .affix {
      top: 20px;
  }
  </style>
</head>
<body>

<div class="container">
  <div class="row">
    <nav class="col-sm-3">
      <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
        <li class="active"><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
      </ul>
    </nav>
    <div class="col-sm-9">   
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
    </div>
  </div>
</div>

</body>
</html>                                     
示例解释
添加data-spy="affix"到你想添加的元素。

或者,添加该data-offset-top|bottom属性以计算滚动的位置。

怎么运行的
词缀插件切换三者类:.affix.affix-top,和 .affix-bottom。每个班级代表一个特定的州。您必须添加CSS属性来处理实际职位,除了position:fixed 在.affix课程中。

该插件添加.affix-top或.affix-bottom类以指示该元素位于其最上方或最下方的位置。此时不需要使用CSS定位。

通过粘贴元素滚动会触发实际粘贴 - 这是插件用类(集合)代替.affix-top或.affix-bottom类的地方 。此时,您必须添加CSS 或属性以在页面中放置加贴的元素。.affixposition:fixedtopbottom

如果定义了底部偏移量,则滚动它将替换.affix 该类.affix-bottom。由于偏移是可选的,因此设置偏移需要您设置适当的CSS。在这种情况下,position:absolute必要时添加。
在上面的第一个示例中,.affix当我们从顶部滚动197个像素时,Affix插件将类(position:fixed)添加到<nav>元素。如果你打开这个例子,你也会看到我们top为这个.affix类添加了一个值为0 的CSS 属性。这是为了确保导航栏始终保持在页面的顶部,当我们从顶部滚动197像素时。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章