Bootstrap学习笔记4

于 2022-03-02 22:28:53 发布
阅读量1k 收藏
点赞数
分类专栏： 学习笔记 文章标签： bootstrap 学习 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52476758/article/details/123242067
版权

1. 下拉菜单与滚动监视器

1.1 下拉菜单
1.1.1 属性声明式方法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉菜单--属性声明式方法（一）</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>示例1</h3>
<div class="navbar navbar-default" id="navmenu">
    <a href="##" class="navbar-brand">W3cplus</a>
    <ul class="nav navbar-nav">
		<li class="dropdown">
			<a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
			<ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
				<li role="presentation"><a href="##">CSS3</a></li>
				<li role="presentation"><a href="##">HTML5</a></li>
				<li role="presentation"><a href="##">Sass</a></li>
			</ul>
		</li>
		<li><a href="##">前端论坛</a></li>
		<li><a href="##">关于我们</a></li>
	</ul>
</div>

<h3>示例2</h3>
<ul class="nav nav-pills">
    <li class="dropdown">
		<a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
		<ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
			<li role="presentation"><a href="##">CSS3</a></li>
			<li role="presentation"><a href="##">HTML5</a></li>
			<li role="presentation"><a href="##">Sass</a></li>
		</ul>
	</li>
	<li class="active"><a href="##">前端论坛</a></li>
	<li><a href="##">关于我们</a></li>
</ul>
<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>
1.1.2 JavaScript触发方法
<ul class="nav nav-pills">
    <li class="dropdown">
        <a href="##"  class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
            <li role="presentation"><a href="##">CSS3</a></li>
            <li role="presentation"><a href="##">HTML5</a></li>
            <li role="presentation"><a href="##">Sass</a></li>
        </ul>
    </li>
    <li class="active"><a href="##">前端论坛</a></li>
    <li><a href="##">关于我们</a></li>
</ul>

​ 使用JavaScript调用dropdown()方法后，单击激活按钮，会弹出下拉菜单，再次单击的时候会收起下拉菜单

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

​ 还可以使用参数“toggle”。当下拉菜单隐藏时，调用dropdown(“toggle”)方法可以显示下拉菜单，反之，如果下拉菜单显示时，调用dropdown(“toggle”)方法可以让下拉菜单隐藏

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

​ 不过使用该参数，每次单击都要两次toggle，就会一直是一个不变的状态。所以，一般情况下，使用示例中不带参数的方法。就算你需要使用参数“toggle”，也建议使用jQuery的one方法

$(".dropdown-toggle").one("click",function(){
    $(this).dropdown("toggle");
})
1.2 滚动监视器

表现形式：

  1. 当用户鼠标滚动时，滚动条的位置会自动更新导航条中相应的导航项
  2. 用户拖动滚动条，当滚动到@mdo时，上面的@mdo导航项就会高亮显示
1.2.1 滚动监控器的设计

  1. 第一步：使用滚动监控器，首要的条件是在页面中加载对应的插件

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  2. 第二步：设计一个带有下拉菜单的导航条。分别为导航条和下拉菜单项定义一个锚点链接，锚点分别为“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同时为导航条定义一个id值“navbar-menu”（id名称可自由定义），方便滚动监控

  3. 第三步：设计监控对象。这里将监控对象内容都放置在一个div名为scrollspy（这个类名可自由定义）的容器中，其中放了多个子内容框。每个子内容框有一个标题，而且每个标题的ID值与导航菜单项中的锚点链接名相对应，并且注意加入“data-target="#navbar-menu"”属性（这个属性值要与前面的nav标签的id名称保持一致）

    <div class="scrollspy" data-target="#navbar-menu">
    <h4 id="blog">Blog</h4>
    <p>…</p>
    <h4 id="html">Html</h4>
    <p>…</p>
    <h4 id="css">CSS</h4>
    <p>…</p>
    <h4 id="sass">Sass</h4>
    <p>…</p>
    <h4 id="js">JavaScript</h4>
    <p>…</p>
    <p>…</p>
    <h4 id="php">PHP</h4>
    <p>…</p>
    <p>…</p>
    <h4 id="about">About</h4>
    <p>…</p>
    <p>…</p>
