Bootstrap学习笔记（四）
四、JS插件
概述：与jQueryUI库类似，Bootstrap提供了十几个插件函数。有两种调用方法：
(1) 传统JS变成方式
$(...).插件函数.();
(2) 使用data-*扩展属性（推荐）
<ANY data-XXX=""></ANY>
有些插件函数，写了JS没有效果，必须加上data-*
1、下拉菜单
方式一：扩展属性方式
<a/button data-toggle='ddropdown'></a/button>
方式二：JS调用方式
$('...').dropdown(); //默认隐藏
$('...').dropdown('toggle'); //默认显示
2、标签页
方式一：扩展属性方式
<ul><li><a data-toggle="tab" href="#TABID"></a></li></ul>
方式二：JS调用方式
$("#tab a").click(function(event){
event.preventDefault();
$(this).tab('show');
});
3、警告框
方式一：扩展属性方式
<div class="alert alert-颜色 alert-dismissible">
<span class="close" data-dismiss="alert">×</span>
文字
</div>
方式二：JS调用方式
$("#myAlert1").click(function(event){
event.preventDefault();
$(this).alert('close');
});
4、弹出消息
Bootstrap提供了三种形式的消息弹出框：
(1) 工具提示(tooltip)
<ANY data-toggle="tooltip" data-placement="left/right/top/bottom" title="message"></ANY>
必须配合脚本才有效
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
(2) 弹出框(popover)
<ANY data-toggle="popoover" data-placement="left/right/top/bottom" title="message"></ANY>
必须配合脚本才有效
$(function () {
$('[data-toggle="popover"]').popover()
});
(3) 模态(modal)弹出框 —— 小重点
模态子窗体：有某个父窗体打开，只要子窗体不关闭，则父窗体无法获得输入焦点，且父子窗体之间可以互相传递数据。
模态子窗体的必须结构：
1 <div class="modal" id="modalRegister"> <!-- 全屏的半透明遮罩层 -->
<div class="modal-dialog"> <!-- 宽高、定位 -->
<div class="modal-content"> <!-- 背景色、边框、倒角、阴影 -->
<div class="modal-header">头部</div>
<div class="modal-body">主体</div>
<div class="modal-footer">尾部</div>
</div>
</div>
</div>
5、折叠效果
将一个目标元素展开收缩
默认样式：
<a/button data-toggle="collapse" href/data-target="#目标元素ID"></a/button>
<ANY id="目标元素ID" class="collopse in"></ANY>
手风琴效果
代码结构：
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" href="#目标元素ID" data-parent="#accordion" class="panel-title">Collapse Group Item</a>
</div>
<div id="目标元素ID" class="collapse panel-collapse">
<div class="panel-body">
</div>
</div>
</div>
</div>
实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>jQuery插件 —— 折叠效果</h1>
<h2>默认样式</h2>
<a class="btn btn-info" data-toggle="collapse" href="#myColl1">Link Effect</a>
<div id="myColl1" class="collapse">
<div class="well">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, dolorem laboriosam ea soluta eius, sint in facere excepturi commodi totam, numquam eos magnam! Deserunt sunt alias quibusdam libero esse atque.
</div>
</div> <button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#myColl2">Button Effect</button>
<div id="myColl2" class="collapse in">
<div class="well">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, dolorem laboriosam ea soluta eius, sint in facere excepturi commodi totam, numquam eos magnam! Deserunt sunt alias quibusdam libero esse atque.
</div>
</div> <hr> <h2>手风琴效果</h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1" data-parent="#accordion">Collapse Group Item#1</a>
</h4>
</div>
<div id="collapse1" class="collapse panel-collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab voluptates accusantium hic perferendis at quisquam quidem veniam quia, nemo odio neque omnis animi praesentium ipsum quaerat quam soluta sunt obcaecati.Fuga voluptate, sed fugit consequuntur, officia, sit facere eligendi hic perferendis et aperiam incidunt qui cum provident quas perspiciatis architecto explicabo sequi, nobis. Inventore possimus excepturi nemo consectetur fugiat dicta.Quas placeat sapiente fuga animi, expedita natus. Velit ullam officia, at atque blanditiis eos eligendi tempora. In, libero aut dolore error pariatur! Fugiat natus officiis deserunt, ullam ab quia explicabo.
</div>
</div>
</div> <div class="panel panel-danger">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2" class="collapsed" data-parent="#accordion">Collapse Group Item#2</a>
</h4>
</div>
<div id="collapse2" class="collapse panel-collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab voluptates accusantium hic perferendis at quisquam quidem veniam quia, nemo odio neque omnis animi praesentium ipsum quaerat quam soluta sunt obcaecati.Fuga voluptate, sed fugit consequuntur, officia, sit facere eligendi hic perferendis et aperiam incidunt qui cum provident quas perspiciatis architecto explicabo sequi, nobis. Inventore possimus excepturi nemo consectetur fugiat dicta.Quas placeat sapiente fuga animi, expedita natus. Velit ullam officia, at atque blanditiis eos eligendi tempora. In, libero aut dolore error pariatur! Fugiat natus officiis deserunt, ullam ab quia explicabo.
</div>
</div>
</div> <div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse3" class="collapsed" data-parent="#accordion">Collapse Group Item#3</a>
</h4>
</div>
<div id="collapse3" class="collapse panel-collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab voluptates accusantium hic perferendis at quisquam quidem veniam quia, nemo odio neque omnis animi praesentium ipsum quaerat quam soluta sunt obcaecati.Fuga voluptate, sed fugit consequuntur, officia, sit facere eligendi hic perferendis et aperiam incidunt qui cum provident quas perspiciatis architecto explicabo sequi, nobis. Inventore possimus excepturi nemo consectetur fugiat dicta.Quas placeat sapiente fuga animi, expedita natus. Velit ullam officia, at atque blanditiis eos eligendi tempora. In, libero aut dolore error pariatur! Fugiat natus officiis deserunt, ullam ab quia explicabo.
</div>
</div>
</div> <div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse4" class="collapsed" data-parent="#accordion">Collapse Group Item#4</a>
</h4>
</div>
<div id="collapse4" class="collapse panel-collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab voluptates accusantium hic perferendis at quisquam quidem veniam quia, nemo odio neque omnis animi praesentium ipsum quaerat quam soluta sunt obcaecati.Fuga voluptate, sed fugit consequuntur, officia, sit facere eligendi hic perferendis et aperiam incidunt qui cum provident quas perspiciatis architecto explicabo sequi, nobis. Inventore possimus excepturi nemo consectetur fugiat dicta.Quas placeat sapiente fuga animi, expedita natus. Velit ullam officia, at atque blanditiis eos eligendi tempora. In, libero aut dolore error pariatur! Fugiat natus officiis deserunt, ullam ab quia explicabo.
</div>
</div>
</div> <div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse5" class="collapsed" data-parent="#accordion">Collapse Group Item#5</a>
</h4>
</div>
<div id="collapse5" class="collapse panel-collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab voluptates accusantium hic perferendis at quisquam quidem veniam quia, nemo odio neque omnis animi praesentium ipsum quaerat quam soluta sunt obcaecati.Fuga voluptate, sed fugit consequuntur, officia, sit facere eligendi hic perferendis et aperiam incidunt qui cum provident quas perspiciatis architecto explicabo sequi, nobis. Inventore possimus excepturi nemo consectetur fugiat dicta.Quas placeat sapiente fuga animi, expedita natus. Velit ullam officia, at atque blanditiis eos eligendi tempora. In, libero aut dolore error pariatur! Fugiat natus officiis deserunt, ullam ab quia explicabo.
</div>
</div> <div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse6" class="collapsed" data-parent="#accordion">Collapse Group Item#6</a>
</h4>
</div>
<div id="collapse6" class="collapse panel-collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab voluptates accusantium hic perferendis at quisquam quidem veniam quia, nemo odio neque omnis animi praesentium ipsum quaerat quam soluta sunt obcaecati.Fuga voluptate, sed fugit consequuntur, officia, sit facere eligendi hic perferendis et aperiam incidunt qui cum provident quas perspiciatis architecto explicabo sequi, nobis. Inventore possimus excepturi nemo consectetur fugiat dicta.Quas placeat sapiente fuga animi, expedita natus. Velit ullam officia, at atque blanditiis eos eligendi tempora. In, libero aut dolore error pariatur! Fugiat natus officiis deserunt, ullam ab quia explicabo.
</div>
</div>
</div>
</div>
</div> <hr>
<h2>列表组效果</h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#mycoll" data-parent="#accordion">Collapse Group Item#1</a>
</h4>
</div>
<div id="mycoll" class="collapse panel-collapse">
<div class="list-group">
<a class="list-group-item" href="#">豆蔻年华</a>
<a class="list-group-item" href="#">青葱岁月</a>
<a class="list-group-item" href="#">峥嵘岁月</a>
<a class="list-group-item" href="#">人之暮年</a>
</div>
</div>
</div>
</div> <hr>
<h2>面板</h2>
<div class="panel panel-default">
<div class="panel-heading">The Title of the Panel</div>
<div class="panel-body">The Main of the Panel</div>
<div class="panel-footer">The Footer of the Panel</div>
</div> <hr>
<h2>响应式导航条</h2>
<div class="navbar navbar-default">
<div class="container">
<!--导航条中只允许出现1：头部-->
<div class="navbar-header">
<a class="navbar-brand" href="#">TARENA</a> <a data-toggle="collapse" href="#myNBC" class="navbar-toggle" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<!--导航条中只允许出现2：折叠菜单-->
<div id="myNBC" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">产品大全</a></li>
</ul>
</div>
</div>
</div> </div> <script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootlint.js"></script>
</body>
</html>
6、轮播图
代码结构：
1 <!-- data-interval设置轮播间隔时间，.slide为滑动效果 -->
<div class="carousel slide" id="目标元素ID" data-ride="carousel" data-interval="3000">
<!-- 图片序号 -->
<ol class="carousel-indicators">
<li data-target="#目标元素ID" data-slide-to="0" class="active"></li>
<li data-target="#目标元素ID" data-slide-to="1"></li>
<li data-target="#目标元素ID" data-slide-to="2"></li>
...
</ol> <!-- 图片加载容器 -->
<div class="carousel-inner">
<div class="item active">
<img src="data:image url">
<!-- 为图片添加描述 -->
<div class="carousel-caption">XXX</div>
</div>
...
</div> <!-- 轮播控制 -->
<!-- 前一张 -->
<a class="left carousel-control" href="#目标元素ID" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<!-- 后一张 -->
<a class="right carousel-control" href="#目标元素ID" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>jQuery插件 —— 轮播图</h1>
<div class="banner" style="width: 900px;">
<h2>最基本的轮播图</h2>
<div class="carousel" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="img/11.jpg">
</div>
<div class="item">
<img src="img/22.jpg">
</div>
<div class="item">
<img src="img/33.jpg">
</div>
<div class="item">
<img src="img/44.jpg">
</div>
</div>
</div> <h2>滑动转变的轮播图</h2>
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="img/11.jpg">
</div>
<div class="item">
<img src="img/22.jpg">
</div>
<div class="item">
<img src="img/33.jpg">
</div>
<div class="item">
<img src="img/44.jpg">
</div>
</div>
</div> <h2>修改间隔时间后的轮播图</h2>
<div class="carousel slide" data-ride="carousel" data-interval="3000">
<div class="carousel-inner">
<div class="item active">
<img src="img/11.jpg">
</div>
<div class="item">
<img src="img/22.jpg">
</div>
<div class="item">
<img src="img/33.jpg">
</div>
<div class="item">
<img src="img/44.jpg">
</div>
</div>
</div> <h2>添加文字说明</h2>
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="img/11.jpg">
<div class="carousel-caption">
<h4>秋菊</h4>
<p>为图片添加简单说明</p>
</div>
</div>
<div class="item">
<img src="img/22.jpg">
<div class="carousel-caption">
<h4>大漠</h4>
<p>为图片添加简单说明</p>
</div>
</div>
<div class="item">
<img src="img/33.jpg">
<div class="carousel-caption">
<h4>春意</h4>
<p>为图片添加简单说明</p>
</div>
</div>
<div class="item">
<img src="img/44.jpg">
<div class="carousel-caption">
<h4>水母</h4>
<p>为图片添加简单说明</p>
</div>
</div>
</div>
</div> <h2>带文字说明且有切换按钮和序号的轮播图</h2>
<div class="carousel slide" id="carousel-example-generic" data-ride="carousel">
<!-- 图片序号 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol> <!-- 图片加载容器 -->
<div class="carousel-inner">
<div class="item active">
<img src="img/11.jpg">
<div class="carousel-caption">秋菊</div>
</div>
<div class="item">
<img src="img/22.jpg">
<div class="carousel-caption">大漠</div>
</div>
<div class="item">
<img src="img/33.jpg">
<div class="carousel-caption">春意</div>
</div>
<div class="item">
<img src="img/44.jpg">
<div class="carousel-caption">水母</div>
</div>
</div> <!-- 轮播控制 -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div> </div> <script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootlint.js"></script>
</body>
</html>
7、附加导航
代码结构：
<div class="row">
<!-- 主体 -->
<div class="col-xs-10">
<h3 id="ID1">XXX</h3>
<p class="text-justify">XXX </p> <h3></h3>
<p></p>
...
</div>
<!-- 附加导航 -->
<div class="col-xs-2">
<div data-spy="affix" data-offset-top="220">
<ul class="nav nav-pills nav-stacked">
<li><a href="#ID1">XXX</a></li>
<li><a href="#ID2">XXX</a></li>
<li><a href="#ID3">XXX</a></li>
<li><a href="#ID4">XXX</a></li>
</ul>
</div>
</div>
</div>
8、滚动监听
代码结构：
<body data-spy="scroll" data-target="#目标元素ID">
<div class="container">
<div class="row">
<!-- main context -->
<div class="col-xs-10">
<h3 id="ID1">XXX</h3>
<p>XXX</p>
<h3></h3>
<p></p>
...
</div>
<!-- 附加导航 -->
<div class="col-xs-2">
<div id="目标元素ID" data-spy="affix" data-offset-top="220">
<ul class="nav nav-pills nav-stacked">
<li><a href="#ID1">XXX</a></li>
<li><a href="#ID2">XXX</a></li>
<li><a href="#ID3">XXX</a></li>
<li><a href="#ID4">XXX</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
Bootstrap学习笔记（四）的更多相关文章
- bootstrap学习笔记<四>（table表格）
表格 bootstrap为table表格定制多个常用样式:基本样式,隔行变色样式,带边框样式,荧光棒样式,紧凑样式,响应样式. ☑ .table:基础表格 ☑ .table-striped:斑马线 ...
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- C#可扩展编程之MEF学习笔记(四)：见证奇迹的时刻
前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- IOS学习笔记(四)之UITextField和UITextView控件学习
IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...
- java之jvm学习笔记四(安全管理器)
java之jvm学习笔记四(安全管理器) 前面已经简述了java的安全模型的两个组成部分(类装载器,class文件校验器),接下来学习的是java安全模型的另外一个重要组成部分安全管理器. 安全管理器 ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(四) indigo devices
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Typescript 学习笔记四：回忆ES5 中的类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
随机推荐
- Leetcode 283. Move Zeroes 移动数组中的零 (数组，模拟)
题目描述 已知数组nums,写一个函数将nums中的0移动到数组后面,同时保持非零元素的相对位置不变.比如已知nums=[0,1,0,3,12],调用你写的函数后nums应该是[1,3,12,0,0] ...
- IDEA中jsp页面写out.println会报错？
解决办法: (1)在WEB-INF目录下新建一个lib目录,并把Tomcat安装目录下的如下两个jar包复制过来. (2)选择jsp-api.jar,右键,Add as Library. (3)在Fi ...
- maven部署Tomcat(出现空白页面，最终解决)
- Mybatis学习笔记(八) —— Mybatis整合spring
一.整合思路 1.SqlSessionFactory对象应该放到spring容器中作为单例存在. 2.传统dao的开发方式中,应该从spring容器中获得sqlsession对象. 3.Mapper代 ...
- 使用lombok 简化代码
第一步:添加依赖 第二步:下载 lombok jar 包 第三步 :打开cmd 命令行 执行命令, -javaagent:lombok.jar -Xbootclasspath/a:lombok.ja ...
- C语言把字符串转换为数字
C当中有一些函数专门用于把字符串形式转换成数值形式. printf()函数和sprintf()函数 -->通过转换说明吧数字从数字形式转换为字符串形式: scanf()函数把输入字符串转换为数值 ...
- P3970 [TJOI2014]上升子序列
传送门 DP 十分显然的DP,但是不好写 设 f[ i ] 表示以第 i 个数作结尾时的方案数,原序列为 a 如果不考虑相同的序列: 那么转移就是 Σ f[ j ] (0< j < i & ...
- UVA12558 Egyptian Fractions (HARD version)（埃及分数）
传送门 题目大意 给出一个真分数 a/b,要求出几个互不相同的埃及分数(从大到小),使得它们之和为 a/b (埃及分数意思是分子为1的分数,详见百度百科) 如果有多组解,则分数数量少的优先 如果分数数 ...
- 2016"百度之星" - 资格赛（Astar Round1）C
Problem Description 度熊手上有一本神奇的字典,你可以在它里面做如下三个操作: 1.insert : 往神奇字典中插入一个单词 2.delete: 在神奇字典中删除所有前缀等于给定字 ...
- nginx配置文件企业优化
1.1 企业规范优化Nginx配置文件 第一个里程碑:创建扩展目录,生成虚拟主机配置文件 mkdir extra sed -n '10,15p' nginx.conf >extra/www.co ...