Bootstrap

最新推荐文章于 2024-07-05 20:20:47 发布

xx-03

最新推荐文章于 2024-07-05 20:20:47 发布

阅读量437

点赞数

分类专栏： java 文章标签： bootstrap html javascript

本文链接：https://blog.csdn.net/weixin_65736978/article/details/124571234

版权

图标的使用

例如：想使用bootstrap定义的闹铃图标，只需要复制图标下面的字符即可，此处为alarm.svg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="./bootstrap-icons-1.7.2/alarm.svg" alt="Bootstrap" width="30" height="30">
</body>
</html>

使用bootstrap的图标：

内联元素使用，且需要两个类：基本类、图标类，即可调用图标。

注意：需要设置padding，使图标与文本之间留有空地，更加美观；图标类不能与其他组件类联合使用。

图标使用时，基类为：glyphicon .

	<div>
		<a href="#">
			<span class="glyphicon glyphicon-user"></span> user
			<span class="glyphicon glyphicon-envelope"></span> email
			
		</a>
	</div>

导航栏样式

	<ul class="nav nav-pills">
		<li>
			<a href="#">
				<span class="glyphicon glyphicon-home"></span> 首页
				<span class="glyphicon glyphicon-pencil"></span> 应用
				<span class="glyphicon glyphicon-book"></span> 图书
			</a>
		</li>
	</ul>

输入框

			<div class="input-group">
				<span class="input-group-addon">
					<span class="glyphicon glyphicon-pencil"></span>
				</span>
				<input type="text" class="form-control">
			</div>

2
<!DOCTYPE html>
<html>
	<head>
		<meta charset=

最低0.47元/天解锁文章

xx-03

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap

图标的使用例如：想使用bootstrap定义的闹铃图标，只需要复制图标下面的字符即可，此处为alarm.svg<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><img src="./bootstrap-icons-1.7.2/
复制链接

扫一扫