Bootstrap学习
bootsrap学习之 - Glyphicons 字体图标
包含250多个来自 Glyphicon Halflings 的字体图标
使用方法 :可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。
<spanclass="glyphicon glyphicon-search"aria-hidden="true"></span>
样例代码:
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css"> <script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.7.2.min.js"></script> <script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script> </head> <body style="padding:20px;"> <div> <button class="btn btn-default" > <span class="glyphicon glyphicon-align-left"></span> </button> <button class="btn btn-default" > <span class="glyphicon glyphicon-align-center"></span> </button> <button class="btn btn-default" > <span class="glyphicon glyphicon-align-right"></span> </button> <button class="btn btn-default" > <span class="glyphicon glyphicon-align-justify"></span> </button> </div> <hr/> <div> <button class="btn btn-default btn-lg" > <span class="glyphicon glyphicon-star"></span> Star </button> <button class="btn btn-default btn-sm" > <span class="glyphicon glyphicon-star"></span> Star </button> <button class="btn btn-default btn-xs" > <span class="glyphicon glyphicon-star"></span> Star </button> </div> </body> </html>
效果图:
bootsrap学习之 - 下拉列表
下拉列表使用前的引入:
在使用下拉列表前需要引入bootstrap-dropdown.js文件,并拷贝至 /bootstrap3/js/ 下,下载地址:bootstrap-dropdown.js
在JSP中同样需要引入