</div>

  4. 第四步：为监控对象定义样式，设置容器scrollspy大小（设置高度目的是为了产生垂直滚动条）

    .scrollspy{
    height:500px;
    font-size:20px;
    overflow:auto;
}
1.2.2 声明属性触发滚动监控

​ 为监控对象设置被监控的data属性：data-spy=“scroll”，指定监控的导航条：data-target="#navbar-menu"。同时定义监控过程中滚动条偏移位置data-offset=“60”,代码如下：

<div class="scrollspy" data-spy="scroll" data-target="#navbar-menu" data-offset="60">
  …
</div>
1.2.3 在body中加监控

​ 可以直接在body上进行滚动条监控，此时要将滚动监控器移到body上，而且导航nav一定要在body内部。如下所示：

<body data-spy="scroll" data-target="#navbar-menu">
    <div class="navbar navbar-default navbar-fixed-top" id="navbar-menu">
    </div>
    <h3 id="blog">Blog</h3>
    <p>…</p>
</body>

注意：导航条必须设置为顶部固定样式（navbar-fixed-top）

1.2.4 JavaScript方法触发滚动监控器
<nav id="navbar-menu" class="navbar navbar-default navbar-static" role="navigation">
  …
</nav>
<div class="scrollspy" id="scrollspy">
  …
</div>

<!--JavaScript触发可以这样写：-->
$(function(){
    $("#scrollspy").scrollspy({
        target: "#navbar-menu"
    });
})

<!--Bootstrap的滚动监控还提供了一个方法scrollspy("refresh")。当滚动监控所作用的DOM有增加或删除页面元素的操作时，需要调用下面的refresh方法：-->
$(function(){
    $("[data-spy='scroll']").each(function(){
        var $spy=$(this).scrollspy("refresh");
    })
})
<!-- 注意：这种refresh方法只对声明式用法有效。另外滚动监控除了options参数“target”之外，还提供了一个offset参数，此参数默认值为10。默认情况下，滚动内容距离滚动容器10px以内的话，就高一片面前显示所对应的菜单项-->

2. 选项卡、提示框和弹出框

2.1 选项卡-Tabs
2.1.1 选项卡的结构

两部分组成：

  1. 选项卡组件（也就是菜单组件），对应的是 Bootstrap的 nav-tabs）
  2. 底部可以切换的选项卡面板，在 Bootstrap 中通常 tab-pane 来表示

关键一点，选项卡中链接的锚点要与对应的面板内容容器的ID相匹配

2.1.2 触发切换效果
  1. 选项卡导航链接中要设置 data-toggle=“tab”
  2. 并且设置 data-target=“对应内容面板的选择符(一般是ID)”；如果是链接的话，还可以通过 href=“对应内容面板的选择符(一般是ID)”；主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。
  3. 面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的data-target 或 href 的值匹配
2.1.3 为选择卡添加fade样式

​ 让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 fade，让其产生渐入的效果。在添加 fade 样式时，最初的默认显示的内容面板一定要记得加上 in 类名，不然其内容用户无法看到。

<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
    <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
	<li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
	<li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
	<div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
	<div class="tab-pane fade" id="rule">规则内容面板</div>
	<div class="tab-pane fade" id="forum">论坛内容面板</div>
	<div class="tab-pane fade" id="security">安全内容面板</div>
	<div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>
2.1.4 胶囊式选项卡（nav-pills）

​ 只需要将 nav-tabs 换成 nav-pills，另外关键一点是将 data-toggle="tab"换成data-toggle="pill"。

2.1.5 JavaScript触发方法

​ 在每个链接的单击事件中调用tab("show")方法，显示对应的标签面板内容。针对上面的示例，删除HTML中自定义的 data-toggle=“tab” 或 data-toggle=“pill” 的属性，然后通过下面的脚本来调用:

<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab2" class="nav nav-pills" role="tablist">
    <li><a href="#a" role="tab" data-toggle="pill">娱乐</a></li>
    <li><a href="#b" role="tab" data-toggle="pill">房产</a></li>
    <li><a href="#c" role="tab" data-toggle="pill">国内</a></li>
    <li><a href="#d" role="tab" data-toggle="pill">国外</a></li>    
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent2" class="tab-content">
	<div class="tab-pane fade in active" id="a">娱乐内容面板</div>
	<div class="tab-pane fade" id="b">房产内容面板</div>
	<div class="tab-pane fade" id="c">国内内容面板</div>
	<div class="tab-pane fade" id="d">国外内容面板</div>	
