为了账号安全,请及时绑定邮箱和手机立即绑定

玩转Bootstrap(JS插件篇)

  • 弹出框中HTML自定义的data属性和提示框中的自定义的data属性基本相同,只不过在其基础上添加了data-content属性,用来设置弹出框的内容。起始两插件也有略微的不同: 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> 弹出框popver模板: <div class="popover" role="tooltip"> <div class="arrow"></div> <h3 class="popover-title"></h3> <div class="popover-content"></div> </div>
    查看全部
  • 一个选项卡主要包括两部分,其一是菜单项,其二是内容面板。其HTML结构搭建关键一点在于,选项卡中链接的锚点与对应的面板内容容器的ID相匹配。在bootstrap框架中选项卡nav-tabs已带有样式,而对于面板内容tab-pane都是隐藏的,只有当前面板内容才是显示的
    查看全部
  • 滚动监视器是如何设计的 第一步:首先在页面中加载插件(bootstrap.js或scrollspy.js) 第二部:设计一个带有下拉菜单的导航条,分别为导航条和下拉菜单定义一个描点链接,描点分别为“#blog”...,同时为导航条定义一个id值“navbar-menu”(id名称可自由定义,方便滚动监听。) 第三部:设计监控对象。这里将监控对象内容都放置在一个名为scrollspy(这个类名可以自由定义)的容器,其中放了多个子内容框。每个子内容框都有一个标题,而且每个标题的ID值与导航菜单中的描点链接名相对应,并且注意加入“data-target=#navbar-menu”(这个属性值要与前面的nav标签的id名称保持一致)
    查看全部
  • 滚动监视器是如何设计的 第一步:首先在页面中加载插件(bootstrap.js或scrollspy.js) 第二部:设计一个带有下拉菜单的导航条,分别为导航条和下拉菜单定义一个描点链接,描点分别为“#blog”...,同时为导航条定义一个id值“navbar-menu”(id名称可自由定义,方便滚动监听。) 第三部:设计监控对象。这里将监控对象内容都放置在一个名为scrollspy(这个类名可以自由定义)的容器,其中放了多个子内容框。每个子内容框都有一个标题,而且每个标题的ID值与导航菜单中的描点链接名相对应,并且注意加入“data-target=#navbar-menu”(这个属性值要与前面的nav标签的id名称保持一致)
    查看全部
  • 在BootStrap框架中为弹窗也添加了一个这样的蒙版样式“modal-backdrop” .modal-backdrop{ position:fixed; top:0; right:0;left:0;bottom:0;z-index:1040;background-color:#000; } .modal-backdrop.fade{ filter:alpha(opacity=0);opacity:0; } .modal-backdrop.fade{ filter:alpha(opacity=50);opacity:50; }
    查看全部
  • 实现原理解析: bootstrap中的“模态弹出框”有以下几个特点: 1.模态弹出框是固定在浏览器中的 2.模态框宽度是自适应的,而且modal-dialog水平居中 固定在浏览器中源码实现 .modal{position:fixed;top:0;left:0;bottom:0;right:0;z-index:1050;display:none;overfollow:hidden;outline:none;-webkit-overflow-scroll:touch;} 水平居中(源代码实现) .modal-dialog{ position:relative;width:auto;margin:10px; }
    查看全部
  • 一次性导入: bootstrap提供了一个单一的文件,这个文件包含了bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js) <!—导入jQuery版本库,因为Bootstrap的JavaScript插件依赖于jQuery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <!—- 一次性导入所有Bootstrap的JavaScript插件(压缩版本) --> <script src="js/bootstrap.min.js"></script> 单独导入: 为方便单独导入特效文件,bootstrapV3.2中提供了12种JavaScript插件,有动画过度(transitions),模态弹窗(Modal),下拉菜单(Dropdown),滚动侦测(Scrollspy),选项卡(tab ),提示框(tooltips),弹出框(popover),警告框(alert),按钮(buttons),折叠/手风琴(collapse),图片轮播(caroasel),自动定位浮标(Affix) 上述单独插件的下载可到github去下载(https://github.com/twbs/bootstrap)
    查看全部
  • 提示框参考
    查看全部
    0 采集 收起 来源:提示框(Tooltip)

    2015-12-09

  • 代码实现!! 1、模态弹出窗是固定在浏览器中的。 2、单击右侧全屏按钮,在全屏状态下,模态弹出窗宽度是自适应的,而且modal-dialog水平居中。 3、当浏览器视窗大于768px时,模态弹出窗的宽度为600px。
    查看全部
  • 模态弹出框参考模板
    查看全部
  • <!-- 选项卡组件(菜单项nav-tabs)--> <ul id="myTab2" class="nav nav-tabs" role="tablist"> <li><a href="#yl" role="tab" data-toggle="tab">娱乐</a></li> <li><a href="#fc" role="tab" data-toggle="tab">房产</a></li> <li><a href="#gn" role="tab" data-toggle="tab">国内</a></li> <li><a href="#gw" role="tab" data-toggle="tab">国外</a></li> </ul> <!-- 选项卡面板 --> <div id="myTabContent2" class="tab-content"> <div class="tab-pane active" id="yl">娱乐内容面板</div> <div class="tab-pane" id="fc">房产内容面板</div> <div class="tab-pane" id="gn">国内内容面板</div> <div class="tab-pane" id="gw">国外内容面板</div> </div> data-toggle="tab" 这个为触发点
    查看全部
  • 如果触发下拉菜单的元素是一个链接元素,为了避免点击链接,页面跳到顶部,可以使用data-target="#"来替代href="#":
    查看全部
  • data-toggle="dropdown" 在下拉的li上面加上
    查看全部
  • Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。 最简单的触发方式如下: $(function(){ $('[data-toggle="tooltip"]').tooltip(); });
    查看全部
  • 固定定位--声明式触发固定定位 Affix 插件可以对任何元素进行固定定位,其中比较简单的方法,就是通过自定义属性 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 相反。 具体使用如下: <div data-spy="affix" data-offset="90">affix元素</div> 分开设置 data-offset 值方式: <div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div> 我们来看一个简单的示例: <nav class="navbar navbar-default" role="navigation"> … </nav> <div class="container"> <div class="row"> <div class="col-md-3" id="sidebarMenu"> <ul class="navnav-pills nav-stacked" data-spy="affix" data-offset-top="20"> … </ul> </div> <div class="col-md-9"> … </div> </div> </div> 注意,在 body 要声明滚动监控。 <body data-spy="scroll" data-target="sidebarMenu">
    查看全部

举报

0/150
提交
取消
课程须知
本课程适合具有一定前端基础的人员,对HTML和CSS有一定的了解,对于定制Bootstrap的同学需要具备LESS和Sass基础知识。
老师告诉你能学到什么?
1、使用JS自由控制Bootstrap中提供的组件。

微信扫码,参与3人拼团

微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!