App下載

如何使用bootstrap圖標？

猿友 2021-04-27 10:10:58 瀏覽數(shù) (4991)
反饋

你知道 bootstrap 框架中的字體圖標如何使用嗎？那么這篇文章 w3cschool 小編來告訴你如何使用 bootstrap 圖標？

使用圖標的好處就是可以使頁面不在單純的文字，過于單調(diào)，可以增強頁面的豐富性，吸引用戶。

先來看下具體的實現(xiàn)效果：

bootstrap圖標

具體代碼：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 圖標 - 編程獅(w3cschool.cn)</title>
	<link rel="stylesheet" >  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>
	<button type="button" class="btn btn-default">
		<span class="glyphicon glyphicon-certificate"></span>
	</button>
	<button type="button" class="btn btn-default">
		<span class="glyphicon glyphicon-chevron-left"></span>
	</button>
	<button type="button" class="btn btn-default">
		<span class="glyphicon glyphicon-chevron-right"></span>
	</button>
	<button type="button" class="btn btn-default">
		<span class="glyphicon glyphicon-sort-by-order-alt"></span>
	</button>
</p>
<button type="button" class="btn btn-default">
	<span class="glyphicon glyphicon-comment"></span> info
</button>
<button type="button" class="btn btn-default btn-sm">
	<span class="glyphicon glyphicon-earphone"></span> iPhone
</button>
<button type="button" class="btn btn-default ">
	<span class="glyphicon glyphicon-user"></span> User
</button>
</body>
</html>

以上就是文章“如何使用 bootstrap 圖標？”的全部內(nèi)容。更多 bootstrap 框架的學習請關注 w3cschool 官網(wǎng)。

Bootstrap

0 人點贊