你知道 bootstrap 框架中的字體圖標如何使用嗎?那么這篇文章 w3cschool 小編來告訴你如何使用 bootstrap 圖標?
使用圖標的好處就是可以使頁面不在單純的文字,過于單調(diào),可以增強頁面的豐富性,吸引用戶。
先來看下具體的實現(xiàn)效果:
具體代碼:
<!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)。