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

最新推荐文章于 2024-06-03 20:31:46 发布

zhagener

最新推荐文章于 2024-06-03 20:31:46 发布

阅读量2.5k

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/zhagener/article/details/46365175

版权

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中同样需要引入

最低0.47元/天解锁文章

zhagener

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap 学习笔记 - 5 （Glyphicons字体 + 下拉菜单 + 按钮组+ 按钮下拉菜单）

Bootstrap学习bootsrap学习之 - Glyphicons 字体图标包含250多个来自 Glyphicon Halflings 的字体图标使用方法：可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。class="glyphicon glyphicon-search"aria-hidden="true">
复制链接

扫一扫