bootstrap学习之三—插件
一、模态框(modal)插件
1)为要触发模态框的组件添加data-toggle="modal",data-target="对应ID"
2)使用一个div实现modal,给外层的div赋予类.modal,.fade,内嵌两个div,分别赋予类.modal-dialog和.modal-content. .modal-content所在div中包含若干div,如.modal_header;.modal_body以及.modal_footer等
二、下拉菜单(dropdown)插件
1)为触发下拉菜单的组件(链接或者按钮),添加data-toggle="dropdown"
2)为一组ul赋予类.dropdown_menu.如果为li添加class="divider"则呈现一条分割线;如果为其添加class=""dropdown-header"则样式为下拉菜单的标题。
三、滚动监听组件(scrollspy)插件
1)为要监听的组件(一般是body或者添加了n个可切换div的外层div)添加data-spy="scroll", data-target="带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 "
2)为nav赋予对应的类或者id,其实的li中的a元素href属性和要切换的div的id属性一一对应。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 滚动监听(Scrollspy)插件</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse"
data-target=".bs-js-navbar-scrollspy">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">教程名称</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>
</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>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X,它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上,iOS 是苹果的移动版本。
</p>
<h4 id="svn">SVN</h4>
<p>Apache Subversion,通常缩写为 SVN,是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目,因此拥有丰富的开发人员和用户社区。
</p>
<h4 id="jmeter">jMeter</h4>
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序,用于负载和性能测试。
</p>
<h4 id="ejb">EJB</h4>
<p>Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构,部署在兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE 上。
</p>
<h4 id="spring">Spring</h4>
<p>Spring 框架是一个开源的 Java 平台,为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。
</p>
<p>Spring 框架最初是由 Rod Johnson 编写的,在 2003 年 6 月首次发布于 Apache 2.0 许可证下。
</p>
</div> </body>
</html>
监听
四、标签页(tab)组件
1)为一组ul添加.nav .nav-tabs/.nav-pills
2) 具体的标签页使用一组div来实现,这部分div被一个外围div所包围,为外围div赋予类.tab-content,其中的每个div赋予类.tab-pane .fade 。为第一个标签div添加.in;.active
3)ul中的li和对应div的id或者类属性一一对应。
五、bootstrap工具提示(tooltip)插件
为组件添加data-toggle="tooltip";title属性赋予要提示的内容;data-placement=left/right/top/bottom即可
六、bootstrap弹出框(popover)插件
为组件添加data-toggle="popover",title属性赋予要弹出的内容标题,data-placement决定位置,data-content决定弹出框的内容。
七、bootstrap警告框(alert)插件
用一个div包含一个用于关闭的a和警告内容来实现,外层div赋予类.alert .alert_info/success等。
内层的赋予.close;data-dismiss="alert".内容为×
八、bootstrap按钮(button)插件
可以实现按钮的加载状态,一组复选框,单选框呈现为一组按钮等效果,详见api文档
九、bootstrap折叠面板(collapse)插件
可以创建折叠面板和简单的折叠组件。
1)为点击触发展开或折叠的组件加上data-toggle="collapse";为进行折叠的元素添加类.collapse
2)data-target或者href属性附加到要折叠的div目标
3)如果要求同一时间内只能展开一个,那么添加data-parent为一组折叠组件的公共父元素,若无此要求,则可以不用添加
十、bootstrap轮播插件(carousel)
不需要data属性,只需要简单的基于class的开发。相关类包括:.carousel .slide;.carousel-indicators;.carousel-inner;.carousel_control具体代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 简单的轮播(Carousel)插件</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="" class="active"></li>
<li data-target="#myCarousel" data-slide-to=""></li>
<li data-target="#myCarousel" data-slide-to=""></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
</div> </body>
</html>
轮播实现代码
十一、bootstrap边栏/附加导航插件(affix)
没搞得太明白,回头再看看文档吧
bootstrap学习之三—插件的更多相关文章
- bootstrap学习笔记 插件概述
Bootstrap插件概览 在前面布局组件章节中所讨论的组件仅仅是个开始.Bootstrap自带的12种jQuery插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的js开发人员, 你也 ...
- bootstrap学习——javascript插件篇
飞近期做的一个小项目须要用到一个模态框和一个图片浏览插件,并把二者结合,刚好bootstrap有相应插件,下面是学习应用流程: 1. 引入js文件: 能够单个引入相应插件文件,或一次所有引入.飞 ...
- Bootstrap学习js插件篇之滚动监听
1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...
- Bootstrap学习js插件篇之标签页
简单的标签页 代码: <h1 class="page-header">4.3标签页</h1> <ul class="nav nav-tabs ...
- Bootstrap学习js插件篇之提示框
案例 受到Jason Frame开发的jQuery.tipsy插件的启发,我们才把这个工具提示插件做的更好,而且此插件不依赖图片,只是使用CSS3来实现动画效果,并使用data属性存储标题. 将鼠标悬 ...
- Bootstrap学习js插件篇之下拉菜单
案例 通过此插件可以为几乎所有东西添加下拉菜单,包括导航条.标签页.胶囊式按钮. 用于导航条 导航条分为四个部分.第一部分导航头,第二部分导航列,第三部分form查询表单,第四部分导航列. <n ...
- Bootstrap学习 - JavaScript插件
模态框 <div class="modal" id="myModal" tabindex="-1" role="dialo ...
- bootstrap学习笔记--bootstrap安装环境
Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...
- Bootstrap学习笔记系列1-------Bootstrap网格系统
Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...
随机推荐
- HTTP POST, PUT PATCH
POST = 新增 GET = 讀取 PUT = 更新 DELETE = 刪除 PUT 会在地址栏显示参数信息,不安全! 理解POST和PUT的区别,顺便提下RESTfu 这两个方法咋一看都可以更新资 ...
- sql group by+字段
MySQL GROUP BY 语句 GROUP BY 语句根据一个或多个列对结果集进行分组. 在分组的列上我们可以使用 COUNT, SUM, AVG,等函数. 2.在group by的分组字段上,我 ...
- 自动更新开奖数据的excel文件,供大家下载
自动更新开奖数据的excel文件,供大家下载 2010-03-14 20:22 228492人阅读打印来源:乐彩网 作者:eren 很多人拥有自制excel电子表格,常要更新最基本的开奖信息.如有多期 ...
- javaWeb中struts开发——helloworld
1.新建一个web项目 2.选中project,右键,选择MyElcipse,选择add struts capab...添加struts支持,然后自己命名包 3.Struts在建立jsp时,标签要到 ...
- ArcGIS Server发布服务,打包成功,发布失败
打包成功,发布失败 部分解决方案: ① 查看Server对于源数据所在文件夹是否有读写权限,若无赋予Server账户至少读写权限.读写权限的赋予:对应存放数据的文件夹上右键→属性→ 安全 赋予ar ...
- 如何离线安装chrome插件【转】
http://blog.csdn.net/shuideyidi/article/details/45674601 原文链接 前言------可以不看: 实习做web,要弄单点登录SSO和验证Contr ...
- [收藏]Asp.net MVC生命周期
一个HTTP请求从IIS移交到Asp.net运行时,Asp.net MVC是在什么时机获得了控制权并对请求进行处理呢?处理过程又是怎样的? 以IIS7中asp.net应用程序生命周期为例,下图是来自M ...
- python标准库介绍
操作系统接口 os模块提供了不少与操作系统相关联的函数. >>> import os >>> os.getcwd() # 返回当前的工作目录 'C:\\Python ...
- ubuntu下交叉编译windows c程序
简介 采用mingw32可以在linux下直接编译c程序输出为windows下的exe程序或dll链接库. 个人编译的纯c程序(不含winapi),主要是c99程序,通常采用gcc/cc编译调试后,再 ...
- IOS事件处理机制(关于触发者和响应者的确认)
事件处理机制 在iOS中发生触摸后,事件会加入到UIApplication事件队列(在这个系列关于iOS开发的第一篇文章中我们分析iOS程序原理的时候就说过程序运行后UIApplication会循环监 ...