自定义标签

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;
    }   
}

Session

1. Session 的创建和销毁

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 的生命周期:

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.

2. 使用绝对路径:使用相对路径可能会有问题, 但使用绝对路径肯定没有问题.

1). 绝对路径: 相对于当前 WEB 应用的路径. 在当前 WEB 应用的所有的路径前都添加 contextPath 即可.

2). / 什么时候代表站点的根目录, 什么时候代表当前 WEB 应用的根目录

若 / 需要服务器进行内部解析, 则代表的就是 WEB 应用的根目录. 若是交给浏览器了, 则 / 代表的就是站点的根目录
若 / 代表的是 WEB 应用的根目录, 就不需要加上 contextPath 了.

3. 表单的重复提交

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 属性清除
> 若不一致, 则直接响应提示页面: "重复提交"

4. 使用 HttpSession 实现验证码

1). 基本原理: 和表单重复提交一致:

> 在原表单页面, 生成一个验证码的图片, 生成图片的同时, 需要把该图片中的字符串放入到 session 中. 
> 在原表单页面, 定义一个文本域, 用于输入验证码. 

> 在目标的 Servlet 中: 获取 session 和 表单域 中的 验证码的 值
> 比较两个值是否一致: 若一致, 受理请求, 且把 session 域中的 验证码 属性清除
> 若不一致, 则直接通过重定向的方式返回原表单页面, 并提示用户 "验证码错误"

JSP

1. JSP 指令: JSP指令(directive)是为JSP引擎而设计的,

它们并不直接产生任何可见输出, 而只是告诉引擎如何处理JSP页面中的其余部分。

2. 在目前的JSP 2.0中,定义了page、include 和 taglib这三种指令

3. page 指令:

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.

3. include 指令: <%@ include file=”b.jsp” %>

1). include 指令用于通知 JSP 引擎在翻译当前 JSP 页面时将其他文件中的内容合并进当前 JSP 页面转换成的 Servlet 源文件中,
这种在源文件级别进行引入的方式称之为静态引入, 当前JSP页面与静态引入的页面紧密结合为一个Servlet。

2). file属性的设置值必须使用相对路径

3). 如果以 / 开头,表示相对于当前WEB应用程序的根目录(注意不是站点根目录),否则,表示相对于当前文件。

4. jsp:incluce 标签:

1). <jsp:include page=”b.jsp”></jsp:include>

2). 动态引入: 并不是像 include 指令生成一个 Servlet 源文件, 而是生成两个 Servlet 源文件, 然后通过一个方法的方式把目标页面包含
进来.

org.apache.jasper.runtime.JspRuntimeLibrary.include(request, response, “b.jsp”, out, false);

5. jsp:forward:

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”) 获取到传入的请求参数.

6. 关于中文乱码:

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"/>

Servlet

1. GenericServlet:

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. HttpServlet:

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, 不再需要强转.

3. 在 MySQL 数据库中创建一个 test_users 数据表, 添加 3 个字段: id, user, password. 并录入几条记录.

定义一个 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.

4. 请求的转发和重定向:

1). 本质区别: 请求的转发只发出了一次请求, 而重定向则发出了两次请求.

具体:

①. 请求的转发: 地址栏是初次发出请求的地址.
请求的重定向: 地址栏不再是初次发出的请求地址. 地址栏为最后响应的那个地址

②. 请求转发: 在最终的 Servlet 中, request 对象和中转的那个 request 是同一个对象.
请求的重定向: 在最终的 Servlet 中, request 对象和中转的那个 request 不是同一个对象.

③. 请求的转发: 只能转发给当前 WEB 应用的的资源
请求的重定向: 可以重定向到任何资源.

④. 请求的转发: / 代表的是当前 WEB 应用的根目录
请求的重定向: / 代表的是当前 WEB 站点的根目录.

5. JSP:

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 代码的执行.

6. 和属性相关的方法:

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 中
都可以获取到.

7. MVC 设计模式.

Web基础

1. 使用 JavaEE 版的 Eclipse 开发动态的 WEB 工程(JavaWEB 项目)

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 项目.