</div>
<script>
    $(function(){
    $("#myTab2 a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    });
})
</script>
2.2 提示框-Tooltip
2.2.1 结构

共同特点：

  1. 通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title 来设置提示信息)， data-original-title 的优先级要高于 title。
  2. 通过 data-placement 自定义属性来控制提示信息框的位置，根据四种不同的位置，data-placement具有四个值：top、right、bottom和left，分别表示提示框出现的位置在顶部、右边、底部和左边。
  3. 还有一个最重要的参数不可缺少，data-toggle=“tooltip”。
2.2.2 JS触发提示框方法

​ 不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发

// 最简单的触发方式如下：
$(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
// 除此之外，也可以单独指定一个元素，在该元素上调用提示框，并且可能通过JavaScript的各种参数来实现，无需定义一些 data 属性，如：
$(function(){
    $('#myTooltip').tooltip({
       title:"我是一个提示框，我在顶部出现",
       placement:'top'
    });
});

案例：

<button type="button" 
          class="btn btn-default" 
          data-toggle="tooltip" 
          data-placement="left" 
          data-original-title="提示框居左" 
          title="">
    提示框居左      
</button>
<a class="btn btn-primary" 
     data-toggle="tooltip" 
     data-placement="top" 
     title="提示框在顶部">
     提示框在顶部
</a>
<a href="##" 
     class="btn btn-primary" 
     id="myTooltip">
     我是提示框
</a>
<script>
  $(function(){
    $('[data-toggle="tooltip"]').tooltip();
    $('#myTooltip').tooltip({
      title:"我是一个提示框，我在顶部出现",
      placement:'top'
    });
  });
</script>
2.2.3 其它自定义属性

​ 提示框还有其他的自定义属性，每个自定义属性都具自身存在的意义

在这里插入图片描述

2.2.4 JS设置参数方法

在这里插入图片描述

​ 表格中的任何属性，在使用 JavaScript 触发提示框时，都可以被调用，比如：

<script>
  $(function(){
    $('#myTooltip1').tooltip({
      title:"我是一个提示框，我在顶部出现",
      placement:"top"
    });
  });
</script>
2.3 弹出框-Popover
2.3.1 弹出框的结构

​ 弹出框Popover和提示框tooltip相比，就多了一个content内容，那么在此使用 data-content 来定义弹出框中的内容。同样可以使用<button>或者<a>标签来制作

<button type="button" 
        class="btnbtn-default" 
        data-container="body" 
        data-placement="bottom" 
        data-toggle="popover" 
        data-original-title="Bootstrap弹出框标题" 
        data-content="Bootstrap弹出框的内容" >
        猛击我吧
</button>
<a href="#" class="btnbtn-default" 
        data-container="body" 
        data-placement="right" 
        data-toggle="popover" 
        title="Bootstrap弹出框标题" 
        data-content="Bootstrap弹出框的内容">
        猛击我吧
</a>
$(function(){
    $('[data-toggle="popover"]').popover();
});
2.3.2 触发弹出框的方法

​ 需要依赖JavaScript脚本

// html代码
<button type="button"
          class="btn btn-default"
          id="myPopover">
          猛击我吧
</button>
// 使用js设置参数
$(function(){
    $('#myPopover').popover({
        title:"我是弹出框的标题",
        content:"我是弹出框的内容",
        placement:"top"
    });
});
2.3.3 自定义结构属性

在这里插入图片描述

2.3.4 提示框和弹出框的异同
  1. 提示框 tooltip 的默认触发事件是 hover 和 focus，而弹出框 popover 是 click
  2. 提示框 tooltip 只有一个内容(title)，而弹出框不仅可以设置标题（title）还可以设置内容(content)
// 提示框tooltip的模板：

<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner"></div>
</div>
// 弹出框popover的模板：
<div class="popover" role="tooltip">
    <div class="arrow"></div>
    <h3 class="popover-title"></h3>
    <div class="popover-content"></div>
</div>

3. 警示框、按钮

3.1 警示框-Alert
3.1.1 结构与样式

​ 警告框插件就是在“警示框组件”基础上添加了一个关闭的按钮，外形上就是一个X。所以其结构只需要在警示框组件的基础上添加一个按钮即可：

// 不能被关闭
<div class="alert " role="alert">
    <button class="close" type="button" >&times;</button>
    恭喜您操作成功！
</div>
3.1.2 使用声明式触发警告框

​ 如果通过自定义的HTML属性（声明式）来触发警告框，需要在关闭按钮上设置自定义属性data-dismiss="alert"，如下所示

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

​ 其实关闭按钮，不一定非要用X号，也可以是普通的按钮元素或者链接元素，只需要保证关闭元素带有自定义属性data-dismiss="alert"即可

3.1.3 JavaScript触发警告框
<!--html代码:-->
<div class="alert alert-warning" role="alert" id="myAlert">
    <h4>谨防被骗</h4>
    <p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p>
    <button type="button"  class="btn btn-danger" id="close">关闭</button>
</div>
<!--通过下面的JavaScript代码来触发：-->
$(function(){
    $("#close").on("click",function(){
        $(this).alert("close");
    });
});
3.2 按钮插件-Button
3.2.1 按钮加载状态

​ 通过按钮可以设计状态提示，当单击按钮时，会显示loading状态信息

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

​ 通过data-loading-text属性定义加载的文本信息，然后通过JavaScript给按钮绑定一个事件，并给按钮添加一个button(“loading”)方法来激活按钮的加载状态行为。如下所示：

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

注意，无法直接通过声明式触发此效果

3.2.2 模拟单选择按钮

​ 使用按钮组来模拟单选按钮组,可以通过给按钮组自定义属性data-toggle="buttons"

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options1">男
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options2">女
    </label>
</div>

注：使用这种效果的时候，无需借助JavaScript代码来触发，因为默认Bootstrap就已经为用户初始化好了

3.2.3 模拟复选按钮

​ 也是通过在按钮组上自定义data-toggle="buttons"来实现。唯一不同的是，将input[type="radio"]换成input[type="checkbox"]

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options1">电影
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options2">音乐
    </label>
</div>
3.2.4 按钮状态切换

​ 使用 data-toggle 属性还可以激活按钮的行为状态，实现在激活和未激活之间进行状态切换

<button type="button" data-toggle="button" class="btn btn-primary">确认</button>

注意，这里自定义属性是 data-toggle=“button”，而不是 data-toggle=“buttons”。

3.2.5 JavaScript用法

​ 按钮插件还可以通过调用button函数，然后给button函数传入具体的参数，实现不同的效果。而其中有两个参数是固定不变的，即toggle和reset

  1. 切换按钮状态(得到焦点):$("#mybutton").button("toggle")

  2. 重新恢复按钮:$("#mybutton").button("reset")

    $(function() {
      $("#mybutton").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('reset');
         });        
      });
});

  3. 任意参数：$("#mybutton").button("任意字符参数名")

    上面代码作用：替换 data-任意字符参数名-text 的属性值为“按钮上显示的文本值”。如下代码:

    <!--html:-->
