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

最新推荐文章于 2024-07-18 06:47:06 发布
最新推荐文章于 2024-07-18 06:47:06 发布
阅读量569 收藏 1
点赞数
分类专栏： Bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29689343/article/details/108928993
版权

一、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>

运行结果：

 

 

 

 

 

 

 

 

訾博ZiBo
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap 组件：Glyphicons 字体图标
WangMin@汪末末
09-01 769
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 所有可用的图标 包括250多个来自 Glyphicon Halflings 的字体图标。例如下图的一些字体图标，更多的字体图标请见boostrap官方文档 。 如何使用字体图标 出于性能的考虑，所有图标都需要一个基类（glyphicon）和对应每个图标的类。为了设置正确的内补（padding），必须在图标和文本之间添加一个空格。 注意： 1 . 不要和其他组件混合使用 图标类不能和其它组件直
bootstrap-porject-1:bootstrap-porject-1
03-06
8. **字体和图标（Fonts & Icons）**：Bootstrap通常与 Glyphicons 或 Font Awesome 等图标库结合使用，为页面添加图标增强视觉效果。 通过对"bootstrap-porject-1"的深入研究，我们可以学习如何有效地利用...
Bootstrap 字体图标(Glyphicons)
lxw1844912514的博客
04-16 1444
http://www.runoob.com/bootstrap/bootstrap-glyphicons.html 什么是字体图标？ 字体图标是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。 为了表示对图标作者的感谢，希望您在使用时加上 GLYPHICONS 网站的链...
BootStrap入门到实战：BootStrap组件（一）- Glyphicons字体图标、下拉菜单、按钮组、按钮式下拉菜单
林林一928的博客
06-03 970
一、Glyphicons字体图标二、下拉菜单 用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性用jQuery实现1.3 菜单向上弹出2. 对齐.默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐3.对齐4.分割线5.禁用的菜单项三.按钮组。四.按钮式下拉菜单，1. 单按钮下拉菜单，2. 分裂式按钮下拉菜单...
Bootstrap字体图标大全(Glyphicons)-站长工具网
最新发布
MaYuntpkf的博客
07-18 333
Bootstrap字体图标大全（Glyphicons）是一个非常实用的工具，可以帮助您在网站中快速添加各种常见的图标。通过高度可定制、跨平台兼容、免费使用等特点，它成为许多网站开发者、设计师和前端工程师的首选。希望本文能帮助您了解如何使用Glyphicons，并为您提供其他有用的资源。这是一个为网站开发者、设计师和前端工程师准备的字体图标库，提供了大量高质量的图标供您选择和使用。这些图标由Bootstrap框架提供，可以帮助您在网站中快速添加各种常见的图标，从而提高用户体验和网站的可读性。
Glyphicons字体图标
u012138854的博客
09-21 84
Glyphicons字体图标-----好处可以减少请求，容易控制样式! <p> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-sort-by-attributes"></span> </b...
Bootstrap中的Glyphicon 字体图标
dawei5565的博客
06-15 445
在Bootstrap框架中也为大家提供了近200个不同的icon图片，而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <ti...
Bootstrap-RTL：Bootstrap RTL标准3和4
01-31
9. **字体图标（Glyphicons）**：Bootstrap的图标在RTL环境下可能会反转，Bootstrap-RTL会解决这个问题，确保图标在任何方向都能正确显示。 10. **自定义样式（Custom Styles）**：Bootstrap-RTL还提供了自定义的...
bootstrap-source-code:学习bootstrap
03-29
2. **组件**：Bootstrap提供了一系列预定义的UI组件，如按钮、表单、导航、模态框、下拉菜单、警告提示等。这些组件具有统一的视觉风格和交互行为，可以快速构建出用户友好的界面。 3. **字体和图标**：Bootstrap...
Bootstrap-Portfolio:02-css-bootstrap
04-14
5. **组件**：Bootstrap包含多种组件，如导航条（Navbar）、下拉菜单（Dropdowns）、模态框（Modals）、轮播图（Carousel）等，这些组件都预设了完整的样式和交互效果。 6. **排版**：Bootstrap对基本的HTML排版...
Bootstrap-mobile-website:手机网站项目
03-25
9. **字体图标**: Bootstrap内置了Glyphicons和Font Awesome等字体图标库，提供大量的矢量图标，可以在不同分辨率的设备上保持清晰，且易于缩放和着色。 10. **性能优化**: Bootstrap致力于提高网页性能，通过压缩...
glyphicon 图标大全新增62个
06-12
我们http://w3c.3306.biz/bootstrap/eg/bootstrap--glyphicons-list.html 网站找到bootstrap 图标，但是上面的是不完整的 复制粘贴图标都没有，如果再到其它网站去抠取，感觉不匹配，骰子还是原配的好，我引入了bootstrap-cerulean.min.css ，又新增了62个
Glyphicon 字体图标
weixin_34362790的博客
12-26 304
Bootstrap中的Glyphicon 字体图标 在Bootstrap框架中也为大家提供了近200个不同的icon图片，而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf...
Bootstrap Glyphicons图标
歪脖先生的博客
05-12 2261
可用的图标 Bootstrap3 提供了差不多300多个来自 Glyphicon Halflings 的字体图标，这些图标可用于按钮、链接、导航和表单等元素。最常见的的图标如图 3‑1所示： 图3-1 Glyphicons提供的图标 Glyphicons Halflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为表谢意，希望你在使用时，尽量为Glyphicon...
【11】Bootstrap — Glyphicons字体图标
有心博客
09-05 443
Glyphicons 字体图标 Glyphicon Halflings是字体图标，共有250多个，详细目录请参看Bootstrap中所有可用的Glyphicons图标代码示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA
3.1 Bootstrap 字体图标(Glyphicons)
梁辰兴的博客
07-13 882
字体图标是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。
bootstrap之glyphicon字体图标
热门推荐
想好了就去做吧 即便失败了 至少这条路上留下了你的脚印
09-02 1万+
glyphicon字体图标用途广泛，可以把它们应用到按钮、工具条中的按钮组、导航、输入框或下拉菜单等地方。例如，在做SM管理系统项目的时候，就可以在编辑、删除按钮中使用glyphicon字体图标。 出于性能的考虑，所有图标都需要一个基类glyphicon 和 一个对应每个图标的类glyphicon-xxx。我们可直接到Glyphicons字体图标库中，将图标下面的两个类copy下来，放到标...
bootstrap icon glyphicon
渐行渐远
06-06 1592
bootstrap icon glyphicon
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值