2. Servlet 的 HelloWorld

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>

3. Servlet 容器: 运行 Servlet、JSP、Filter 等的软件环境.

1). 可以来创建 Servlet, 并调用 Servlet 的相关生命周期方法.
2). JSP, Filter, Listener, Tag …

4. Servlet 生命周期的方法: 以下方法都是由 Serlvet 容器负责调用.

1). 构造器: 只被调用一次. 只有第一次请求 Servlet 时, 创建 Servlet 的实例. 调用构造器.
这说明 Serlvet 的单实例的!
2). init 方法: 只被调用一次. 在创建好实例后立即被调用. 用于初始化当前 Servlet.
3). service: 被多次调用. 每次请求都会调用 service 方法. 实际用于响应请求的.
4). destroy: 只被调用一次. 在当前 Servlet 所在的 WEB 应用被卸载前调用. 用于释放当前 Servlet 所占用的资源.

5. load-on-startup 参数:

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 容器加载时创建实例, 且数组越小越早被创建.

6. 关于 serlvet-mapping:

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>

7. ServletConfig: 封装了 Serlvet 的配置信息, 并且可以获取 ServletContext 对象

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 的配置名称(了解)

8. ServletContext

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 相关的几个方法:

9. GET 请求和 POST 请求:

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              --请求体中传递参数. 

10. 如何在 Serlvet 中获取请求信息:

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.


Tomcat认识

1. 部署并启动 tomcat 服务器.

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
因为端口已经被占用了.

2. Tomcat: 开源的 Servlet 容器.

3. 可以通过修改 server.xml 文件中的配置信息来修改 Tomcat 服务器的端口号:

<Connector port="8989" protocol="HTTP/1.1" 
           connectionTimeout="20000" 
           redirectPort="8443" />

把 port 的值改为其他的端口号即可.

4. 为了可以在任意目录下启动 Tomcat 服务器

4.1 把 D:\apache-tomcat-6.0.16\bin 添加到 path 下

添加成功后, 若在任意目录下通过 startup 启动 Tomcat 服务器, 会有提示:

The CATALINA_HOME environment variable is not defined correctly
This environment variable is needed to run this program

即: 要求设置 CATALINA_HOME 这个环境变量

5. 设置 CATALINA_HOME 环境变量:

5.1 通过阅读 startup.bat 批处理文件, 可知 CATALINA_HOME 环境变量下有一个 bin 目录,

而 bin 目录又有一个 catalina.bat 文件, 由此可知 CATALINA_HOME 指向的应该是 Tomcat
安装的根目录

于是把 Tomcat 的根目录设为 CATALINA_HOME 环境变量.

此时即可以在 任意 目录下通过 startup.bat、shutdown.bat 启动、关闭 Tomcat 服务器.

6. 继续阅读 startup.bat 文件, 发现启动 tomcat 服务器的是 catalina.bat 文件

在命令行窗口直接输入 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: 关闭服务器.

7. 第一个 WEB 应用程序: 开发, 并部署到 Tomcat 服务器下运行

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

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

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=”less.js” type=”text/javascript”></script>
  • 如果加载多个 .less 样式表文件,每个文件都会被单独编译。因此,一个文件中所定义的任何变量、mixin 或命名空间都无法在其它文件中访问 。

Less CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script>

附加导航(Affix)插件

附加导航(Affix)插件允许某个 <div> 固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不会随着页面其他部分一起滚动。

想要单独引用该插件的功能,需要引用 affix.js。

用法

通过 data 属性或者通过 JavaScript 来使用附加导航(Affix)插件。

  • 通过 data 属性:如需向元素添加附加导航(Affix)行为,只需要向需要监听的元素添加 data-spy=”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>
  • 通过 JavaScript:您可以通过 JavaScript 手动为某个元素添加附加导航(Affix)