<button type="button" data-toggle="button" class="btn btn-primary" id="mybutton" data-complete-text="Loading finished" >确认</button>
<!--js代码：-->
 $(function() {
      $("#mybutton").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('complete');
         });        
      });
 });

4. 手风琴、图片轮播和固定定位

4.1 手风琴-Collapse(折叠)
4.1.1 手风琴结构

​ 手风琴最关键的部分，就是每个标题对应有一个内容，在Bootstrap框架中将这两个部分组合起来称为一个panel页板，如果有三个panel面板，将这三个面板组合在一起，就是一个面板组合 panel-group。简单点就是一个触发器和一个折叠区

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发器</button>
<div id="demo" class="collapse in">折叠区</div>
4.1.2 声明式触发手风琴

​ 触发手风琴可以通过自定义的 data-toggle 属性来触发。其中data-toggle值设置为 collapse，data-target="#折叠区标识符"

  1. 设计一个面板组合，里面有三个折叠区

    <div class="panel-group" id="myAccordion">
    <div class="panel panel-accordion panel-default"></div>
    <div class="panel panel-accordion panel-default"></div>
    <div class="panel panel-accordion panel-default"></div>
</div>

  2. 给面板添加内容，每个面板包括两个部分，第一个是面板标题 panel-heading，并且在这里面添加标题 panel-title。第二个部分是面板内容，也就是折叠区，使用 panel-collapse 样式

    <div class="panel panel-accordion panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">标题一</h4>
    </div>
    <div class="panel-collapse">
        <div class="panel-body">折叠区内容...</div>
    </div>
