使用国外空间如Godaddy等写blog的朋友，相比都会直接安装空间商提供的英文版WordPress，理由很简单，一个按钮，就能自动完成。这样，问题就来了，如果想让blog前台后台都显示中文，那就还要装个中文包了。
方法就两步：
现在可以去刷新一下你的页面，试一下效果吧！
在用CSS+DIV进行布局的时候，一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚，以致经常会出现让人很郁闷的结果。今天研究了一下，总算有所了解。在此总结一下：
先看下各个属性值的定义：
1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。
3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
1、relative
含义：定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。
他是默认参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位，有以下属性：
① 如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角(到这里和absolute第一条一样)，如果在没有父级元素的情况下，存在文本，则以文本的底部为原始点进行定位并将文字断开(和absolut不同)。
② 如果设定TRBL，并且父级没有设定position属性，仍旧以父级的左上角为原点进行定位(和absolut不同)。
③ 如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置 由TRBL决定(前半段和absolute一样)。如果父级有Padding属性，那么就以内容区域的左上角为原点，进行定位(后半段和absolut不 同)。
以上三点可以总结出，无论父级存在不存在，无论有没有TRBL，均是以父级的左上角进行定位，但是父级的Padding属性会对其影响。
综合上面对relative的叙述，我们就可以将position属性为relative的DIV视成可以用TRBL进行定位的的普通DIV，或者说 只要将我们平时布局页面的div的CSS属性中加上position:relative后，就不只是用float布局页面了，还可以用TRBL进行布局页 面 了，或者说加上position:relative的DIV也可以像普通的DIV进行布局页面了，只不过还可以用TRBL进行布局页面。但是 position属性为absolute不可以用来布局页面，因为如果用来布局的话，所有的DIV都相对于浏览器的左上角定位了，所以只能用于将某个元素 定位于属性为absolute的元素的内部某个位置。
Top的值表示对象相对原位置向下偏移的距离，bottom的值表示对象相对原位置向上偏移的距离，两者同时存在时，只有Top起作用。
left的值表示对象相对原位置向右偏移的距离，right的值表示对象相对原位置向左偏移的距离，两者同时存在时，只有left起作用。
如图1：
黄色背景的层定位为relative，红色边框区域为其在正常流中的位置。在通过top、left对其定位后，从灰色背景层的位置可以看出其正常位置依然存在
2、absolute
定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在
这个属性总是有人给出误导。说当position属性设为absolute后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是fixed属性的特点。
① 如果没有TRBL(top、right、bottom、left)，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。
② 如果设定TRBL，并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
③ 如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由 TRBL决定。即使父级有Padding属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根 本没有影响。
以上三点可以总结出，若想把一个定位属性为absolute的元素定位于其父级元素内，只有满足两个条件：
第一：设定TRBL
第二：父级设定Position属性
上面的这个总结非常重要，可以保证你在用absolue布局页面的时候，不会错位，并且随着浏览器的大小或者显示器分辨率的大小，而不发生改变。
。
初学者很容易犯错的是，不清楚Position属性为absolute的板块，若想定位到父级板块中，并且当浏览器的大小改变或显示器的分辨率改变，布局不发生改变，是需要满足两个条件的，只要有一点不满足，元素就会以浏览器左上角为原点，从而导致页面布局错
位。
Top的值表示对象上边框与浏览器窗口顶部的距离，bottom的值表示对象下边框与浏览器窗口底部的距离，两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，即垂直保持位置不变。
left的值表示对象左边框与浏览器窗口左边的距离，right的值表示对象右边框与浏览器窗口右边的距离，两者同时存在时，只有left起作用；如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。
在Position属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。
3、relative与absolute的主要区别
首先，是上面已经提到过的在正常流中的位置存在与否。
其次，relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式。如图3：
图中，红色背景层为relative定位，其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute，则情形如下：
可 以看到，红色背景层依然定义top:20px；left:20px；但其相对的元素变为定位方式为absolute或relative的黄色背景层。因 此，对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位，如图：
除top、left、right、bottom定位外，margin属性值的定义也符合上述规则。
总结：
属性为relative的元素可以用来布局页面，属性为absolute的元素用来定位某元素在父级中的位置，既然属性为absolute的元素用来定位某元素在父级中位置，就少不了TRBL，这时候根据一开始讲的absolute的第三条，如果父级元素没有position属性那么 absolute元素就会脱离父级元素，但是如果是布局页面，父级元素position的属性又不能为absolute，不然就会以浏览器左上角为原点 了，所以父级元素的position属性只能为relative！
如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用 absolute，因为它不受父级元素的padding的属性影响，当然你也可以用position，不过到时候计算的时候不要忘记padding的值
Note : 绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。
什么是文档流？
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
只有三种情况会使得元素脱离文档流，分别是：浮动绝对定位和相对定位。
z-index属性
z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属 性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系 的，一定是子级在上父级在下。
Note：使用static 定位或无position定位的元素z-index属性是无效的。
height: calc(100% - 20px);注意：减号两遍一定要打空格，不然会失效
1). HelloWorld
①. 创建一个标签处理器类: 实现 SimpleTag 接口.
②. 在 WEB-INF 文件夹下新建一个 .tld(标签库描述文件) 为扩展名的 xml 文件. 并拷入固定的部分: 并对
description, display-name, tlib-version, short-name, uri 做出修改
<taglib xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd"
version="2.0">
<description>JSTL 1.1 core library</description>
<display-name>JSTL core</display-name>
<tlib-version>1.1</tlib-version>
<short-name>c</short-name>
<uri>http://java.sun.com/jsp/jstl/core</uri>
</taglib>
③. 在 tld 文件中描述自定义的标签:
<!-- 描述自定义的 HelloSimpleTag 标签 -->
<tag>
<!-- 标签的名字: 在 JSP 页面上使用标签时的名字 -->
<name>hello</name>
<!-- 标签所在的全类名 -->
<tag-class>com.atguigu.javaweb.tag.HelloSimpleTag</tag-class>
<!-- 标签体的类型 -->
<body-content>empty</body-content>
</tag>
④. 在 JSP 页面上使用自定义标签:
> 使用 taglib 指令导入标签库描述文件: <%@taglib uri="http://www.atguigu.com/mytag/core" prefix="atguigu" %>
> 使用自定义的标签: <atguigu:hello/>
2). setJspContext: 一定会被 JSP 引擎所调用, 先于 doTag, 把代表 JSP 引擎的 pageContext 传给标签处理器类.
private PageContext pageContext;
@Override
public void setJspContext(JspContext arg0) {
System.out.println(arg0 instanceof PageContext);
this.pageContext = (PageContext) arg0;
}
3). 带属性的自定义标签:
①. 先在标签处理器类中定义 setter 方法. 建议把所有的属性类型都设置为 String 类型.
private String value;
private String count;
public void setValue(String value) {
this.value = value;
}
public void setCount(String count) {
this.count = count;
}
②. 在 tld 描述文件中来描述属性:
<!-- 描述当前标签的属性 -->
<attribute>
<!-- 属性名, 需和标签处理器类的 setter 方法定义的属性相同 -->
<name>value</name>
<!-- 该属性是否被必须 -->
<required>true</required>
<!-- rtexprvalue: runtime expression value
当前属性是否可以接受运行时表达式的动态值 -->
<rtexprvalue>true</rtexprvalue>
</attribute>
③. 在页面中使用属性, 属性名同 tld 文件中定义的名字.
<atguigu:hello value="${param.name }" count="10"/>
4). 通常情况下开发简单标签直接继承 SimpleTagSupport 就可以了. 可以直接调用其对应的 getter 方法得到对应的 API
public class SimpleTagSupport implements SimpleTag{
public void doTag()
throws JspException, IOException{}
private JspTag parentTag;
public void setParent( JspTag parent ) {
this.parentTag = parent;
}
public JspTag getParent() {
return this.parentTag;
}
private JspContext jspContext;
public void setJspContext( JspContext pc ) {
this.jspContext = pc;
}
protected JspContext getJspContext() {
return this.jspContext;
}
private JspFragment jspBody;
public void setJspBody( JspFragment jspBody ) {
this.jspBody = jspBody;
}
protected JspFragment getJspBody() {
return this.jspBody;
}
}
page 指定的 session 属性:
1). 默认情况下, 第一次访问一个 WEB 应用的一个 JSP 页面时, 该页面都必须有一个和这个请求相关联的 Session 对象.
因为 page 指定的 session 属性默认为 true
2). 若把 session 属性改为 false, JSP 页面不会要求一定有一个 Session 对象和当前的 JSP 页面相关联
所以若第一次访问当前 WEB 应用的 JSP 页面时, 就不会创建一个 Session 对象.
3). 创建一个 Session 对象: 若 page 指定的 session 设置为 false 或 在 Servlet 中可以通过以下 API 获取 Session 对象.
request.getSession(flag): 若 flag 为 true, 则一定会返回一个 HttpSession 对象, 如果已经有和当前 JSP 页面关联的 HttpSession
对象, 直接返回; 如果没有, 则创建一个新的返回. flag 为 false: 若有关联的, 则返回; 若没有, 则返回 null
request.getSession(): 相当于 request.getSession(true);
4). Session 对象的销毁:
①. 直接调用 HttpSession 的 invalidate()
②. HttpSession 超过过期时间.
> 返回最大时效: getMaxInactiveInterval() 单位是秒
> 设置最大时效: setMaxInactiveInterval(int interval)
> 可以在 web.xml 文件中配置 Session 的最大时效, 单位是分钟.
<session-config>
<session-timeout>30</session-timeout>
</session-config>
③. 卸载当前 WEB 应用.
注意: 关闭浏览器不会销毁 Session!
1). 什么时候创建 HttpSession 对象
①. 对于 JSP: 是否浏览器访问服务端的任何一个 JSP, 服务器都会立即创建一个 HttpSession 对象呢？
不一定。
> 若当前的 JSP 是客户端访问的当前 WEB 应用的第一个资源，且 JSP 的 page 指定的 session 属性值为 false,
则服务器就不会为 JSP 创建一个 HttpSession 对象;
> 若当前 JSP 不是客户端访问的当前 WEB 应用的第一个资源，且其他页面已经创建一个 HttpSession 对象，
则服务器也不会为当前 JSP 页面创建一个 HttpSession 对象，而回会把和当前会话关联的那个 HttpSession 对象返回给当前的 JSP 页面.
②. 对于 Serlvet: 若 Serlvet 是客户端访问的第一个 WEB 应用的资源,
则只有调用了 request.getSession() 或 request.getSession(true) 才会创建 HttpSession 对象
2). page 指令的 session=“false“ 到底表示什么意思？
> 当前 JSP 页面禁用 session 隐含变量！但可以使用其他的显式的 HttpSession 对象
3). 在 Serlvet 中如何获取 HttpSession 对象？
> request.getSession(boolean create):
create 为 false, 若没有和当前 JSP 页面关联的 HttpSession 对象, 则返回 null; 若有, 则返回 true
create 为 true, 一定返回一个 HttpSession 对象. 若没有和当前 JSP 页面关联的 HttpSession 对象, 则服务器创建一个新的
HttpSession 对象返回, 若有, 直接返回关联的.
> request.getSession(): 等同于 request.getSession(true)
4). 什么时候销毁 HttpSession 对象:
①. 直接调用 HttpSession 的 invalidate() 方法: 该方法使 HttpSession 失效
②. 服务器卸载了当前 WEB 应用.
③. 超出 HttpSession 的过期时间.
> 设置 HttpSession 的过期时间: session.setMaxInactiveInterval(5); 单位为秒
> 在 web.xml 文件中设置 HttpSession 的过期时间: 单位为 分钟.
<session-config>
<session-timeout>30</session-timeout>
</session-config>
④. 并不是关闭了浏览器就销毁了 HttpSession.
1). 绝对路径： 相对于当前 WEB 应用的路径. 在当前 WEB 应用的所有的路径前都添加 contextPath 即可.
2). / 什么时候代表站点的根目录, 什么时候代表当前 WEB 应用的根目录
若 / 需要服务器进行内部解析, 则代表的就是 WEB 应用的根目录. 若是交给浏览器了, 则 / 代表的就是站点的根目录
若 / 代表的是 WEB 应用的根目录, 就不需要加上 contextPath 了.
1). 重复提交的情况:
①. 在表单提交到一个 Servlet, 而 Servlet 又通过请求转发的方式响应一个 JSP(HTML) 页面,
此时地址栏还保留着 Serlvet 的那个路径, 在响应页面点击 “刷新”
②. 在响应页面没有到达时重复点击 “提交按钮”.
③. 点击 “返回”, 再点击 “提交”
2). 不是重复提交的情况: 点击 “返回”, “刷新” 原表单页面, 再 “提交”。
3). 如何避免表单的重复提交: 在表单中做一个标记, 提交到 Servlet 时, 检查标记是否存在且是否和预定义的标记一致, 若一致, 则受理请求,
并销毁标记, 若不一致或没有标记, 则直接响应提示信息: “重复提交”
①. 仅提供一个隐藏域: <input type="hidden" name="token" value="atguigu"/>. 行不通: 没有方法清除固定的请求参数.
②. 把标记放在 request 中. 行不通, 因为表单页面刷新后, request 已经被销毁, 再提交表单是一个新的 request.
③. 把标记放在 session 中. 可以！
> 在原表单页面, 生成一个随机值 token
> 在原表单页面, 把 token 值放入 session 属性中
> 在原表单页面, 把 token 值放入到 隐藏域 中.
> 在目标的 Servlet 中: 获取 session 和 隐藏域 中的 token 值
> 比较两个值是否一致: 若一致, 受理请求, 且把 session 域中的 token 属性清除
> 若不一致, 则直接响应提示页面: "重复提交"
1). 基本原理: 和表单重复提交一致:
> 在原表单页面, 生成一个验证码的图片, 生成图片的同时, 需要把该图片中的字符串放入到 session 中.
> 在原表单页面, 定义一个文本域, 用于输入验证码.
> 在目标的 Servlet 中: 获取 session 和 表单域 中的 验证码的 值
> 比较两个值是否一致: 若一致, 受理请求, 且把 session 域中的 验证码 属性清除
> 若不一致, 则直接通过重定向的方式返回原表单页面, 并提示用户 "验证码错误"
它们并不直接产生任何可见输出, 而只是告诉引擎如何处理JSP页面中的其余部分。
1). page指令用于定义JSP页面的各种属性, 无论page指令出现在JSP页面中的什么地方,
它作用的都是整个JSP页面, 为了保持程序的可读性和遵循良好的编程习惯, page指令最好是放在整个JSP页面的起始位置。
2). page 指令常用的属性:
①. import 属性: 指定当前 JSP 页面对应的 Servlet 需要导入的类.
<%@page import=”java.text.DateFormat”%>
②. session 属性: 取值为 true 或 false, 指定当前页面的 session 隐藏变量是否可用, 也可以说访问当前页面时是否一定要生成 HttpSession
对象.
<%@ page session=”false” %>
③. errorPage 和 isErrorPage:
> errorPage 指定若当前页面出现错误的实际响应页面时什么. 其中 / 表示的是当前 WEB 应用的根目录.
<%@ page errorPage="/error.jsp" %>
> 在响应 error.jsp 时, JSP 引擎使用的请求转发的方式.
> isErrorPage 指定当前页面是否为错误处理页面, 可以说明当前页面是否可以使用 exception 隐藏变量. 需要注意的是: 若指定
isErrorPage="true", 并使用 exception 的方法了, 一般不建议能够直接访问该页面.
> 如何使客户不能直接访问某一个页面呢 ? 对于 Tomcat 服务器而言, WEB-INF 下的文件是不能通过在浏览器中直接输入地址的方式
来访问的. 但通过请求的转发是可以的!
> 还可以在 web.xml 文件中配置错误页面:
<error-page>
<!-- 指定出错的代码: 404 没有指定的资源, 500 内部错误. -->
<error-code>404</error-code>
<!-- 指定响应页面的位置 -->
<location>/WEB-INF/error.jsp</location>
</error-page>
<error-page>
<!-- 指定异常的类型 -->
<exception-type>java.lang.ArithmeticException</exception-type>
<location>/WEB-INF/error.jsp</location>
</error-page>
④. contentType: 指定当前 JSP 页面的响应类型. 实际调用的是 response.setContentType(“text/html; charset=UTF-8”);
通常情况下, 对于 JSP 页面而言其取值均为 text/html; charset=UTF-8. charset 指定返回的页面的字符编码是什么. 通常取值为 UTF-8
⑤. pageEncoding: 指定当前 JSP 页面的字符编码. 通常情况下该值和 contentType 中的 charset 一致.
⑥. isELIgnored: 指定当前 JSP 页面是否可以使用 EL 表达式. 通常取值为 false.
1). include 指令用于通知 JSP 引擎在翻译当前 JSP 页面时将其他文件中的内容合并进当前 JSP 页面转换成的 Servlet 源文件中,
这种在源文件级别进行引入的方式称之为静态引入, 当前JSP页面与静态引入的页面紧密结合为一个Servlet。
2). file属性的设置值必须使用相对路径
3). 如果以 / 开头，表示相对于当前WEB应用程序的根目录（注意不是站点根目录），否则，表示相对于当前文件。
1). <jsp:include page=”b.jsp”></jsp:include>
2). 动态引入: 并不是像 include 指令生成一个 Servlet 源文件, 而是生成两个 Servlet 源文件, 然后通过一个方法的方式把目标页面包含
进来.
org.apache.jasper.runtime.JspRuntimeLibrary.include(request, response, “b.jsp”, out, false);
1).
<jsp:forward page="/include/b.jsp"></jsp:forward>
相当于.
<%
request.getRequestDispatcher("/include/b.jsp").forward(request, response);
%>
2). 但使用 jsp:forward 可以使用 jsp:param 子标签向 b.jsp 传入一些参数. 同样 jsp:include 也可以使用 jsp:param 子标签.
<jsp:forward page="/include/b.jsp">
<jsp:param value="abcd" name="username"/>
</jsp:forward>
OR
<jsp:include page="/include/b.jsp">
<jsp:param value="abcd" name="username"/>
</jsp:include>
在 b.jsp 页面可以通过 request.getParameter(“username”) 获取到传入的请求参数.
1). 在 JSP 页面上输入中文, 请求页面后不出现乱码: 保证 contentType=”text/html; charset=UTF-8″,
pageEncoding=”UTF-8″ charset 和 pageEncoding 的编码一致, 且都支持中文. 通常建议取值为UTF-8
还需保证浏览器的显示的字符编码也和请求的 JSP 页面的编码一致.
2). 获取中文参数值: 默认参数在传输过程中使用的编码为 ISO-8859-1
①. 对于 POST 请求: 只要在获取请求信息之前(在调用 request.getParameter 或者是 request.getReader 等),
调用 request.setCharacterEncoding(“UTF-8″) 即可.
②. 对于 GET 请求: 前面的方式对于 GET 无效. 可以通过修改 Tomcat 的 server.xml 文件的方式.
参照 http://localhost:8989/docs/config/index.html 文档的 useBodyEncodingForURI 属性.
为 Connector 节点添加 useBodyEncodingForURI=”true” 属性即可.
<Connector connectionTimeout="20000" port="8989" protocol="HTTP/1.1" redirectPort="8443" useBodyEncodingForURI="true"/>
1). 是一个 Serlvet. 是 Servlet 接口和 ServletConfig 接口的实现类. 但是一个抽象类. 其中的 service 方法为抽象方法
2). 如果新建的 Servlet 程序直接继承 GenericSerlvet 会使开发更简洁.
3). 具体实现:
①. 在 GenericServlet 中声明了一个 SerlvetConfig 类型的成员变量, 在 init(ServletConfig) 方法中对其进行了初始化
②. 利用 servletConfig 成员变量的方法实现了 ServletConfig 接口的方法
③. 还定义了一个 init() 方法, 在 init(SerlvetConfig) 方法中对其进行调用, 子类可以直接覆盖 init() 在其中实现对 Servlet 的初始化.
④. 不建议直接覆盖 init(ServletConfig), 因为如果忘记编写 super.init(config); 而还是用了 SerlvetConfig 接口的方法,
则会出现空指针异常.
⑤. 新建的 init(){} 并非 Serlvet 的生命周期方法. 而 init(ServletConfig) 是生命周期相关的方法.
public abstract class GenericServlet implements Servlet, ServletConfig {
/** 以下方法为 Servlet 接口的方法 **/
@Override
public void destroy() {}
@Override
public ServletConfig getServletConfig() {
return servletConfig;
}
@Override
public String getServletInfo() {
return null;
}
private ServletConfig servletConfig;
@Override
public void init(ServletConfig arg0) throws ServletException {
this.servletConfig = arg0;
init();
}
public void init() throws ServletException{}
@Override
public abstract void service(ServletRequest arg0, ServletResponse arg1)
throws ServletException, IOException;
/** 以下方法为 ServletConfig 接口的方法 **/
@Override
public String getInitParameter(String arg0) {
return servletConfig.getInitParameter(arg0);
}
@Override
public Enumeration getInitParameterNames() {
return servletConfig.getInitParameterNames();
}
@Override
public ServletContext getServletContext() {
return servletConfig.getServletContext();
}
@Override
public String getServletName() {
return servletConfig.getServletName();
}
}
1). 是一个 Servlet, 继承自 GenericServlet. 针对于 HTTP 协议所定制.
2). 在 service() 方法中直接把 ServletReuqest 和 ServletResponse 转为 HttpServletRequest 和 HttpServletResponse.
并调用了重载的 service(HttpServletRequest, HttpServletResponse)
在 service(HttpServletRequest, HttpServletResponse) 获取了请求方式: request.getMethod(). 根据请求方式有创建了
doXxx() 方法(xxx 为具体的请求方式, 比如 doGet, doPost)
@Override
public void service(ServletRequest req, ServletResponse res)
throws ServletException, IOException {
HttpServletRequest request;
HttpServletResponse response;
try {
request = (HttpServletRequest) req;
response = (HttpServletResponse) res;
} catch (ClassCastException e) {
throw new ServletException("non-HTTP request or response");
}
service(request, response);
}
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//1. 获取请求方式.
String method = request.getMethod();
//2. 根据请求方式再调用对应的处理方法
if("GET".equalsIgnoreCase(method)){
doGet(request, response);
}else if("POST".equalsIgnoreCase(method)){
doPost(request, response);
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException{
// TODO Auto-generated method stub
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
}
3). 实际开发中, 直接继承 HttpServlet, 并根据请求方式复写 doXxx() 方法即可.
4). 好处: 直接由针对性的覆盖 doXxx() 方法; 直接使用 HttpServletRequest 和 HttpServletResponse, 不再需要强转.
定义一个 login.html, 里边定义两个请求字段: user, password. 发送请求到 loginServlet
在创建一个 LoginServlet(需要继承自 HttpServlet, 并重写其 doPost 方法),
在其中获取请求的 user, password.
利用 JDBC 从 test_users 中查询有没有和页面输入的 user, password 对应的记录
SELECT count(id) FROM test_users WHERE user = ? AND password = ?
若有, 响应 Hello:xxx, 若没有, 响应 Sorry: xxx xxx 为 user.
1). 本质区别: 请求的转发只发出了一次请求, 而重定向则发出了两次请求.
具体:
①. 请求的转发: 地址栏是初次发出请求的地址.
请求的重定向: 地址栏不再是初次发出的请求地址. 地址栏为最后响应的那个地址
②. 请求转发: 在最终的 Servlet 中, request 对象和中转的那个 request 是同一个对象.
请求的重定向: 在最终的 Servlet 中, request 对象和中转的那个 request 不是同一个对象.
③. 请求的转发: 只能转发给当前 WEB 应用的的资源
请求的重定向: 可以重定向到任何资源.
④. 请求的转发: / 代表的是当前 WEB 应用的根目录
请求的重定向: / 代表的是当前 WEB 站点的根目录.
1). WHY:
JSP 是简 Servlet 编写的一种技术, 它将 Java 代码和 HTML 语句混合在同一个文件中编写,
只对网页中的要动态产生的内容采用 Java 代码来编写，而对固定不变的静态内容采用普通静态 HTML 页面的方式编写。
2). Java Server Page: Java 服务器端网页. 在 HTML 页面中编写 Java 代码的页面.
2). helloworld:
新建一个 JSP 页面, 在 body 节点内的 <% %> 即可编写 Java 代码.
<body>
<%
Date date = new Date();
System.out.print(date);
%>
</body>
3). JSP 可以放置在 WEB 应用程序中的除了 WEB-INF 及其子目录外的其他任何目录中,
JSP 页面的访问路径与普通 HTML 页面的访问路径形式也完全一样。
4). JSP的运行原理: JSP 本质上是一个 Servlet.
每个JSP 页面在第一次被访问时, JSP 引擎将它翻译成一个 Servlet 源程序, 接着再把这个 Servlet 源程序编译成 Servlet 的 class 类文件.
然后再由WEB容器（Servlet引擎）像调用普通Servlet程序一样的方式来装载和解释执行这个由JSP页面翻译成的Servlet程序。
5). JSP 页面的隐含变量: 没有声明就可以使用的对象. JSP页面一共有 9 个隐含对象.
public void _jspService(HttpServletRequest request, HttpServletResponse response)
throws java.io.IOException, ServletException {
PageContext pageContext = null;
HttpSession session = null;
ServletContext application = null;
ServletConfig config = null;
JspWriter out = null;
Object page = this;
//...
//使用 <% %> 编写的代码在此位置. 可以用到 request, response, pageContext, session
//application, config, out, page 这 8 个隐含对象. (实际上还可以使用一个叫 exception 的隐含对象)
}
①. request: HttpServletRequest 的一个对象. *
②. response: HttpServletResponse 的一个对象(在 JSP 页面中几乎不会调用 response 的任何方法.)
③. pageContext: 页面的上下文, 是 PageContext 的一个对象. 可以从该对象中获取到其他 8 个隐含对象. 也可以从中获取到当前
页面的其他信息. (学习自定义标签时使用它) *
④. session: 代表浏览器和服务器的一次会话, 是 HttpSession 的一个对象. 后面详细学习. *
⑤. application: 代表当前 WEB 应用. 是 ServletContext 对象. *
⑥. config: 当前 JSP 对应的 Servlet 的 ServletConfig 对象(几乎不使用). 若需要访问当前 JSP 配置的初始化参数,
需要通过映射的地址才可以.
映射 JSP:
<servlet>
<servlet-name>hellojsp</servlet-name>
<jsp-file>/hello.jsp</jsp-file>
<init-param>
<param-name>test</param-name>
<param-value>testValue</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>hellojsp</servlet-name>
<url-pattern>/hellojsp</url-pattern>
</servlet-mapping>
⑦. out: JspWriter 对象. 调用 out.println() 可以直接把字符串打印到浏览器上. *
⑧. page: 指向当前 JSP 对应的 Servlet 对象的引用, 但为 Object 类型, 只能调用 Object 类的方法(几乎不使用)
⑨. exception: 在声明了 page 指令的 isErrorPage=”true” 时, 才可以使用. *
<%@ page isErrorPage="true" %>
pageContext, request, session, application(对属性的作用域的范围从小到大)
out, response, config, page
exception
6). JSP模版元素: JSP页面中的静态HTML内容称
7). JSP表达式（expression）提供了将一个 java 变量或表达式的计算结果输出到客户端的简化方式，
它将要输出的变量或表达式直接封装在<%= 和 %>之中。
<%
Date date = new Date();
out.print(date);
%>
<%= date %>
8). JSP脚本片断（scriptlet）是指嵌套在<% 和 %>之中的一条或多条Java程序代码。
多个脚本片断中的代码可以相互访问
<%
String ageStr = request.getParameter("age");
Integer age = Integer.parseInt(ageStr);
if(age >= 18){
%>
成人...
<%
}else{
%>
未成人...
<%
}
%>
9). JSP 声明: JSP 声明将 Java 代码封装在<%！和 %>之中，它里面的代码将被插入进 Servle t的 _jspService 方法的外面
(在 JSP 页面中几乎从不这样使用)
10). JSP注释的格式：<%– JSP 注释 –%> <!– HTML 注释 –>
区别: JSP 注释可以阻止 Java 代码的执行.
1). 方法
void setAttribute(String name, Object o): 设置属性
Object getAttribute(String name): 获取指定的属性
Enumeration getAttributeNames(): 获取所有的属性的名字组成的 Enumeration 对象
removeAttribute(String name): 移除指定的属性
2). pageContext, request, session, application 对象都有这些方法!
这四个对象也称之为域对象.
pageContext: 属性的作用范围仅限于当前 JSP 页面
request: 属性的作用范围仅限于同一个请求.
session: 属性的作用范围限于一次会话: 浏览器打开直到关闭称之为一次会话(在此期间会话不失效)
application: 属性的作用范围限于当前 WEB 应用. 是范围最大的属性作用范围, 只要在一处设置属性, 在其他各处的 JSP 或 Servlet 中
都可以获取到.
1). 把开发选项切换到 JavaEE
2). 可以在 Window -> Show View 中找到 Package Explorer, 并把其拖拽到开发区的左边
3). 在 Servers 面板中新建 Tomcat 服务器. 一定要关联到 Tomcat 安装的根目录
4). 新建一个 Dynamic Web Project. 其中 Target Runtime 需选择 Tomcat6.0
5). 开发 Java WEB 应用
6). 可以通过 run on server 来运行 WEB 项目.
1). 创建一个 Servlet 接口的实现类.
public class HelloServlet implements Servlet
2). 在 web.xml 文件中配置和映射这个 Servlet
<!-- 配置和映射 Servlet -->
<servlet>
<!-- Servlet 注册的名字 -->
<servlet-name>helloServlet</servlet-name>
<!-- Servlet 的全类名 -->
<servlet-class>com.atguigu.javaweb.HelloServlet</servlet-class>
</servlet>
<servlet-mapping>
<!-- 需要和某一个 servlet 节点的 serlvet-name 子节点的文本节点一致 -->
<servlet-name>helloServlet</servlet-name>
<!-- 映射具体的访问路径: / 代表当前 WEB 应用的根目录. -->
<url-pattern>/hello</url-pattern>
</servlet-mapping>
1). 可以来创建 Servlet, 并调用 Servlet 的相关生命周期方法.
2). JSP, Filter, Listener, Tag …
1). 构造器: 只被调用一次. 只有第一次请求 Servlet 时, 创建 Servlet 的实例. 调用构造器.
这说明 Serlvet 的单实例的!
2). init 方法: 只被调用一次. 在创建好实例后立即被调用. 用于初始化当前 Servlet.
3). service: 被多次调用. 每次请求都会调用 service 方法. 实际用于响应请求的.
4). destroy: 只被调用一次. 在当前 Servlet 所在的 WEB 应用被卸载前调用. 用于释放当前 Servlet 所占用的资源.
1). 配置在 servlet 节点中:
<servlet>
<!-- Servlet 注册的名字 -->
<servlet-name>secondServlet</servlet-name>
<!-- Servlet 的全类名 -->
<servlet-class>com.atguigu.javaweb.SecondServlet</servlet-class>
<!-- 可以指定 Servlet 被创建的时机 -->
<load-on-startup>2</load-on-startup>
</servlet>
2). load-on-startup: 可以指定 Serlvet 被创建的时机. 若为负数, 则在第一次请求时被创建.若为 0 或正数, 则在当前 WEB 应用被
Serlvet 容器加载时创建实例, 且数组越小越早被创建.
1). 同一个Servlet可以被映射到多个URL上，即多个 <servlet-mapping> 元素的 <servlet-name> 子元素的设置值可以是同一个
Servlet的注册名。
2). 在Servlet映射到的URL中也可以使用 * 通配符，但是只能有两种固定的格式：
一种格式是“.扩展名”，另一种格式是以正斜杠（/）开头并以“/”结尾。
<servlet-mapping>
<servlet-name>secondServlet</servlet-name>
<url-pattern>/*</url-pattern>
</servlet-mapping>
OR
<servlet-mapping>
<servlet-name>secondServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
注意: 以下的既带 / 又带扩展名的不合法.
<servlet-mapping>
<servlet-name>secondServlet</servlet-name>
<url-pattern>/*.action</url-pattern>
</servlet-mapping>
1). 配置 Serlvet 的初始化参数
<servlet>
<servlet-name>helloServlet</servlet-name>
<servlet-class>com.atguigu.javaweb.HelloServlet</servlet-class>
<!-- 配置 Serlvet 的初始化参数。 且节点必须在 load-on-startup 节点的前面 -->
<init-param>
<!-- 参数名 -->
<param-name>user</param-name>
<!-- 参数值 -->
<param-value>root</param-value>
</init-param>
<init-param>
<param-name>password</param-name>
<param-value>1230</param-value>
</init-param>
<load-on-startup>-1</load-on-startup>
</servlet>
2). 获取初始化参数:
> getInitParameter(String name): 获取指定参数名的初始化参数
> getInitParameterNames(): 获取参数名组成的 Enumeration 对象.
String user = servletConfig.getInitParameter("user");
System.out.println("user： " + user);
Enumeration<String> names = servletConfig.getInitParameterNames();
while(names.hasMoreElements()){
String name = names.nextElement();
String value = servletConfig.getInitParameter(name);
System.out.println("^^" + name + ": " + value);
}
3). 获取 Serlvet 的配置名称(了解)
1). 可以由 SerlvetConfig 获取:
ServletContext servletContext = servletConfig.getServletContext();
2). 该对象代表当前 WEB 应用: 可以认为 SerlvetContext 是当前 WEB 应用的一个大管家. 可以从中获取到当前 WEB 应用的各个方面的信息.
①. 获取当前 WEB 应用的初始化参数
设置初始化参数: 可以为所有的 Servlet 所获取, 而 Servlet 的初始化参数只用那个 Serlvet 可以获取.
<!-- 配置当前 WEB 应用的初始化参数 -->
<context-param>
<param-name>driver</param-name>
<param-value>com.mysql.jdbc.Driver</param-value>
</context-param>
方法:
getInitParameter
getInitParameterNames
代码:
ServletContext servletContext = servletConfig.getServletContext();
String driver = servletContext.getInitParameter("driver");
System.out.println("driver:" + driver);
Enumeration<String> names2 = servletContext.getInitParameterNames();
while(names2.hasMoreElements()){
String name = names2.nextElement();
System.out.println("-->" + name);
}
②. 获取当前 WEB 应用的某一个文件在服务器上的绝对路径, 而不是部署前的路径
getRealPath(String path);
代码:
String realPath = servletContext.getRealPath("/note.txt");
System.out.println(realPath);
③. 获取当前 WEB 应用的名称:
getContextPath()
代码:
String contextPath = servletContext.getContextPath();
System.out.println(contextPath);
④. 获取当前 WEB 应用的某一个文件对应的输入流.
getResourceAsStream(String path): path 的 / 为当前 WEB 应用的根目录.
代码:
InputStream is2 = servletContext.getResourceAsStream("/WEB-INF/classes/jdbc.properties");
⑤. 和 attribute 相关的几个方法:
1). 使用GET方式传递参数:
①. 在浏览器地址栏中输入某个URL地址或单击网页上的一个超链接时，浏览器发出的HTTP请求消息的请求方式为GET。
②. 如果网页中的<form>表单元素的 method 属性被设置为了“GET”，浏览器提交这个FORM表单时生成的HTTP请求消息的请求方式也为GET。
③. 使用GET请求方式给WEB服务器传递参数的格式：
http://www.atguigu.com/counter.jsp?name=lc&password=123
④. 使用GET方式传送的数据量一般限制在 1KB 以下。
2). 使用 POST 方式传递参数:
①. POST 请求方式主要用于向 WEB 服务器端程序提交 FORM 表单中的数据: form 表单的 method 置为 POST
②. POST 方式将各个表单字段元素及其数据作为 HTTP 消息的实体内容发送给 WEB 服务器，传送的数据量要比使用GET方式传送的数据量大得多。
POST /counter.jsp HTTP/1.1
referer: http://localhost:8080/Register.html
content-type: application/x-www-form-urlencoded
host: localhost:8080
content-length: 43
name=zhangsan&password=123 --请求体中传递参数.
1). Servlet 的 service() 方法用于应答请求: 因为每次请求都会调用 service() 方法
public void service(ServletRequest request, ServletResponse response)
throws ServletException, IOException
ServletRequest: 封装了请求信息. 可以从中获取到任何的请求信息.
ServletResponse: 封装了响应信息, 如果想给用户什么响应, 具体可以使用该接口的方法实现.
这两个接口的实现类都是服务器给予实现的, 并在服务器调用 service 方法时传入.
2). ServletRequest: 封装了请求信息. 可以从中获取到任何的请求信息.
①. 获取请求参数:
> String getParameter(String name): 根据请求参数的名字, 返回参数值.
若请求参数有多个值(例如 checkbox), 该方法只能获取到第一个提交的值.
> String[] getParameterValues(String name): 根据请求参数的名字, 返回请求参数对应的字符串数组.
> Enumeration getParameterNames(): 返回参数名对应的 Enumeration 对象,
类似于 ServletConfig(或 ServletContext) 的 getInitParameterNames() 方法.
> Map getParameterMap(): 返回请求参数的键值对: key: 参数名, value: 参数值, String 数组类型.
②. 获取请求的 URI:
HttpServletRequest httpServletRequest = (HttpServletRequest) request;
String requestURI = httpServletRequest.getRequestURI();
System.out.println(requestURI); // /day_29/loginServlet
③. 获取请求方式:
String method = httpServletRequest.getMethod();
System.out.println(method); //GET
④. 若是一个 GET 请求, 获取请求参数对应的那个字符串, 即 ? 后的那个字符串.
String queryString = httpServletRequest.getQueryString();
System.out.println(queryString); //user=atguigu&password=123456&interesting=game&interesting=party&interesting=shopping
⑤. 获取请求的 Serlvet 的映射路径
String servletPath = httpServletRequest.getServletPath();
System.out.println(servletPath); // /loginServlet
⑥. 和 attribute 相关的几个方法:
3). HttpServletRequest: 是 SerlvetRequest 的子接口. 针对于 HTTP 请求所定义. 里边包含了大量获取 HTTP 请求相关的方法.
4). ServletResponse: 封装了响应信息, 如果想给用户什么响应, 具体可以使用该接口的方法实现.
①. *getWriter(): 返回 PrintWriter 对象. 调用该对象的 print() 方法, 将把 print() 中的参数直接打印
到客户的浏览器上.
②. 设置响应的内容类型: response.setContentType(“application/msword”);
③. void sendRedirect(String location): 请求的重定向. (此方法为 HttpServletResponse 中定义.)
在 web.xml 文件中设置两个 WEB 应用的初始化参数, user, password.
定义一个 login.html, 里边定义两个请求字段: user, password. 发送请求到 loginServlet
在创建一个 LoginServlet, 在其中获取请求的 user, password. 比对其和 web.xml 文件中定义的请求参数是否一致
若一致, 响应 Hello:xxx, 若不一致, 响应 Sorry: xxx xxx 为 user.
1). 解压 apache-tomcat-6.0.16.zip 到一个非中文目录下
2). 配置一个环境变量. java_home(指向 JDK 安装的根目录) 或 jre_home
3). 通过双击 apache-tomcat-6.0.16\bin 目录下的 startup.bat, 启动服务器
4). 可以在浏览器中输入 localhost:8080 来检验 Tomcat 安装是否正确.
5). 若已经启动了一个 Tomcat 应用, 若再启动同一个 Tomcat 应用, 会抛出异常:
java.net.BindException: Address already in use: JVM_Bind:8080
因为端口已经被占用了.
<Connector port="8989" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" />
把 port 的值改为其他的端口号即可.
添加成功后, 若在任意目录下通过 startup 启动 Tomcat 服务器, 会有提示:
The CATALINA_HOME environment variable is not defined correctly
This environment variable is needed to run this program
即: 要求设置 CATALINA_HOME 这个环境变量
而 bin 目录又有一个 catalina.bat 文件, 由此可知 CATALINA_HOME 指向的应该是 Tomcat
安装的根目录
于是把 Tomcat 的根目录设为 CATALINA_HOME 环境变量.
此时即可以在 任意 目录下通过 startup.bat、shutdown.bat 启动、关闭 Tomcat 服务器.
在命令行窗口直接输入 catalina, 提示如下:
commands:
debug Start Catalina in a debugger
debug -security Debug Catalina with a security manager
jpda start Start Catalina under JPDA debugger
run Start Catalina in the current window
run -security Start in the current window with security manager
start Start Catalina in a separate window
start -security Start in a separate window with security manager
stop Stop Catalina
version What version of tomcat are you running?
catalina 命令有如上的可选参数.
run: 在 catalina 同一个命令行窗口下启动服务器.
start: 开启一个新窗口启动服务器
stop: 关闭服务器.
1). 在 Eclipse 新建一个 Java Project
2). 在 Java 项目下创建 WEB 开发的目录结构
-WebContent
-WEB-INF
-classes (编译后的 class 文件必须放在该目录下.)
-lib
-web.xml (从 apache-tomcat-6.0.16\webapps\docs\WEB-INF 中复制过来,
可以不做修改)
html 页面
JSP 页面
图片...
3). 在 src 下新建一个 Person 类
package com.atguigu.test;
public class Person {
public String getPersonInfo(){
return "person info...";
}
}
4). 手工的 Person 类对应的 class 文件(含包)复制到 classes 目录下
可以通过修改默认的输出目录达到自动把编译好的 class 放到 classes 目录下:
5). 在 WebContent 目录下新建一个 JSP 文件:
<%@page import="com.atguigu.test.Person"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%
Person person = new Person();
System.out.print(person.getPersonInfo());
%>
6). 把 WebContent 目录复制到 Tomcat 的 webapps 目录下, 并改名为: helloworld
7). 在浏览器的地址栏中输入: http://localhost:8989/helloworld/hello.jsp 即可
看到命令行的打印信息
8). 配置任意目录下的Web应用程序:
在 conf 目录下依次创建 catalina\localhost 目录，然后在 localhost 目录下为 test
这个Web应用程序建立 test.xml 文件，编辑这个文件输入以下内容
<?xml version="1.0" encoding="UTF-8"?>
<Context
docBase="E:\\Java\\Source\\atguigu\\java-1\\firstWebApp\\WebContent"
reloadable="true"/>
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
编译结果：
.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
Less 可以通过 npm 在命令行上运行；在浏览器上作为脚本文件下载；或者集成在广大的第三方工具内。
在服务器端最容易的安装方式就是通过 npm （node.js 的包管理器）。
$ npm install -g less
安装 Less 后，就可以在命令行上调用 Less 编译器了，如下：
$ lessc styles.less
这将输出编译之后的 CSS 代码到 stdout，你可以将输出重定向到一个文件：
$ lessc styles.less > styles.css
若要输出压缩过的 CSS，只需添加 -x 选项。如果希望获得更好的压缩效果，还可以通过 –clean-css 选项启用 Clean CSS 进行压缩。
执行 lessc 且不带任何参数，就会在命令行上输出所有可用选项的列表。
可以像下面这样在代码中调用 Less 编译器（Node 平台）。
var less = require('less');
less.render('.class { width: (1 + 1) }', function (e, css) {
console.log(css);
});
输出结果为：
.class {
width: 2;
}
你还可以手动调用分析器（paser）和编译器：
var parser = new(less.Parser);
parser.parse('.class { width: (1 + 1) }', function (err, tree) {
if (err) {
return console.error(err)
}
console.log(tree.toCSS());
});
可以给编译器传递多个参数：
var parser = new(less.Parser)({
paths: ['.', './lib'], // Specify search paths for @import directives
filename: 'style.less' // Specify a filename, for better error messages
});
parser.parse('.class { width: (1 + 1) }', function (e, tree) {
tree.toCSS({
// Minify CSS output
compress: true
});
});
在浏览器上跑 less.js 非常方便开发，但是不推荐用于生产环境。
在客户端使用 Less.js 是最容易的方式，并且在开发阶段很方便，但是，在生产环境中，性能和可靠性非常重要， 我们建议最好使用 node.js 或其它第三方工具进行预编译。
那就开始吧，在页面中加入 .less 样式表的链接，并将 rel 属性设置为 “stylesheet/less”：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
接下来，下载 less.js 并通过 <script></script> 标签将其引入，放置于页面的<head> 元素内：
<script src="less.js" type="text/javascript"></script>
提示
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script>
附加导航（Affix）插件允许某个 <div> 固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 <div> 会锁定在某个位置，不会随着页面其他部分一起滚动。
想要单独引用该插件的功能，需要引用 affix.js。
通过 data 属性或者通过 JavaScript 来使用附加导航（Affix）插件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap 附加导航（Affix）插件</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Custom Styles */
ul.nav-tabs{
width: 140px;
margin-top: 20px;
border-radius: 4px;
border: 1px solid #ddd;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
}
ul.nav-tabs li{
margin: 0;
border-top: 1px solid #ddd;
}
ul.nav-tabs li:first-child{
border-top: none;
}
ul.nav-tabs li a{
margin: 0;
padding: 8px 16px;
border-radius: 0;
}
ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
color: #fff;
background: #0088cc;
border: 1px solid #0088cc;
}
ul.nav-tabs li:first-child a{
border-radius: 4px 4px 0 0;
}
ul.nav-tabs li:last-child a{
border-radius: 0 0 4px 4px;
}
ul.nav-tabs.affix{
top: 30px; /* Set the top position of pinned element */
}
</style>
</head>
<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">
<h2 id="section-1">第一部分</h2>
<p>...</p>
<hr>
<h2 id="section-2">第二部分</h2>
<p>...</p>
<hr>
<h2 id="section-3">第三部分</h2>
<p>...</p>
<hr>
<h2 id="section-4">第四部分</h2>
<p>...</p>
<hr>
<h2 id="section-5">第五部分</h2>
<p>...</p>
</div>
</div>
</div>
</body>
</html>
$('#myAffix').affix({
offset: {
top: 100, bottom: function () {
return (this.bottom =
$('.bs-footer').outerHeight(true))
}
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap 附加导航（Affix）插件</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Custom Styles */
ul.nav-tabs{
width: 140px;
margin-top: 20px;
border-radius: 4px;
border: 1px solid #ddd;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
}
ul.nav-tabs li{
margin: 0;
border-top: 1px solid #ddd;
}
ul.nav-tabs li:first-child{
border-top: none;
}
ul.nav-tabs li a{
margin: 0;
padding: 8px 16px;
border-radius: 0;
}
ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
color: #fff;
background: #0088cc;
border: 1px solid #0088cc;
}
ul.nav-tabs li:first-child a{
border-radius: 4px 4px 0 0;
}
ul.nav-tabs li:last-child a{
border-radius: 0 0 4px 4px;
}
ul.nav-tabs.affix{
top: 30px; /* Set the top position of pinned element */
}
</style>
<script>
$(document).ready(function(){
$("#myNav").affix({
offset: {
top: 125
}
});
});
</script>
</head>
<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" id="myNav">
<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">
<h2 id="section-1">第一部分</h2>
<p>...</p>
<hr>
<h2 id="section-2">第二部分</h2>
<p>...</p>
<hr>
<h2 id="section-3">第三部分</h2>
<p>...</p>
<hr>
<h2 id="section-4">第四部分</h2>
<p>...</p>
<hr>
<h2 id="section-5">第五部分</h2>
<p>...</p>
</div>
</div>
</div>
</body>
</html>
在上面两种使用附加导航（Affix）插件的方式中，您都必须通过 CSS 定位内容。附加导航（Affix）插件在三种 class 之间切换，每种 class 都呈现了特定的状态： .affix、.affix-top 和 .affix-bottom。请按照下面的步骤，来为这三种状态设置您自己的 CSS（不依赖此插件）。
| 选项名称 | 类型/默认值 | Data属性名称 | 描述 |
| offset | number|function|object
默认值：10 | data-offset | 当计算滚动位置时，距离顶部的偏移像素。
如果设置了一个数字，则该偏移量的值将被应用在顶部和底部。
如果设置了一个对象偏移，则其值形如
offset: { top: 10 } 或 offset: { top: 10, bottom: 5 }。
如果需要动态计算偏移，请使用函数。 |
Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
想要单独引用该插件的功能，那么需要引用 carousel.js。
下面是一个简单的幻灯片，使用 Bootstrap 轮播（Carousel）插件显示了一个循环播放元素的通用组件。为了实现轮播，您只需要添加带有该标记的代码即可。不需要使用 data 属性，只需要简单的基于 class 的开发即可。
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<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>
</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>
可以通过 .item 内的 .carousel-caption 元素向幻灯片添加标题。只需要在该处放置任何可选的 HTML 即可，它会自动对齐并格式化。
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<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>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
<div class="carousel-caption">标题 1</div>
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
<div class="carousel-caption">标题 2</div>
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
<div class="carousel-caption">标题 3</div>
</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>
$('.carousel').carousel()
| 选项名称 | 类型/默认值 | Data属性名称 | 描述 |
|---|---|---|---|
| interval | number 默认值：5000 |
data-interval | 自动循环每个项目之间延迟的时间量。 如果为 false，轮播将不会自动循环。 |
| pause | string 默认值：”hover” |
data-pause | 鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。 |
| wrap | boolean 默认值：true |
data-wrap | 轮播是否连续循环。 |
| 方法 | 描述 |
|---|---|
| .carousel(options) | 初始化轮播为可选的 options 对象，并开始循环项目。 |
| .carousel(‘cycle’) | 从左到右循环轮播项目。 |
| .carousel(‘pause’) | 停止轮播循环项目。 |
| .carousel(number) | 循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。 |
| .carousel(‘prev’) | 循环轮播到上一个项目。 |
| .carousel(‘next’) | 循环轮播到下一个项目。 |
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<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>
</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 style="text-align:center;">
<input type="button" class="btn start-slide" value="Start">
<input type="button" class="btn pause-slide" value="Pause">
<input type="button" class="btn prev-slide" value="Previous Slide">
<input type="button" class="btn next-slide" value="Next Slide">
<input type="button" class="btn slide-one" value="Slide 1">
<input type="button" class="btn slide-two" value="Slide 2">
<input type="button" class="btn slide-three" value="Slide 3">
</div>
</div>
<script>
$(function(){
// 初始化轮播
$(".start-slide").click(function(){
$("#myCarousel").carousel('cycle');
});
// 停止轮播
$(".pause-slide").click(function(){
$("#myCarousel").carousel('pause');
});
// 循环轮播到上一个项目
$(".prev-slide").click(function(){
$("#myCarousel").carousel('prev');
});
// 循环轮播到下一个项目
$(".next-slide").click(function(){
$("#myCarousel").carousel('next');
});
// 循环轮播到某个特定的帧
$(".slide-one").click(function(){
$("#myCarousel").carousel(0);
});
$(".slide-two").click(function(){
$("#myCarousel").carousel(1);
});
$(".slide-three").click(function(){
$("#myCarousel").carousel(2);
});
});
</script>
| 事件 | 描述 |
|---|---|
| slide.bs.carousel | 当调用 slide 实例方法时立即触发该事件。 |
| slid.bs.carousel | 当轮播完成幻灯片过渡效果时触发该事件。 |
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<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>
</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>
<script>
$(function(){
$('#myCarousel').on('slide.bs.carousel', function () {
alert("当调用 slide 实例方法时立即触发该事件。");
});
});
</script>
折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。
如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。同时，也需要在您的 Bootstrap 版本中引用 Transition（过渡）插件。
可以使用折叠（Collapse）插件：
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
点击我进行展开，再次点击我进行折叠。第 1 部分
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo">
点击我进行展开，再次点击我进行折叠。第 2 部分
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseThree">
点击我进行展开，再次点击我进行折叠。第 3 部分
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="collapse"
data-target="#demo">
简单的可折叠组件
</button>
<div id="demo" class="collapse in">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div>
| Class | 描述 |
|---|---|
| .collape | 隐藏内容。 |
| .collapse.in | 显示内容。 |
| .collapsing | 当过渡效果开始时被添加，当过渡效果完成时被移除。 |
可以通过以下两种方式使用折叠（Collapse）插件：
为了向可折叠控件添加类似折叠面板的分组管理，请添加 data 属性 data-parent=”#selector”。
$('.collapse').collapse()
| 选项名称 | 类型/默认值 | Data属性名称 | 描述 |
|---|---|---|---|
| parent | selector 默认值：false |
data-parent | 如果提供了一个选择器，当可折叠项目显示时， 指定父元素下的所有可折叠的元素将被关闭。 这与创痛的折叠面板（accordion）的行为类似, 这依赖于 accordion-group 类。 |
| toggle | boolean 默认值：true |
data-toggle | 切换调用可折叠元素。 |
| 方法 | 描述 |
|---|---|
| Options: .collapse(options) |
激活内容为可折叠元素。 接受一个可选的 options 对象。 |
| Toggle: .collapse(‘toggle’) |
切换显示/隐藏可折叠元素。 |
| Show: .collapse(‘show’) |
显示可折叠元素。 |
| Hide: .collapse(‘hide’) |
隐藏可折叠元素。 |
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
点击我进行展开，再次点击我进行折叠。第 1 部分--hide 方法
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo">
点击我进行展开，再次点击我进行折叠。第 2 部分--show 方法
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseThree">
点击我进行展开，再次点击我进行折叠。第 3 部分--toggle 方法
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseFour">
点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
</div>
<script>
$(function () { $('#collapseFour').collapse({
toggle: false
})});
$(function () { $('#collapseTwo').collapse('show')});
$(function () { $('#collapseThree').collapse('toggle')});
$(function () { $('#collapseOne').collapse('hide')});
</script>
| 事件 | 描述 |
|---|---|
| show.bs.collapse | 在调用 show 方法后触发该事件。 |
| shown.bs.collapse | 当折叠元素对用户可见时触发该事件（将等待 CSS 过渡效果完成）。 |
| hide.bs.collapse | 当调用 hide 实例方法时立即触发该事件。 |
| hidden.bs.collapse | 当折叠元素对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。 |
<div class="panel-group" id="accordion">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseexample">
点击我进行展开，再次点击我进行折叠。--shown 事件
</a>
</h4>
</div>
<div id="collapseexample" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident.
Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#collapseexample').on('show.bs.collapse', function () {
alert('嘿，当您展开时会提示本警告');})
});
</script>
通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。
单独引用的话，引用button.js。
如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text=”Loading…” 作为其属性即可。
<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..."
type="button"> 加载状态
</button>
<script>
$(function() {
$(".btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
// $(this).button('reset');
// $(this).dequeue();
});
});
});
</script>
如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle=”button” 作为其属性即可。
<button type="button" class="btn btn-primary"
data-toggle="button"> 单个切换
</button>
可以创建复选框组，并通过向 btn-group 添加 data 属性 data-toggle=”buttons” 来添加复选框组的切换。
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox"> 选项 1
</label>
<label class="btn btn-primary">
<input type="checkbox"> 选项 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> 选项 3
</label>
</div>
类似地，您可以创建单选按钮组，并通过向 btn-group 添加 data 属性 data-toggle=”buttons” 来添加单选按钮组的切换。
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> 选项 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> 选项 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> 选项 3
</label>
</div>
可以 通过 JavaScript 启用按钮（Button）插件。
$('.btn').button()
| 方法 | 描述 | 实例 |
| button(‘toggle’) | 切换按压状态。赋予按钮被激活的外观。
您可以使用 data-toggle 属性启用按钮的自动切换。 | $().button('toggle') |
| .button(‘loading’) | 当加载时，按钮是禁用的，且文本变为 button 元素
的 data-loading-text 属性的值。 | $().button('loading') |
| .button(‘reset’) | 重置按钮状态，文本内容恢复为最初的内容。
当您想要把按钮返回为原始的状态时，该方法非常有用。 | $().button('reset') |
| .button(string) | 该方法中的字符串是指由用户声明的任何字符串。
使用该方法，重置按钮状态，并添加新的内容。 | $().button(string) |
<h2>点击每个按钮查看方法效果</h2>
<h4>演示 .button('toggle') 方法</h4>
<div id="myButtons1" class="bs-example">
<button type="button" class="btn btn-primary">原始</button>
</div>
<h4>演示 .button('loading') 方法</h4>
<div id="myButtons2" class="bs-example">
<button type="button" class="btn btn-primary"
data-loading-text="Loading...">原始
</button>
</div>
<h4>演示 .button('reset') 方法</h4>
<div id="myButtons3" class="bs-example">
<button type="button" class="btn btn-primary"
data-loading-text="Loading...">原始
</button>
</div>
<h4>演示 .button(string) 方法</h4>
<button type="button" class="btn btn-primary" id="myButton4"
data-complete-text="Loading finished">请点击我
</button>
<script>
$(function () {
$("#myButtons1 .btn").click(function(){
$(this).button('toggle');
});
});
$(function() {
$("#myButtons2 .btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
});
});
});
$(function() {
$("#myButtons3 .btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('reset');
});
});
});
$(function() {
$("#myButton4").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('complete');
});
});
});
</script>
警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件。可以向所有的警告框消息添加可取消（dismiss）功能。
以下两种方式启用警告框的可取消（dismissal）功能：
<a class="close" data-dismiss="alert" href="#" aria-hidden="true">
×
</a>
$(".alert").alert()
<div class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert">
×
</a>
<strong>警告！</strong>您的网络连接有问题。
</div>
| 方法 | 描述 | 实例 |
|---|---|---|
| .alert() | 该方法让所有的警告框都带有关闭功能 | $('#identifier').alert(); |
| Close Method .alert(‘close’) |
关闭所有的警告框 | $('#identifier').alert('close'); |
如需在关闭时启用动画效果，请确保添加了 .fade 和 .in class。
<h3>警告框（Alert）插件 alert() 方法</h3>
<div id="myAlert" class="alert alert-success">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>成功！</strong>结果是成功的。
</div>
<div id="myAlert" class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>警告！</strong>您的网络连接有问题。
</div>
<script>
$(function(){
$(".close").click(function(){
$("#myAlert").alert();
});
});
</script>
<h3>警告框（Alert）插件 alert('close') 方法</h3>
<div id="myAlert" class="alert alert-success">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>成功！</strong>结果是成功的。
</div>
<div id="myAlert" class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>警告！</strong>您的网络连接有问题。
</div>
<script>
$(function(){
$(".close").click(function(){
$("#myAlert").alert('close');
});
});
</script>
| 事件 | 描述 |
|---|---|
| close.bs.alert | 当调用close实例方法时立即触发该事件 |
| closed.bs.alert | 当警告框被关闭时触发该事件（将等待CSS过渡效果完成） |
<div id="myAlert" class="alert alert-success">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>成功！</strong>结果是成功的。
</div>
<script>
$(function(){
$("#myAlert").bind('closed.bs.alert', function () {
alert("警告消息框被关闭。");
});
});
</script>
弹出框（Popover）与提示工具（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用Bootstrap数据API（Bootstrap DATA API）来填充。该方法依赖于工具提示（Tooltip）。
如果想要单独引用该插件的功能，那么引用popover.js。
弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（Popover）放在他们的触发元素后面。可以有以下两种方式添加弹出框（Popover）：
<a href="#" data-toggle="popover" title="Example popover">
请悬停在我的上面
</a>
$('#identifier').popover(options)
弹出框（Popover）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯CSS插件。如需使用该插件，必须使用jQuery激活它（读取JavaScript）。使用下面的脚本来启用页面中的所有的弹出框（Popover）：
$(function () { $("[data-toggle='popover']").popover(); });
<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-default" title="Popover title"
data-container="body" data-toggle="popover" data-placement="left"
data-content="左侧的 Popover 中的一些内容">
左侧的 Popover
</button>
<button type="button" class="btn btn-primary" title="Popover title"
data-container="body" data-toggle="popover" data-placement="top"
data-content="顶部的 Popover 中的一些内容">
顶部的 Popover
</button>
<button type="button" class="btn btn-success" title="Popover title"
data-container="body" data-toggle="popover" data-placement="bottom"
data-content="底部的 Popover 中的一些内容">
底部的 Popover
</button>
<button type="button" class="btn btn-warning" title="Popover title"
data-container="body" data-toggle="popover" data-placement="right"
data-content="右侧的 Popover 中的一些内容">
右侧的 Popover
</button>
</div>
<script>
$(function (){
$("[data-toggle='popover']").popover();
});
</script>
</div>
| 选项名称 | 类型/默认值 | Data属性名称 | 描述 |
|---|---|---|---|
| animation | boolean 默认值：true |
data-animation | 向弹出框应用CSS褪色过渡效果。 |
| html | boolean 默认值：false |
data-html | 向弹出框插入HTML。如果为false，jQuery的text方法将被用于向DOM插入内容。如果担心XSS攻击，请使用text。 |
| placement | string | function 默认值：top |
data-placement | 规定如何定位弹出框（即top|bottom|left|right|auto）。 当指定为auto时，会动态调整弹出框。例如，如果placement是”auto left”，弹出框将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。 |
| selector | string 默认值：false |
data-selector | 如果提供了一个选择器弹出框对象呗委派到指定的目标。 |
| title | string | function 默认值：” |
data-title | 如果未指定title属性，则title选项是默认的title值。 |
| trigger | string 默认值：’hover focus’ |
data-trigger | 定义如果触发弹出框：click|hover|focus|manual。 可以传递多个触发器，每个触发器之间用空格分隔。 |
| delay | number | object 默认值：0 |
data-delay | 延迟显示和隐藏弹出框的毫秒数，对manual手动触发类型不适合。如果提供的是一个数字，那么颜色将会应用于显示和隐藏。如果提供的是对象，结构如下：delay:{show:500, hide:100} |
| container | string | false 默认值：false |
data-container | 向指定元素追加弹出框。 实例：container:’body’ |
| 方法 | 描述 | 实例 |
|---|---|---|
| Options:.popover(options) | 向元素集合附加弹出框句柄 | $().popover(options) |
| Toggle:.popover(‘toggle’) | 切换显示/隐藏元素的弹出框 | $('#element').popover('toggle') |
| Show:.popover(‘show’) | 显示元素的弹出框 | $('#element').popover('show') |
| Hide:.popover(‘hide’) | 隐藏元素的弹出框 | $('#element').popover('hide') |
| Destroy:.popover(‘destroy’) | 隐藏并销毁元素的弹出框 | $('#element').popover('destroy') |
<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-default popover-show"
title="Popover title" data-container="body"
data-toggle="popover" data-placement="left"
data-content="左侧的 Popover 中的一些内容 —— show 方法">
左侧的 Popover
</button>
<button type="button" class="btn btn-primary popover-hide"
title="Popover title" data-container="body"
data-toggle="popover" data-placement="top"
data-content="顶部的 Popover 中的一些内容 —— hide 方法">
顶部的 Popover
</button>
<button type="button" class="btn btn-success popover-destroy"
title="Popover title" data-container="body"
data-toggle="popover" data-placement="bottom"
data-content="底部的 Popover 中的一些内容 —— destroy 方法">
底部的 Popover
</button>
<button type="button" class="btn btn-warning popover-toggle"
title="Popover title" data-container="body"
data-toggle="popover" data-placement="right"
data-content="右侧的 Popover 中的一些内容 —— toggle 方法">
右侧的 Popover
</button><br><br><br><br><br><br>
<p class="popover-options">
<a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>"
data-container="body" data-toggle="popover" data-content="
<h4>Popover 中的一些内容 —— options 方法</h4>">
Popover
</a>
</p>
<script>
$(function () { $('.popover-show').popover('show');});
$(function () { $('.popover-hide').popover('hide');});
$(function () { $('.popover-destroy').popover('destroy');});
$(function () { $('.popover-toggle').popover('toggle');});
$(function () { $(".popover-options a").popover({html : true });});
</script>
</div>
| 事件 | 描述 |
|---|---|
| show.bs.popover | 当调用show实例方法时立即触发该事件。 |
| shown.bs.popover | 当弹出框对用户可见时触发该事件（将等待CSS过渡效果完成） |
| hide.bs.popover | 当调用hide实例方法时立即触发该事件 |
| hidden.bs.popover | 当工具提示对用户隐藏时触发该事件（将等待CSS过渡效果完成） |
<div clas="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-primary popover-show"
title="Popover title" data-container="body"
data-toggle="popover"
data-content="左侧的 Popover 中的一些内容 —— show 方法">
左侧的 Popover
</button>
</div>
<script>
$(function () { $('.popover-show').popover('show');});
$(function () { $('.popover-show').on('shown.bs.popover', function () {
alert("当显示时警告消息");
})
});
</script>
</div>
当想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。提示工具（Tooltip）插件是受Jason Frame写的jQuery.tipsy的启发。提示工具（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用CSS实现动画效果，用data属性存储标题信息。
也一样单独引用该插件功能，需要要引用tooltip.js。
提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（Tooltip）放在他们的触发元素后面。可以有以下两种方式添加提示工具（Tooltip）：
<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
$('#identifier').tooltip(options)
提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯CSS插件。如需使用该插件，必须使用jQuery激活它（读取JavaScript）。使用下面的脚本来启用页面中的所有的提示工具（Tooltip）：
$(function () { $("[data-toggle='tooltip']").tooltip(); });
<h4>提示工具（Tooltip）插件 - 锚</h4>
这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"
title="默认的 Tooltip">
默认的 Tooltip
</a>.
这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"
data-placement="left" title="左侧的 Tooltip">
左侧的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="top"
title="顶部的 Tooltip">
顶部的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom"
title="底部的 Tooltip">
底部的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="right"
title="右侧的 Tooltip">
右侧的 Tooltip
</a>
<br>
<h4>提示工具（Tooltip）插件 - 按钮</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip"
title="默认的 Tooltip">
默认的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="left" title="左侧的 Tooltip">
左侧的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="top" title="顶部的 Tooltip">
顶部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="bottom" title="底部的 Tooltip">
底部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="right" title="右侧的 Tooltip">
右侧的 Tooltip
</button>
<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
有一些选项是通过Bootstrap数据API（Bootstrap Data API）添加或通过JavaScript调用的。
| 选项名称 | 类型/默认值 | Data属性名称 | 描述 |
|---|---|---|---|
| animation | boolean 默认值：true |
data-animation | 提示工具使用CSS渐变滤镜效果。 |
| html | boolean 默认值：false |
data-html | 向提示工具插入HTML。如果为false，jQuery的text方法将被用于向DOM插入内容。如果担心XSS攻击，请使用text。 |
| placement | string | function 默认值：top |
data-placement | 规定如何定位提示工具（即top|bottom|left|right|auto）。 当指定为auto时，会动态调整提示工具。例如，如果placement是”auto left”，提示工具将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。 |
| selector | string 默认值：false |
data-selector | 如果提供了一个选择器，提示工具对象将被委派到指定的目标。 |
| title | string | function 默认值：” |
data-title | 如果未指定title属性，则title选项是默认的title值。 |
| trigger | string 默认值：’hover focus’ |
data-trigger | 定义如何处罚提示工具：click|hover|focus|manual。可以传递多个触发器，每个触发器之间用空格分隔。 |
| content | string | function 默认值：” |
data-content | 如果未指定data-content属性，则使用默认的content值 |
| delay | number | object 默认值：0 |
dta-delay | 延迟显示和隐藏提示工具的毫秒数，对manual手动处罚类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示：delay:{show:500, hide:100} |
| container | string | false 默认值：false |
data-container | 向指定元素追加提示工具。实例：container:’body’ |
| 方法 | 描述 | 实例 |
|---|---|---|
| Qptions:.tooltip(options) | 向元素集合附加提示工具句柄 | $().tooltip(options) |
| Toggle:.tooltip(‘toggle’) 切换显示/隐藏元素的提示工具 | $('#element').tooltip('toogle') |
|
| Show:.tooltip(‘show’) | 显示元素的提示工具 | $('element').tooltip('show') |
| Hide:.tooltip(‘hide’) | 隐藏元素的提示工具 | $('element').tooltip('hide') |
| Destroy:.tooltip(‘destroy’) | 隐藏并销毁元素的提示工具 | $('#element').tooltip('destroy') |
<div style="padding: 100px 100px 10px;">
这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip"
title="show">Tooltip 方法 show
</a>.
这是一个 <a href="#" class="tooltip-hide" data-toggle="tooltip"
data-placement="left" title="hide">Tooltip 方法 hide
</a>.
这是一个 <a href="#" class="tooltip-destroy" data-toggle="tooltip"
data-placement="top" title="destroy">Tooltip 方法 destroy
</a>.
这是一个 <a href="#" class="tooltip-toggle" data-toggle="tooltip"
data-placement="bottom" title="toggle">Tooltip 方法 toggle
</a>.
<br><br><br><br><br><br>
<p class="tooltip-options" >
这是一个 <a href="#" data-toggle="tooltip" title="<h2>'am Header2
</h2>">Tooltip 方法 options
</a>.
</p>
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-hide').tooltip('hide');});
$(function () { $('.tooltip-destroy').tooltip('destroy');});
$(function () { $('.tooltip-toggle').tooltip('toggle');});
$(function () { $(".tooltip-options a").tooltip({html : true });
});
</script>
<div>
| 事件 | 描述 |
|---|---|
| show.bs.tooltip | 当调用show实例方法时立即触发该事件 |
| shown.bs.tooltip | 当提示工具对用户可见时触发该事件（将等待CSS过渡效果完成） |
| hide.bs.tooltip | 当调用hide实例方法时立即触发该事件 |
| hiddedn.bs.tooltip | 当提示工具对用户隐藏时触发该事件（将等待CSS过渡效果完成） |
<h4>提示工具（Tooltip）插件 - 锚</h4>
这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip"
title="默认的 Tooltip">默认的 Tooltip
</a>.
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
alert("Alert message on show");
})
});
</script>
通过这个插件可以把内容放置在标签页或者胶囊式标签页，甚至是下拉菜单标签页中。
一样的想单独引用该插件的功能，只需引用tab.js。
通过以下两种方式启用标签页：
<ul class="nav nav-tabs">
<li><a href="#identifier" data-toggle="tab">Home</a></li>
...
</ul>
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
下面的实例演示了以不同方式来激活各个标签页：
// 通过名称选取标签页
$('#myTab a[href="#profile"]').tab('show')
// 选取第一个标签页
$('#myTab a:first').tab('show')
// 选取最后一个标签页
$('#myTab a:last').tab('show')
// 选取第三个标签页（从 0 开始索引）
$('#myTab li:eq(2) a').tab('show')
如果需要为标签页设置淡入淡出效果，请添加.fade到每个.tab-pane后面。第一个标签页必须添加.in类，以便淡入显示初始内容：
<div class="tab-content">
<div class="tab-pane fade in active" id="home">...</div>
<div class="tab-pane fade" id="svn">...</div>
<div class="tab-pane fade" id="ios">...</div>
<div class="tab-pane fade" id="java">...</div>
</div>
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">十九岁</a>
</li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。</p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
</p>
</div>
</div>
.$().tab：该方法可以激活标签页元素和内容容器。标签页需要用一个data-target或者一个指向DOM中容器节点的href。
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#identifier" data-toggle="tab">Home</a></li>
.....
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
.....
</div>
<script>
$(function () {
$('#myTab a:last').tab('show')
})
</script>
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">十九岁</a>
</li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java <b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">
jmeter</a>
</li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">
ejb</a>
</li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。</p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
</p>
</div>
</div>
<script>
$(function () {
$('#myTab li:eq(1) a').tab('show');
});
</script>
| 事件 | 描述 |
|---|---|
| show.bs.tab | 该事件在标签页显示时触发，但是必须在新标签页被显示之前。分别使用event.target和event.relatedTarget来定位到激活的标签页和前一个激活的标签页。 |
| shown.bs.tab | 该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。分别使用event.target和event.relatedTarget来定位到激活的标签页和前一个激活的标签页。 |
<hr>
<p class="active-tab"><strong>激活的标签页</strong>：<span></span></p>
<p class="previous-tab"><strong>前一个激活的标签页</strong>：<span></span></p>
<hr>
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">十九岁</a></li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">
Java <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。</p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
</p>
</div>
</div>
<script>
$(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// 获取已激活的标签页的名称
var activeTab = $(e.target).text();
// 获取前一个激活的标签页的名称
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});
</script>
滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着滚动，基于滚动条的位置向导航栏添加.active class。
如果想要单独引用该插件的功能，需要引用scrollspy.js。或者，引用bootstrap.js或者压缩版的bootstrap.min.js。
向顶部导航添加滚动监听行为：
<body data-spy="scroll" data-target=".navbar-example">
....
<div class="navbar-example">
<ul class="nav nav-tabs">
...
</ul>
</div>
...
</body>
$('body').scrollspy({ target:'.navbar-example' })
<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">切换导航</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>
</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>
通过data属性或JavaScript来传递：
| 选项名称 | 类型/默认值 | Data属性名单 | 描述 |
|---|---|---|---|
| offset | number 默认值：10 |
data-offset | 当计算滚动位置时，距离顶部的偏移像素。 |
.scrollspy(‘refresh’)：当通过JavaScript调用scrollspy方法时，需要调用.refresh方法来更新DOM。这在DOM的任意元素发生变更（即，添加或移除了某些元素）时非常有用。
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
<nav id="myScrollspy" 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">切换导航</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 class="active"><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="#myScrollspy" data-offset="0"
style="height:200px;overflow:auto; position: relative;">
<div class="section">
<h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);">
× 删除该部分</a></small>
</h4>
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
</div>
<div class="section">
<h4 id="svn">SVN<small></small></h4>
<p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。</p>
</div>
<div class="section">
<h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">
× 删除该部分</a></small>
</h4>
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
</div>
<div class="section">
<h4 id="ejb">EJB</h4>
<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p>
</div>
<div class="section">
<h4 id="spring">Spring</h4>
<p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。</p>
<p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。</p>
</div>
</div>
<script>
$(function(){
removeSection = function(e) {
$(e).parents(".section").remove();
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
}
$("#myScrollspy").scrollspy();
});
</script>
| 事件 | 描述 |
|---|---|
| activate.bs.scrollspy | 每当一个新项目被滚动监听激活时， 触发该事件。 |
<nav id="myScrollspy" 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">切换导航</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 class="active"><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="#myScrollspy" data-offset="0"
style="height:200px;overflow:auto; position: relative;">
<div class="section">
<h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);">
× 删除该部分</a></small>
</h4>
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
</div>
<div class="section">
<h4 id="svn">SVN<small></small></h4>
<p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。</p>
</div>
<div class="section">
<h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">
× 删除该部分</a></small>
</h4>
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
</div>
<div class="section">
<h4 id="ejb">EJB</h4>
<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p>
</div>
<div class="section">
<h4 id="spring">Spring</h4>
<p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。</p>
<p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。</p>
</div>
</div>
<span id="activeitem" style="color:red;"></span>
<script>
$(function(){
removeSection = function(e) {
$(e).parents(".section").remove();
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
}
$("#myScrollspy").scrollspy();
$('#myScrollspy').on('activate.bs.scrollspy', function () {
var currentItem = $(".nav li.active > a").text();
$("#activeitem").html("目前您正在查看 - " + currentItem);
})
});
</script>
<!-- The navbar: used to jump to a section in the scrollable area -->
<nav class="navbar navbar-inverse navbar-fixed-top">
...
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>
<!-- The scrollable area -->
<div data-spy="scroll" data-target=".navbar" data-offset="12">
<!-- Section 1 -->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
</div>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li><a href="#section1">Section 1</a></li>
...
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation list while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
使用下拉菜单（Dropdown）插件，可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。
如果想要单独引用该插件的功能，那么需要引用dropdown.js。或者，引用bootstrap.js或压缩版的bootstrap.min.js。
可以切换下拉菜单（Dropdown）插件的隐藏内容：
<div class="dropdown">
<a data-toggle="dropdown" href="#">下拉菜单（Dropdown）触发器</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
如果需要保持链接完整（在浏览器不启用JavaScript时有用），请使用data-target属性代替href=”#”：
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
下拉菜单（Dropdown）<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
$('.dropdown-toggle').dropdown()
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">菜鸟教程</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<p>带有下拉菜单的标签页</p>
<ul class="nav nav-tabs">
<li class="active">
<a href="#">Home</a></li>
<li>
<a href="#">SVN</a></li>
<li>
<a href="#">iOS</a></li>
<li>
<a href="#">VB.Net</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Java
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">Swing</a></li>
<li>
<a href="#">jMeter</a></li>
<li>
<a href="#">EJB</a></li>
<li class="divider"></li>
<li>
<a href="#">分离的链接</a></li>
</ul>
</li>
<li>
<a href="#">PHP</a></li>
</ul>
下拉菜单切换有一个简单的方法用来显示或隐藏下拉菜单：
$().dropdown('toggle')
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">W3Cschool</a>
</div>
<div id="myexample">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">iOS</a>
</li>
<li>
<a href="#">SVN</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a id="action-1" href="#">jmeter</a>
</li>
<li>
<a href="#">EJB</a>
</li>
<li>
<a href="#">Jasper Report</a>
</li>
<li class="divider"></li>
<li>
<a href="#">分离的链接</a>
</li>
<li class="divider"></li>
<li>
<a href="#">另一个分离的链接</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<script>
$(function() {
$(".dropdown-toggle").dropdown('toggle');
});
</script>