bootstrap 学习笔记 - 5 （Glyphicons字体 + 下拉菜单 + 按钮组+ 按钮下拉菜单）

来源：互联网发布：javascript 表格并排放编辑：程序博客网时间：2024/06/10 13:14

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中同样需要引入到界面文件中，如：<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap-dropdown.js"></script>

下拉列表元素：

下拉列表头：<li role="presentation" class="dropdown-header">编程语言</li>
分割线：<li role="presentation" class="divider"></li>
禁用的列表项：<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>

样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html><html lang="zh_CN"><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><script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap-dropdown.js"></script></head><body><!-- dropdown --><div class="dropdown" style="padding: 20px;"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="true">Dropdown<span class="caret"></span></button><ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" href="#">Item 1</a></li><li role="presentation"><a role="menuitem" href="#">Item 2</a></li><li role="presentation"><a role="menuitem" href="#">Item 3</a></li><li role="presentation"><a role="menuitem" href="#">Item 4</a></li></ul></div><!-- dropdown  dropdown-menu-left--><div class="dropdown" style="padding: 20px;"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="true">Dropdown<span class="caret"></span></button><ul class="dropdown-menu  dropdown-menu-left" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">Menu List</li> <li role="presentation" class="divider"></li><li role="presentation"><a role="menuitem" href="#">Item 1</a></li><li role="presentation"><a role="menuitem" href="#">Item 2</a></li> <li role="presentation" class="divider"></li><li role="presentation"><a role="menuitem" href="#">Item 3</a></li><li role="presentation"><a role="menuitem" href="#">Item 4</a></li></ul></div><!-- dropup  dropdown-menu-left--><div class="dropup" style="padding: 20px;"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="true">Dropdown<span class="caret"></span></button><ul class="dropdown-menu  dropdown-menu-left" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">编程语言</li><li role="presentation"><a role="menuitem" href="#">Item 1</a></li><li role="presentation" class="divider"></li><li role="presentation"><a role="menuitem" href="#">Item 2</a></li><li role="presentation"><a role="menuitem" href="#">Item 3</a></li><li role="presentation"><a role="menuitem" href="#">Item 4</a></li><li role="menuitem" class="disabled"><a role="menuitem" href="#">你没有权限点我</a></li></ul></div></body></html>

效果图：

bootsrap学习之 - 按钮组

btn-group ：横向按钮组
btn-group-vertical ：纵向按钮组
btn-group-justified ：两端对齐的按钮组

样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html><html lang="zh_CN"><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><script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap-dropdown.js"></script><style type="text/css">.color{background-color: blue;}</style></head><body style="padding:20px;"><p>按钮组</p><div class="btn-group" role="group"><button type="button" class="btn btn-default">Left</button><button type="button" class="btn btn-default">Middle</button><button type="button" class="btn btn-default">Right</button></div><hr/><p>按钮工具栏</p><div class="btn-toolbar" role="toolbar"><div class="btn-group" role="group"><button type="button" class="btn btn-default">Left</button><button type="button" class="btn btn-default">Middle</button><button type="button" class="btn btn-default">Right</button></div><div class="btn-group" role="group"><button type="button" class="btn btn-default">Left</button><button type="button" class="btn btn-default">Middle</button><button type="button" class="btn btn-default">Right</button></div><div class="btn-group" role="group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button></div></div><hr/><p>按钮工具栏-小号</p><div class="btn-toolbar" role="toolbar"><div class="btn-group btn-group-xs" role="group"><button type="button" class="btn btn-default">Left</button><button type="button" class="btn btn-default">Middle</button><button type="button" class="btn btn-default">Right</button></div><div class="btn-group btn-group-xs" role="group"><button type="button" class="btn btn-default">Left</button><button type="button" class="btn btn-default">Middle</button><button type="button" class="btn btn-default">Right</button></div><div class="btn-group btn-group-xs" role="group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button></div></div><hr/><p>按钮工具栏-横向嵌套下拉列表</p><div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button><div class="btn-group" role="group"><button  class="btn btn-danger dropdown-toggle" data-toggle="dropdown" type="button"  aria-expanded="true">Dropdown<span class="caret"></span></button><ul class="dropdown-menu dropdown-menu-left" role="menu"  aria-labelledby="dropdownMenu1"><li role="presentation"><a  role="menuitem" href="#"><span class="glyphicon glyphicon-align-left"></span></a></li><li role="presentation"><a  role="menuitem" href="#"><span class="glyphicon glyphicon-align-center"></span></a></li><li role="presentation"><a  role="menuitem" href="#"><span class="glyphicon glyphicon-align-right"></span></a></li></ul></div></div><hr/><p>按钮工具栏-纵向嵌套下拉列表</p><div class="btn-group-vertical"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button><div class="btn-group" role="group"><button  class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"  aria-expanded="true">Dropdown<span class="caret"></span></button><ul class="dropdown-menu dropdown-menu-left" role="menu"  aria-labelledby="dropdownMenu1"><li role="presentation"><a  role="menuitem" href="#"><span class="glyphicon glyphicon-align-left"></span></a></li><li role="presentation"><a  role="menuitem" href="#"><span class="glyphicon glyphicon-align-center"></span></a></li><li role="presentation"><a  role="menuitem" href="#"><span class="glyphicon glyphicon-align-right"></span></a></li></ul></div></div><hr/><p>两端对齐的按钮组</p><div class="btn-group btn-group-justified" role="group"><div class="btn-group" role="group"><button type="button" class="btn btn-default"><a href="#"><span class="glyphicon glyphicon-align-left"></span> </a></button><button type="button" class="btn btn-default"><a href="#"><span class="glyphicon glyphicon-align-center"></span> </a></button><button type="button" class="btn btn-default"><a href="#"><span class="glyphicon glyphicon-align-right"></span> </a></button></div><div class="btn-group" role="group"><button type="button" class="btn btn-default"><a href="#"><span class="glyphicon glyphicon-align-left"></span> </a></button><button type="button" class="btn btn-default"><a href="#"><span class="glyphicon glyphicon-align-center"></span> </a></button><button type="button" class="btn btn-default"><a href="#"><span class="glyphicon glyphicon-align-right"></span> </a></button></div><div class="btn-group" role="group"><button type="button" class="btn btn-default"><a href="#"><span class="glyphicon glyphicon-align-left"></span> </a></button><button type="button" class="<span style="font-family: Arial, Helvetica, sans-serif;">btn btn-default</span><span style="font-family: Arial, Helvetica, sans-serif;">"></span><a href="#"><span class="glyphicon glyphicon-align-center"></span> </a></button><button type="button" class="btn btn-default"><a href="#"><span class="glyphicon glyphicon-align-right"></span> </a></button></div></div></body></html>

效果图：

bootsrap学习之 - 分裂式按钮下拉菜单

样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html><html lang="zh_CN"><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><script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap-dropdown.js"></script></head><body style="padding:20px;"> <div class="btn-group btn-group-xs"><button type="button" class="btn btn-warning" >warning</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">  <span class="caret"></span> </button> <ul class="dropdown-menu " role="menu"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li class="divider"></li> <li><a href="#">4</a></li> </ul> </div> <br/> <br/> <br/> <br/> <br/> <br/><div class="btn-group btn-group-xs dropup">  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">    Action <span class="caret"></span>  </button>    <ul class="dropdown-menu" role="menu">    <li><a href="#">Action</a></li>    <li><a href="#">Another action</a></li>    <li><a href="#">Something else here</a></li>    <li class="divider"></li>    <li><a href="#">Separated link</a></li>  </ul></div></body></html>

效果图：

0 0