</div>
…

  3. 通过锚链接的方法，把标题区域和面板区连在一起

    <div class="panel panel-accordion panel-default">
    <div class="panel-heading">
        <h4 class="panel-title"><a href="#panel1">标题一</a></h4>
    </div>
    <div class="panel-collapse" id="panel1">
        <div class="panel-body">折叠区内容...</div>
    </div>
</div>

  4. 控制面板内容区是否可视，只需要在 panel-collapse 样式上添加 collapse

    <div class="panel-collapse collapse in" id="panel1">...</div>

    希望默认第一个面板内容是可视的，在collapse基础上再追加 in样式

  5. 激活手风琴交互行为，需要在标题链接中自定义两个属性，一个是data-toggle，并且取值为collapse；另一个是data-target，取值为各个面板内容区的标识符

  6. 定义data-parent属性，实现点击一个其中一个元素时，关闭所有的折叠区，再打开所单击的区域，data-parent取值与手风琴面板容器的标识符相匹配

<div class="panel-group" id="accordion">
    <div class="panel panel-default panel-accordion">
        <div class="panel-heading">
            <h4 class="panel-title"><a href="#aa1" data-toggle="collapse" data-target="#aa1" data-parent="#accordion">标题一</a></h4>
        </div>
        <div class="panel-collapse collapse in" id="aa1">
            <div class="panel-body">标题一对应的内容</div>
        </div>
    </div>
    <div class="panel panel-default panel-accordion">
        <div class="panel-heading">
            <h4 class="panel-title"><a href="#aa2" data-toggle="collapse" data-target="#aa2" data-parent="#accordion">标题二</a></h4>
        </div>
        <div class="panel-collapse collapse" id="aa2">
            <div class="panel-body">标题二对应的内容</div>
        </div>
    </div>
</div>
4.2 图片轮播-Carousel
4.2.1 轮播图片的设计

​ 轮播图片包括三部分：轮播的图片、轮播图片的计数器、轮播图片的控制器

  1. 设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式，并且给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发。

    <div id="slidershow" class="carousel"></div>

  2. 设计轮播图片计数器。在容器 div.carousel 的内部添加轮播图片计算器，采用 carousel-indicators 样式，其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li)，一般采用有顺列表来制作

  3. 设计轮播图片播放区，这个区域使用 carousel-inner 样式来控制，而且其同样放置在 carousel 容器内，并且通过 item 容器来放置每张轮播的图片

  4. 设计轮播图片控制器，在 Carousel 中通过 carousel-control样式配合 left 和 right 来实现。其中left表示向前播放，right表示向后播放。其同样放在carousel容器内

<div id="slidershow" class="carousel">
      <!-- 设置图片轮播的顺序 -->
    <ol class="carousel-indicators">
        <li class="active">1</li>
        <li>2</li>
    </ol>
    <!-- 设置轮播图片 -->
    <div class="carousel-inner">
        <div class="item active">
            <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
            <div class="carousel-caption">
                <h3>图片标题1</h3>
                <p>描述内容1...</p>
            </div>
        </div>
        <div class="item">
            <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a>
            <div class="carousel-caption">
                <h3>图片标题2</h3>
                <p>描述内容2...</p>
            </div>
        </div>
    </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>
</div>
4.2.2 声明式触轮播图的播放

