亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

Bootstrap教程(12)--使用圖標

標簽:
Bootstrap

1. 背景

大家都晓得,使用图标后,页面效果肯定是好许多的。

一个简单的按钮,添加图标后,有一种传神的效果。精美的图标是要收费的,你享受人家优秀的成果,就得付出相应的价钱。

有一个相当不错的图标库Glyphicon,老外做的,一般情况下咱们要正儿八经的使用,是要收费的。

但是在Bootstrap框架下,使用Glyphicon图标是免费的,就是这么神奇!

2. 使用Glyphicon图标

使用Glyphicon图标很简单,为<span>标签添加相应的样式类即可,例如搜索图标。

<span class="glyphicon glyphicon-search"></span>

效果如下:
图片描述

3. 结合按钮使用

图标最常见的使用场景就是结合按钮使用了,可以直接将图标元素放入按钮元素中。示例代码:

			    <button type="button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-search"></span> 搜索
                </button>

效果如下:
图片描述

4. 小结

Glyphicon提供的图标库还是比较完整全面的,基本够用,需要使用时直接查询下,找到符合需求的样式类然后使用即可。

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
軟件工程師
手記
粉絲
1.5萬
獲贊與收藏
1524

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消