【Bootstrap】011-组件：Glyphicons 字体图标、下拉菜单

訾博ZiBo

发布于 2025-01-06 15:50:04

6900

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

一、Glyphicons 字体图标

1、所有可用的图标

见https://v3.bootcss.com/components/#glyphicons

2、如何使用

出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格；

注意：

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
	</head>
	<body>
		<button type="button" class="btn btn-default btn-lg">
		  <span class="glyphicon glyphicon-search" aria-hidden="true"/> 搜索
		</button>
		<button type="button" class="btn btn-default btn-lg" aria-label="Left Align">
		  <span class="glyphicon glyphicon-align-left" aria-hidden="true"/> 左对齐
		</button>
		<button type="button" class="btn btn-default btn-lg">
		  <span class="glyphicon glyphicon-star" aria-hidden="true"/> Star
		</button>
	</body>
</html>

运行结果：

3、附加

alert 组件中所包含的图标是用来表示这是一条错误消息的，通过添加额外的 .sr-only 文本就可以让辅助设备知道这条提示所要表达的意思了；

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
	</head>
	<body>
		<div class="alert alert-danger" role="alert">
		  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
		  <span class="sr-only">Error:</span>
		  Enter a valid email address
		</div>
	</body>
</html>

运行结果：

二、下拉菜单

1、下拉菜单实例

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码；

要想实现交互效果，需要用到下拉菜单的 JavaScript 插件；

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 引入JS文件:必须先引入jquery再引入bootstrap -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="dropdown">
		  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
		    Dropdown
		    <span class="caret"></span>
		  </button>
		  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
		    <li><a href="#">Action</a></li>
		    <li><a href="#">Another action</a></li>
		    <li><a href="#">Something else here</a></li>
		    <li role="separator" class="divider"></li>
		    <li><a href="#">Separated link</a></li>
		  </ul>
		</div>
	</body>
</html>

运行结果：

2、菜单向上弹出

通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）；

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 引入JS文件:必须先引入jquery再引入bootstrap -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<div class="dropup">
		  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		    Dropup
		    <span class="caret"></span>
		  </button>
		  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
		    <li><a href="#">Action</a></li>
		    <li><a href="#">Another action</a></li>
		    <li><a href="#">Something else here</a></li>
		    <li role="separator" class="divider"></li>
		    <li><a href="#">Separated link</a></li>
		  </ul>
		</div>
	</body>
</html>

运行结果：

3、对齐

默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐；

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 引入JS文件:必须先引入jquery再引入bootstrap -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="dropdown">
		  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
		    Dropdown
		    <span class="caret"></span>
		  </button>
		  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
		    <li><a href="#">Action</a></li>
		    <li><a href="#">Another action</a></li>
		    <li><a href="#">Something else here</a></li>
		    <li role="separator" class="divider"></li>
		    <li><a href="#">Separated link</a></li>
		  </ul>
		</div>
	</body>
</html>

运行结果：

4、标题

在任何下拉菜单中均可通过添加标题来标明一组动作；

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 引入JS文件:必须先引入jquery再引入bootstrap -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="dropdown">
			<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
			 aria-haspopup="true" aria-expanded="true">
				Dropdown
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
				<li class="dropdown-header">我就是标题</li>
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li role="separator" class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div>
	</body>
</html>

运行结果：

5、分割线

为下拉菜单添加一条分割线，用于将多个链接分组；

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 引入JS文件:必须先引入jquery再引入bootstrap -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="dropdown">
			<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
			 aria-haspopup="true" aria-expanded="true">
				Dropdown
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
				<li class="dropdown-header">我就是标题</li>
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li role="separator" class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div>
	</body>
</html>

运行结果：

6、禁用的菜单项

为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项；

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title></title>
		<!-- 引入bootstrap -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<!-- 引入JS文件:必须先引入jquery再引入bootstrap -->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="dropdown">
			<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
			 aria-haspopup="true" aria-expanded="true">
				Dropdown
				<span class="caret"></span>
			</button>
			<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
			  <li><a href="#">Regular link</a></li>
			  <li class="disabled"><a href="#">Disabled link</a></li>
			  <li><a href="#">Another link</a></li>
			</ul>
		</div>
	</body>
</html>

运行结果：

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除

dropdown

href