​ 声明式方法是通过定义 data 属性来实现，data 属性可以很容易地控制轮播的位置

  1. data-ride 属性：取值 carousel，并且将其定义在 carousel 上。

  2. data-target 属性：取值 carousel 定义的 ID 名或者其他样式识别符，如前面示例所示，取值为“#slidershow”，并且将其定义在轮播图计数器的每个 li 上。

  3. data-slide 属性：取值包括 prev，next，prev表示向后滚动，next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上，同时设置控制器 href 值为容器 carousel 的 ID 名或其他样式识别符。

  4. data-slide-to 属性：用来传递某个帧的下标，比如 data-slide-to=“2”，可以直接跳转到这个指定的帧（下标从0开始计），同样定义在轮播图计数器的每个 li 上。

    为 #slidershow 层添加 slide 样式，使用图片与图片切换效果有平滑感

    <div id="slidershow" class="carousel slide" data-ride="carousel">
<!-- 设置图片轮播的顺序 -->
    <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>
    </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>

其他自定义属性：

在这里插入图片描述

<!--实现“轮播不持续循环”和“轮播时间间隔为1秒”。-->
<div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000">
   ......
</div>
4.2.3 JavaScript触发方法

​ 如果没有定义 data-ride 属性，可以通过 JavaScript 方法来触发轮播图片切换

// 具体使用方法如下：
$(".carousel").carousel();
// 也可以通过容器的 ID 来指定：
$("#slidershow").carousel();

在这里插入图片描述

Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法:

  • .carousel(“cycle”)：从左向右循环播放；
  • .carousel(“pause”)：停止循环播放；
  • .carousel(“number”)：循环到指定的帧，下标从0开始，类似数组；
  • .carousel(“prev”)：返回到上一帧；
  • .carousel(“next”)：下一帧
$(function(){
    $("#slidershow").carousel({
        interval:2000
    });
    $("#slidershow a.left").click(function(){
        $(".carousel").carousel("prev");
    });
    $("#slidershow a.right").click(function(){
        $(".carousel").carousel("next");
    });
});
4.3 固定定位-Affix
4.3.1 声明式触发固定定位

​ 通过自定义属性 data 来触发。其主要包括两个参数：

  1. data-spy：取值 affix，表示元素固定不变的。
  2. data-offset：整数值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括两种方式：data-offset-top 和 data-offset-bottom。
    • data-offset-top 用来设置元素距离顶部的距离。比如 90，表示元素距离顶部 90px，当用户从顶部向下拖动滚动条，当滚动的距离大于 90px 时，affix 元素不再滚动，就会固定在浏览器窗口顶部。
    • data-offset-bottom 刚好与 data-offset-top 相反。
<body data-spy="scroll" data-target="myScrollspy">
<div class="container">
    <div class="jumbotron">
        <h1>Bootstrap Affix</h1>
    </div>
    <div class="row">
        <div class="col-xs-3" id="myScrollspy">
            <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
                <li class="active"><a href="#section-1">第一部分</a></li>
                <li><a href="#section-2">第二部分</a></li>
                <li><a href="#section-3">第三部分</a></li>
                <li><a href="#section-4">第四部分</a></li>
                <li><a href="#section-5">第五部分</a></li>
            </ul>
        </div>
        <div class="col-xs-9">...</div>
    </div>
</div>
</body>

注意，在 body 要声明滚动监控
素不再滚动，就会固定在浏览器窗口顶部。

  • data-offset-bottom 刚好与 data-offset-top 相反。
<body data-spy="scroll" data-target="myScrollspy">
<div class="container">
    <div class="jumbotron">
        <h1>Bootstrap Affix</h1>
    </div>
    <div class="row">
        <div class="col-xs-3" id="myScrollspy">
            <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
                <li class="active"><a href="#section-1">第一部分</a></li>
                <li><a href="#section-2">第二部分</a></li>
                <li><a href="#section-3">第三部分</a></li>
                <li><a href="#section-4">第四部分</a></li>
                <li><a href="#section-5">第五部分</a></li>
            </ul>
        </div>
        <div class="col-xs-9">...</div>
    </div>
</div>
</body>

注意，在 body 要声明滚动监控