$('#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>

通过 CSS 定位

在上面两种使用附加导航(Affix)插件的方式中,您都必须通过 CSS 定位内容。附加导航(Affix)插件在三种 class 之间切换,每种 class 都呈现了特定的状态: .affix、.affix-top 和 .affix-bottom。请按照下面的步骤,来为这三种状态设置您自己的 CSS(不依赖此插件)。

  • 在开始时,插件添加 .affix-top 来指示元素在它的最顶端位置。这个时候不需要任何的 CSS 定位。
  • 当滚动经过添加了附加导航(Affix)的元素时,应触发实际的附加导航(Affix)。此时 .affix 会替代 .affix-top,同时设置 position: fixed;(由 Bootstrap 的 CSS 代码提供)。
  • 如果定义了底部偏移,当滚动到达该位置时,应把 .affix 替换为 .affix-bottom。由于偏移是可选的,假如设置了该偏移,则要求同时设置适当的 CSS。在这种情况下,请在必要的时候添加 position: absolute;。

选项

| 选项名称 | 类型/默认值 | Data属性名称 | 描述 |
| offset | number|function|object
默认值:10 | data-offset | 当计算滚动位置时,距离顶部的偏移像素。
如果设置了一个数字,则该偏移量的值将被应用在顶部和底部。
如果设置了一个对象偏移,则其值形如
offset: { top: 10 } 或 offset: { top: 10, bottom: 5 }。
如果需要动态计算偏移,请使用函数。 |

轮播(Carousel)插件

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>

用法

  • 通过 data 属性:使用 data 属性可以很容易控制轮播(Carousel)的位置。
  1. 属性 data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置。
  2. 使用 data-slide-to 来向轮播传递一个原始滑动索引,data-slide-to=”2″ 将把滑块移动到一个特定的索引,索引从 0 开始计数。
  3. data-ride=”carousel” 属性用于标记轮播在页面加载时就开始动画播放。
  • 通过 JavaScript:轮播(Carousel)可通过 JavaScript 手动调用。
$('.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)插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项。

如果您想要单独引用该插件的功能,那么您需要引用 collapse.js。同时,也需要在您的 Bootstrap 版本中引用 Transition(过渡)插件。

可以使用折叠(Collapse)插件:

  • 创建可折叠的分组或折叠面板(accordion)。
<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>
  1. data-toggle=”collapse” 添加到您想要展开或折叠的组件的链接上。
  2. href 或 data-target 属性添加到父组件,它的值是子组件的 id。
  3. data-parent 属性把折叠面板(accordion)的 id 添加到要展开或折叠的组件的链接上。
  • 创建不带 accordion 标记的简单的可折叠组件(collapsible)。
<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-toggle=”collapse” 和 data-target,自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器,并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的,请添加额外的 class .in。

为了向可折叠控件添加类似折叠面板的分组管理,请添加 data 属性 data-parent=”#selector”。

  • 通过 JavaScript:可通过 JavaScript 激活 collapse 方法。
$('.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)插件,您可以添加进一些交互,比如控制按钮状态,或者为其他组件(如工具栏)创建按钮组。

单独引用的话,引用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>

复选框(Checkbox)

可以创建复选框组,并通过向 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>

单选按钮(Radio)

类似地,您可以创建单选按钮组,并通过向 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)消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框(Alert)插件。可以向所有的警告框消息添加可取消(dismiss)功能。

用法

以下两种方式启用警告框的可取消(dismissal)功能:

  • 通过data属性:通过数据API(Data API)添加可取消功能,只需要向关闭按钮添加data-dismiss=”alert”,就会自动为警告框添加关闭功能。
<a class="close" data-dismiss="alert" href="#" aria-hidden="true">
    ×
</a>
  • 通过JavaScript:通过JavaScript添加可取消功能:
$(".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)插件

弹出框(Popover)与提示工具(Tooltip)类似,提供了一个扩展的视图。如需激活弹出框,用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用Bootstrap数据API(Bootstrap DATA API)来填充。该方法依赖于工具提示(Tooltip)。

如果想要单独引用该插件的功能,那么引用popover.js。

用法

弹出框(Popover)插件根据需求生成内容和标记,默认情况下是把弹出框(Popover)放在他们的触发元素后面。可以有以下两种方式添加弹出框(Popover):

  • 通过data属性:如需添加一个弹出框(Popover),只需向一个锚/按钮标签添加data-toggle=”popover”即可。锚的title即为弹出框(Popover)的文本。默认情况下,插件把弹出框(Popover)设置在顶部。
<a href="#" data-toggle="popover" title="Example popover">
    请悬停在我的上面
</a>
  • 通过JavaScript:通过JavaScript启用弹出框(Popover):
$('#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)就显得非常有用。提示工具(Tooltip)插件是受Jason Frame写的jQuery.tipsy的启发。提示工具(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用CSS实现动画效果,用data属性存储标题信息。

也一样单独引用该插件功能,需要要引用tooltip.js。

用法

提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(Tooltip)放在他们的触发元素后面。可以有以下两种方式添加提示工具(Tooltip):

  • 通过data属性:如需添加一个提示工具(Tooltip),只需向一个锚标签添加data-toggle=”tooltip”即可。锚的title即为提示工具(Tooltip)的文本。默认情况下,插件把提示工具(Tooltip)设置在顶部。
<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
  • 通过JavaScript:通过JavaScript触发提示工具(Tooltip):
$('#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)插件

通过这个插件可以把内容放置在标签页或者胶囊式标签页,甚至是下拉菜单标签页中。

一样的想单独引用该插件的功能,只需引用tab.js。

用法

通过以下两种方式启用标签页:

  • 通过data属性:需要添加data-toggle=”tab”或data-toggle=”pill”到锚文本链接中。
    添加nav 和 nav-tabs类到ul中,将会应用Bootstrap标签样式,添加nav和nav-pills类到ul中,将会应用Bootstrap胶囊式样式。
<ul class="nav nav-tabs">
    <li><a href="#identifier" data-toggle="tab">Home</a></li>
    ...
</ul>
  • 通过JavaScript:可以使用JavaScript来启用标签页:
$('#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)插件

滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着滚动,基于滚动条的位置向导航栏添加.active class。

如果想要单独引用该插件的功能,需要引用scrollspy.js。或者,引用bootstrap.js或者压缩版的bootstrap.min.js。

用法

向顶部导航添加滚动监听行为:

  • 通过data属性:向想要监听的元素(通常是body)添加data-spy=”scroll”。然后添加带有Bootstrap .nav组件的父元素的ID或class的属性data-target。为了它能正常工作,必须确保页面主体中有匹配你所要监听链接的ID的元素存在。
<body data-spy="scroll" data-target=".navbar-example">
....
<div class="navbar-example">
    <ul class="nav nav-tabs">
        ...
    </ul>
</div>
...
</body>
  • 通过JavaScript:可以通过JavaScript调用滚动监听,选取要监听的元素,然后调用.scrollspy()函数:
$('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)插件,可以向任何组件(比如导航栏、标签页、胶囊式导航菜单、按钮等)添加下拉菜单。
如果想要单独引用该插件的功能,那么需要引用dropdown.js。或者,引用bootstrap.js或压缩版的bootstrap.min.js。

用法

可以切换下拉菜单(Dropdown)插件的隐藏内容:

  • 通过data属性:向链接或按钮添加data-toggle=”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>
  • 通过JavaScript:通过JavaScript调用下拉菜单切换:
$('.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>

模态框(Modal)插件

模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

想要单独引用该插件的功能,需要引用modal.js。或者,引用bootstrap.js或压缩版的bootstrap.min.js。

用法

可以切换模态框(Modal)插件的隐藏内容:

  • 通过data属性:在控制器元素(比如按钮或者链接)上设置属性data-toggle=”modal”,同时设置data-target=”#identifier”或href=”#identifier”来指定要切换的特定的模态框(带有id=”identifier”)。
  • 通过JavaScript:使用这种技术,可以通过简单的一行JavaScript来调用带有id=”identifier”的模态框:
$('#identifier').modal(options)

实例

<h2>创建模态框(Modal)</h2>

<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>

<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabinde="-1" role="dialog" 
    aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">
                    ×
               </button>

               <h4 class="modal-title" id="myModalLable">模态框(Modal)标题</h4>
           </div>


          <div class="modal-body">在这里添加一些文本</div>

          <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">
                  关闭
              </button>
              <button type="button" class="btn btn-primary">
                  提交更改
              </button>
         </div>
     </div>
  </div>
</div>

代码讲解:

  • 使用模态窗口,需要有某种触发器。可以使用按钮或者链接。这里我们使用的是按钮。
  • 如果你仔细查看上面的代码,会发现在<button>标签中,data-target=”#myModal”是想要在页面上加载的模态框的目标。可以在页面上创建多个模态框,然后为每个模态框创建不同的触发器。现在,很明显,不能再同一时间加载多个模块,但可以在页面上创建多个在不同时间进行加载。
  • 在模态框中需要注意两点:
  1. 第一是.modal,用来把<div>的内容识别为模态框。
  2. 第二是.fade class。当模态框被切换时,它会引起内容淡入淡出。

– aria-lablelledby=”myModalLabel”,该属性引用模态框的标题。
– 属性aria-hidden=”true”用于保持模态框窗口不可见,直到触发器被触发为止(比如点击在相关的按钮上)
– <div class=”modal-header”>,modal-header是为模态窗口的头部定义样式的类。
– class=”close”,close是一个CSS class,用于模态窗口的关闭按钮设置样式。
– data-dismiss=”modal”,是一个自定义的HTML5 data属性。在这里它被用于关闭模态窗口。
– class=”modal-body”,是Bootstrap CSS的一个CSS class,用于为模态窗口的主体设置样式。
– class=”modal-footer”,是Bootstrap CSS的一个CSS class,用于为模态窗口的底部设置样式。
– data-toggle=”modal”,HTML5自定义的data属性data-toggle用于打开模态窗口。

选项

有一些选项可以用来定制模态窗口(Modal Window)的外观和感观,它们是通过data属性或JavaScript来传递的。

选项名称 类型/默认值 Data属性名称 描述
backdrop boolean 或 string ‘static’
默认值:true
data-backdrop 指定一个静态的背景,当用户点击
模态框外部时不会关闭模态框。
keyboard boolean
默认值:true
data-keyboard 当按下escape键时关闭模态框,
设置为false时则按键无效。
show boolean
默认值:true
data=show 当初始化时显示模态框。
remote path
默认值:false
data-remote 使用jQuery .load方法,为模态框的主体注入内容。
如果添加了一个带有有效URL的href,则会加载其中的内容。
<a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>

方法

下面是一些可与modal()一起使用的有用的方法。

方法 描述 实例
Options:.modal(options) 把内容作为模态框激活。
接受一个可选的选项对象。
$('#identifier').modal({ keyboard:false })
Toggle:.modal(‘toggle’) 手动切换模态框。 $('#identifier').modal('toggle')
Show:.modal(‘show’) 手动打开模态框。 $('#identifier').modal('show')
Hide:.modal(‘hide’) 手动隐藏模态框。 $('#identifier').modal('hide')
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
    aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>
            </div>
            <div class="modal-body">按下 ESC 按钮退出。</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<script>
$(function() {
    $('#myModal').modal({
        keyboard: true
    })
});
</script>

只需要点击ESC键,模态窗口即会退出。

事件

事件 描述
show.bs.modal 在调用show方法后触发。
shown.bs.modal 当模态框对用户可见时触发(将等待CSS过渡效果完成)。
hide.bs.modal 当调用hide实例方法时触发。
hidden.bs.modal 当模态框完全对用户隐藏时触发。
<!-- 模态框(Modal) -->
<h2>模态框(Modal)插件事件</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>
            </div>
            <div class="modal-body">点击关闭按钮检查事件功能。</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<script>
$(function() {
    $('#myModal').modal('hide')
});
</script>

<script>
$(function() {
    $('#myModal').on('hide.bs.modal',
    function() {
        alert('嘿,我听说您喜欢模态框...');
    })
});
</script>

如果您点击了 关闭 按钮,即 hide 事件,则会显示一个警告消息。

过渡效果(Transition)插件

过渡效果(Transition)插件提供了简单的过渡效果。

如果想要单独引用该插件的功能,那么除了其他的JS文件,还需要引用transition.js。或者,引用bootstrap.js或压缩版的bootstrap.min.js。

Transition.js是transitionEnd事件和CSS过渡效果模拟器的基本帮助类。它被其他插件用来检查CSS过渡效果支持,并用来获取过渡效果。

使用案例

过渡效果(Transition)插件的使用案例:

  • 具有幻灯片或淡入效果的模态对话框。
  • 具有淡出效果标签页。
  • 具有淡出效果的警告框。
  • 具有幻灯片效果的轮播板。

Bootstrap 插件简介

Bootstrap自带12中jQuery插件,扩展了功能,可以给站点添加更多的互动。
即使你不是一名高级的JavaScript开发人员,也可以着手学习Bootstrap的JavaScript插件。
利用Bootstrap数据API(Bootstrap Data API),大部分的插件可以在不编写任何代码的情况被触发。
站点引用Bootstrap插件的方式有两种:

  • 单独引用:使用Bootstrap的个别的*.js文件。一些插件和CSS组件依赖于其他插件。如果单独引用插件,请先确保已弄清这些插件之间的依赖关系。
  • 编译(同时)引用:使用bootstrap.js或压缩版的bootstrap.min.js。

不要尝试同时引用这两个文件,因为bootstrap.js和bootstrap.min.js都包含了所有的组件。

所有的插件都依赖于jQuery。所以必须在插件文件之前引用jQuery。

data属性

  • 你可以仅仅通过data属性API就能使用所有的Bootstrap插件,无需写一行JavaScript代码。这是Bootstrap中的一等API,也应该是你首选方式。
  • 话又说回来,在某些情况下可能需要将此功能关闭。因此,还提供了关闭data属性API的方法,即解除以data-api为命名空间并绑定再文档上的事件。
$(document).off('.data-api')
  • 如需关闭一个特定的插件,只需要在data-api命名空间前加上该插件的名称作为命名空间即可。
$(document).off('.alert.data-api')

编程方式的API

我们为所有Bootstrap插件提供了纯JavaScript方式的API。所有公开的API都是支持单独或链式调用方式,并且返回其所操作的元素集合(:和jQuery的调用形式一致)。

$(".btn.danger").button("toggle").addClass("fat")

所有的方法都可以接受一个可选的选项对象作为参数,或者一个代表特定方法的字符串,或者不带任何参数(这种情况下,将会初始化插件为默认行为)。

// 初始化默认行为
$("#myModal").modal()

// 初始化为不支持键盘
$("#myModal").modal({keyboard:false})

// 初始化并立即调用show
$("#myModal").modal('show')

每个插件在Constructor属性上也暴露了其原始的构造函数:$.fn.popover.Constructor。如果你想获取某个特定插件的实例,可以直接通过页面元素获取:

$('[rel=popover]').data('popover').

避免命名空间冲突

某些时候Bootstrap插件可能需要与其他UI框架一起使用。在这种情况下,可能会发生命名空间冲突。如果不幸发生了这种情况,你可以通过调用插件的.noConflict方法恢复期原始值。

// 返回$.fn.button之前所赋的值
var bootstrapButton = $.fn.button.noConflict()

// 为$().bootstrapBtn赋予Bootstrap功能
$.fn.bootstrapBtn = bootstrapButton

事件

Bootstrap为大多数插件的独特行为提供了自定义事件。一般来说,这些事件有两种形式:

  • 动词不定式:这会在事件开始被触发。例如ex:show。动词不定式事件提供了preventDefault功能。这使得在事件开始前可以停止操作的执行。
$('#myModal').on('show.bs.modal', function(e){
    // 阻止模态框的显示
    if(!data) return e.preventDefault()
})
  • 过去分词形式:这会在动作执行完毕之后被触发。例如ex:shown。