栀虞子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap4学习笔记（一）
02-08
bootstrap4学习笔记，中文的，适用于初学者学习，知识点配合案例的。
Bootstrap4 学习笔记（一）
Mr_changxin的博客
04-09 750
文章目录1.布局系统1.1 栅格系统1.2 栅格等级 1.布局系统 Bootstrap4.x 提供了.container 和 .container-fluid两种容器布局 这两种样式是启动布局栅格系统最基本的要素 .contianer是固体自适应方式，.container-fluid是流体100%自适应方式 容器布局可以嵌套，但一般不推荐使用（需要自己清除一些边距） 自适应对应的响应式方式如下media： // Small devices(landscape phone,578px and up) @m
Bootstrap基本样式学习笔记之按钮(4)
09-01
主要介绍了Bootstrap学习笔记之按钮基本样式的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap 4 Tabs选项卡
10-19 1万+
&lt;ul class="nav nav-tabs" id="myTab" role="tablist"&gt; &lt;li class="nav-item"&gt; &lt;a class="nav-link active" id="home-tab" data-toggle="tab" href=&
Bootstrap学习笔记
03-16
Bootstrap 笔记 学习 教程 学习总结 有的class类等是官网上还没介绍的
bootstrap学习笔记之初识bootstrap
10-22
Bootstrap是一款目前非常流行的前端框架，简单的说，就是html,css,javascript的工具集。本文给大家介绍bootstrap学习笔记之初识bootstrap，感兴趣的朋友一起学习吧
bootstrap学习笔记
06-17
自己整理的bootstrap学习笔记，非常值得拥有，需要的朋友，可以下载学习。
bootstrap学习笔记-html5
12-22
bootstrap学习笔记-html5 各类简单案例，适合初学者
Bootstrap4按钮样式扩展库
12-13
这是一款简单的Bootstrap4按钮样式扩展库。该Bootstrap4按钮样式扩展库通过定义CSS，来为bootstrap 4原生按钮添加3D按钮，带图标的按钮，圆角按钮，以及为按钮添加更多的可用颜色，非常实用。
简单实用的Bootstrap选项卡效果
07-07
简单实用的Bootstrap选项卡效果
全面解析Bootstrap中tab（选项卡）的使用方法
09-02
主要为大家全面解析Bootstrap中tab（选项卡）的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap实现tab选项卡切换
10-14
主要为大家详细介绍了bootstrap实现tab选项卡切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap4轮播选项卡
qq_34716929的博客
10-20 313
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="background:url(/uploads/20201016/1dc7ceee6df932c1cc1033be5009137f.png); -moz-background-size:100% 100%; background-size:100% 100%;padding-top: 20px "> ...
bootstrap小知识点总结：a标签锚点跳转问题，布局常用方法
03-08 991
1.使用锚点的时候，因为顶部导航是fixed的，所以会导致跳转偏移，所以才用给每个模块的div设置一个relative属性，并且增加padding：-50px的属性，修正锚点的位置；（增加子元素，并给予padding撑开盒子的方法还在研究）； 2.设置不换行，超出部分隐藏的三个标签： overflow:hidden;white-space:norwarp;text-flow:ell...
Bootstrap4响应式动态选项卡（卡片效果）详解
热门推荐
yufanhui的博客
06-20 2万+
Bootstrap4响应式动态选项卡（卡片效果）详解先看效果图。卡片会随着屏幕的缩放的缩放而缩放。1.逻辑详解。利用Bootstrap4网格系统与弹性盒子布局来实现效果。比较重要的一点是：在响应式网站中，我们可能需要某些元素会随着屏幕的变化而变化，有些元素可能不会随着屏幕的变化而变化。例如，本例中，...
bootstrap4选项卡点击没反应_win7状态栏文件夹图标老是闪烁，点击不管用
weixin_30386973的博客
12-14 167
可能是因为windows 外壳程序explorer.exe假死导致的，可以参考如下方法解决。1、按CTRL+SHIT+ESC(CTRL+SHIT+DEL)键，打开任务管理器。找到explorer.exe进程，右键选择“结束进程”。2、点击任务管理器的“文件”菜单 ，选择“新建任务”，输入“explorer.exe”，重新打开windows外壳程序。win10系统 该怎么处理呢？1现在除...
导航、选项卡（nav） - bootStrap4常用CSS笔记
weixin_30794851的博客
05-14 418
导航一般采用ul、li来定义，否则有些效果无法实现，比如动态选项卡效果。 基础样式： 1 <ul class="nav"> 2 <li class="nav-item"><a href="#" class="nav-link">导航一</a></li> 3 </ul> 导航样式及属性： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值