Bootstrap 基礎教程
Bootstrap 環(huán)境安裝
Bootstrap 教程
Bootstrap CSS
Bootstrap CSS 概覽
Bootstrap 按鈕
Bootstrap 表單
Bootstrap 表格
Bootstrap 代碼
Bootstrap 輔助類
Bootstrap 排版
Bootstrap 圖片
Bootstrap 網(wǎng)格系統(tǒng)
Bootstrap 網(wǎng)格系統(tǒng)實例：堆疊的水平
Bootstrap 網(wǎng)格系統(tǒng)實例：手機、平板電腦、臺式電腦
Bootstrap 網(wǎng)格系統(tǒng)實例：中型和大型設備
Bootstrap 響應式實用工具
Bootstrap 布局組件
Bootstrap Well
Bootstrap 按鈕下拉菜單
Bootstrap 按鈕組
Bootstrap 標簽
Bootstrap 超大屏幕（Jumbotron）
Bootstrap 導航欄
Bootstrap 導航元素
Bootstrap 多媒體對象（Media Object）
Bootstrap 分頁
Bootstrap 徽章（Badges）
Bootstrap 進度條
Bootstrap 警告（Alerts）
Bootstrap 列表組
Bootstrap 面板（Panels）
Bootstrap 面包屑導航（Breadcrumbs）
Bootstrap 輸入框組
Bootstrap 縮略圖
Bootstrap 下拉菜單（Dropdowns）
Bootstrap 頁面標題（Page Header）
Bootstrap 字體圖標(Glyphicons)
Bootstrap 插件
Bootstrap 按鈕（Button）
Bootstrap 標簽頁（Tab）
Bootstrap 插件概覽
Bootstrap 彈出框（Popover）
Bootstrap 附加導航（Affix）
Bootstrap 滾動監(jiān)聽（Scrollspy）
Bootstrap 過渡效果（Transition）
Bootstrap 警告框（Alert）
Bootstrap 輪播（Carousel）
Bootstrap 模態(tài)框（Modal）插件
Bootstrap 提示工具（Tooltip）
Bootstrap 下拉菜單（Dropdown）
Bootstrap 折疊（Collapse）
Bootstrap 附錄
Bootstrap CSS編碼規(guī)范
Bootstrap HTML編碼規(guī)范
Bootstrap UI 編輯器
?
Ce document utilise Manuel du site Web PHP chinois Libérer
personnages
Bootstrap 字體圖標(Glyphicons)
本章將講解字體圖標(Glyphicons)，并通過一些實例了解它的使用。Bootstrap 捆綁了 200 多種字體格式的字形。首先讓我們先來理解一下什么是字體圖標。
什么是字體圖標？
字體圖標是在 Web 項目中使用的圖標字體。雖然，Glyphicons Halflings 需要商業(yè)許可，但是您可以通過基于項目的 Bootstrap 來免費使用這些圖標。
為了表示對圖標作者的感謝，希望您在使用時加上 GLYPHICONS 網(wǎng)站的鏈接。
獲取字體圖標
我們已經(jīng)在 環(huán)境安裝 章節(jié)下載了 Bootstrap 3.x 版本，并理解了它的目錄結構。在 fonts 文件夾內(nèi)可以找到字體圖標，它包含了下列這些文件：
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
相關的 CSS 規(guī)則寫在 dist 文件夾內(nèi)的 css 文件夾內(nèi)的 bootstrap.css 和 bootstrap-min.css 文件上。
字體圖標在線生成
圖標定制生成
CSS 規(guī)則解釋
下面的 CSS 規(guī)則構成 glyphicon class。
@font-face?{
??font-family:?'Glyphicons?Halflings';
??src:?url('../fonts/glyphicons-halflings-regular.eot');
??src:?url('../fonts/glyphicons-halflings-regular.eot?#iefix')?format('embedded-opentype'),?url('../fonts/glyphicons-halflings-regular.woff')?format('woff'),?url('../fonts/glyphicons-halflings-regular.ttf')?format('truetype'),?url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular')?format('svg');
}
.glyphicon?{
??position:?relative;
??top:?1px;
??display:?inline-block;
??font-family:?'Glyphicons?Halflings';
??-webkit-font-smoothing:?antialiased;
??font-style:?normal;
??font-weight:?normal;
??line-height:?1;
??-moz-osx-font-smoothing:?grayscale;
}
所以 font-face 規(guī)則實際上是在找到 glyphicons 地方聲明 font-family 和位置。
.glyphicon class 聲明一個從頂部偏移 1px 的相對位置，呈現(xiàn)為 inline-block，聲明字體，規(guī)定 font-style 和 font-weight 為 normal，設置行高為 1。除此之外，使用 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 獲得跨瀏覽器的一致性。
然后，這里的
.glyphicon:empty?{
??width:?1em;
}
是空的 glyphicon。
這里有 200 個 class，每個 class 針對一個圖標。這些 class 的常見格式如下：
.glyphicon-keyword:before?{
??content:?"hexvalue";
}
比如，使用的 user 圖標，它的 class 如下：
.glyphicon-user:before?{
??content:?"\e008";
}
用法
如需使用圖標，只需要簡單地使用下面的代碼即可。請在圖標和文本之間保留適當?shù)目臻g。
<span?class="glyphicon?glyphicon-search"></span>
下面的實例演示了如何使用字體圖標：
<!DOCTYPE?html> <html> <head> ???<title>Bootstrap?實例?-?如何使用字體圖標</title> ???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet"> ???<script?src="/scripts/jquery.min.js"></script> ???<script?src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <p> ???<button?type="button"?class="btn?btn-default"> ??????<span?class="glyphicon?glyphicon-sort-by-attributes"></span> ???</button> ???<button?type="button"?class="btn?btn-default"> ??????<span?class="glyphicon?glyphicon-sort-by-attributes-alt"></span> ???</button> ???<button?type="button"?class="btn?btn-default"> ??????<span?class="glyphicon?glyphicon-sort-by-order"></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?btn-lg"> ??<span?class="glyphicon?glyphicon-user"></span>?User </button> <button?type="button"?class="btn?btn-default?btn-sm"> ??<span?class="glyphicon?glyphicon-user"></span>?User </button> <button?type="button"?class="btn?btn-default?btn-xs"> ??<span?class="glyphicon?glyphicon-user"></span>?User </button> </body> </html>
結果如下所示：
帶有導航欄的字體圖標
<!DOCTYPE?html>
<html>
??<head>
????<title>導航欄的字體圖標</title>
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<!--?Bootstrap?-->
????<link?>
????<style>
????body?{
????padding-top:?50px;
????padding-left:?50px;
????}
????</style>
????<!--[if?lt?IE?9]>
??????<script?src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
????<![endif]-->
??</head>
??<body>
????<div?class="navbar?navbar-fixed-top?navbar-inverse"?role="navigation">
??????<div?class="container">
????????<div?class="navbar-header">
??????????<button?type="button"?class="navbar-toggle"?data-toggle="collapse"?data-target=".navbar-collapse">
????????????<span?class="sr-only">Toggle?navigation</span>
????????????<span?class="icon-bar"></span>
????????????<span?class="icon-bar"></span>
????????????<span?class="icon-bar"></span>
??????????</button>
??????????<a?class="navbar-brand"?href="#">Project?name</a>
????????</div>
????????<div?class="collapse?navbar-collapse">
??????????<ul?class="nav?navbar-nav">
????????????<li?class="active"><a?href="#"><span?class="glyphicon?glyphicon-home">Home</span></a></li>
????????????<li><a?href="#shop"><span?class="glyphicon?glyphicon-shopping-cart">Shop</span></a></li>
????????????<li><a?href="#support"><span?class="glyphicon?glyphicon-headphones">Support</span></a></li>
??????????</ul>
????????</div><!--?/.nav-collapse?-->
??????</div><!--?/.container?-->
????</div>
????<!--?jQuery?(Bootstrap?插件需要引入)?-->
????<script?src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
????<!--?包含了所有編譯插件?-->
????<script?src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
??</body>
</html>
定制字體圖標
我們已經(jīng)看到如何使用字體圖標，接下來我們看看如何定制字體圖標。
我們將以上面的實例開始，并通過改變字體尺寸、顏色和應用文本陰影來進行定制圖標。
下面是開始的代碼：
<button?type="button"?class="btn?btn-primary?btn-lg"> ??<span?class="glyphicon?glyphicon-user"></span>?User </button>
效果如下所示：
定制字體尺寸
通過增加或減少圖標的字體尺寸，您可以讓圖標看起來更大或更小。
<button?type="button"?class="btn?btn-primary?btn-lg"?style="font-size:?60px"> ??<span?class="glyphicon?glyphicon-user"></span>?User </button>
定制字體顏色
<button?type="button"?class="btn?btn-primary?btn-lg"?style="color:?rgb(212,?106,?64);"> ??<span?class="glyphicon?glyphicon-user"></span>?User </button>
應用文本陰影
<button?type="button"?class="btn?btn-primary?btn-lg"?style="text-shadow:?black?5px?3px?3px;"> ??<span?class="glyphicon?glyphicon-user"></span>?User </button>
圖標列表
| 圖標 | 類名 | 實例 |
|---|---|---|
| glyphicon glyphicon-asterisk | 實例 ? | |
| glyphicon glyphicon-plus | 實例 ? | |
| glyphicon glyphicon-minus | 實例 ? | |
| glyphicon glyphicon-euro | 實例 ? | |
| glyphicon glyphicon-cloud | 實例 ? | |
| glyphicon glyphicon-envelope | 實例 ? | |
| glyphicon glyphicon-pencil | 實例 ? | |
| glyphicon glyphicon-glass | 實例 ? | |
| glyphicon glyphicon-music | 實例 ? | |
| glyphicon glyphicon-search | 實例 ? | |
| glyphicon glyphicon-heart | 實例 ? | |
| glyphicon glyphicon-star | 實例 ? | |
| glyphicon glyphicon-star-empty | 實例 ? | |
| glyphicon glyphicon-user | 實例 ? | |
| glyphicon glyphicon-film | 實例 ? | |
| glyphicon glyphicon-th-large | 實例 ? | |
| glyphicon glyphicon-th | 實例 ? | |
| glyphicon glyphicon-th-list | 實例 ? | |
| glyphicon glyphicon-ok | 實例 ? | |
| glyphicon glyphicon-remove | 實例 ? | |
| glyphicon glyphicon-zoom-in | 實例 ? | |
| glyphicon glyphicon-zoom-out | 實例 ? | |
| glyphicon glyphicon-off | 實例 ? | |
| glyphicon glyphicon-signal | 實例 ? | |
| glyphicon glyphicon-cog | 實例 ? | |
| glyphicon glyphicon-trash | 實例 ? | |
| glyphicon glyphicon-home | 實例 ? | |
| glyphicon glyphicon-file | 實例 ? | |
| glyphicon glyphicon-time | 實例 ? | |
| glyphicon glyphicon-road | 實例 ? | |
| glyphicon glyphicon-download-alt | 實例 ? | |
| glyphicon glyphicon-download | 實例 ? | |
| glyphicon glyphicon-upload | 實例 ? | |
| glyphicon glyphicon-inbox | 實例 ? | |
| glyphicon glyphicon-play-circle | 實例 ? | |
| glyphicon glyphicon-repeat | 實例 ? | |
| glyphicon glyphicon-refresh | 實例 ? | |
| glyphicon glyphicon-list-alt | 實例 ? | |
| glyphicon glyphicon-lock | 實例 ? | |
| glyphicon glyphicon-flag | 實例 ? | |
| glyphicon glyphicon-headphones | 實例 ? | |
| glyphicon glyphicon-volume-off | 實例 ? | |
| glyphicon glyphicon-volume-down | 實例 ? | |
| glyphicon glyphicon-volume-up | 實例 ? | |
| glyphicon glyphicon-qrcode | 實例 ? | |
| glyphicon glyphicon-barcode | 實例 ? | |
| glyphicon glyphicon-tag | 實例 ? | |
| glyphicon glyphicon-tags | 實例 ? | |
| glyphicon glyphicon-book | 實例 ? | |
| glyphicon glyphicon-bookmark | 實例 ? | |
| glyphicon glyphicon-print | 實例 ? | |
| glyphicon glyphicon-camera | 實例 ? | |
| glyphicon glyphicon-font | 實例 ? | |
| glyphicon glyphicon-bold | 實例 ? | |
| glyphicon glyphicon-italic | 實例 ? | |
| glyphicon glyphicon-text-height | 實例 ? | |
| glyphicon glyphicon-text-width | 實例 ? | |
| glyphicon glyphicon-align-left | 實例 ? | |
| glyphicon glyphicon-align-center | 實例 ? | |
| glyphicon glyphicon-align-right | 實例 ? | |
| glyphicon glyphicon-align-justify | 實例 ? | |
| glyphicon glyphicon-list | 實例 ? | |
| glyphicon glyphicon-indent-left | 實例 ? | |
| glyphicon glyphicon-indent-right | 實例 ? | |
| glyphicon glyphicon-facetime-video | 實例 ? | |
| glyphicon glyphicon-picture | 實例 ? | |
| glyphicon glyphicon-map-marker | 實例 ? | |
| glyphicon glyphicon-adjust | 實例 ? | |
| glyphicon glyphicon-tint | 實例 ? | |
| glyphicon glyphicon-edit | 實例 ? | |
| glyphicon glyphicon-share | 實例 ? | |
| glyphicon glyphicon-check | 實例 ? | |
| glyphicon glyphicon-move | 實例 ? | |
| glyphicon glyphicon-step-backward | 實例 ? | |
| glyphicon glyphicon-fast-backward | 實例 ? | |
| glyphicon glyphicon-backward | 實例 ? | |
| glyphicon glyphicon-play | 實例 ? | |
| glyphicon glyphicon-pause | 實例 ? | |
| glyphicon glyphicon-stop | 實例 ? | |
| glyphicon glyphicon-forward | 實例 ? | |
| glyphicon glyphicon-fast-forward | 實例 ? | |
| glyphicon glyphicon-step-forward | 實例 ? | |
| glyphicon glyphicon-eject | 實例 ? | |
| glyphicon glyphicon-chevron-left | 實例 ? | |
| glyphicon glyphicon-chevron-right | 實例 ? | |
| glyphicon glyphicon-plus-sign | 實例 ? | |
| glyphicon glyphicon-minus-sign | 實例 ? | |
| glyphicon glyphicon-remove-sign | 實例 ? | |
| glyphicon glyphicon-ok-sign | 實例 ? | |
| glyphicon glyphicon-question-sign | 實例 ? | |
| glyphicon glyphicon-info-sign | 實例 ? | |
| glyphicon glyphicon-screenshot | 實例 ? | |
| glyphicon glyphicon-remove-circle | 實例 ? | |
| glyphicon glyphicon-ok-circle | 實例 ? | |
| glyphicon glyphicon-ban-circle | 實例 ? | |
| glyphicon glyphicon-arrow-left | 實例 ? | |
| glyphicon glyphicon-arrow-right | 實例 ? | |
| glyphicon glyphicon-arrow-up | 實例 ? | |
| glyphicon glyphicon-arrow-down | 實例 ? | |
| glyphicon glyphicon-share-alt | 實例 ? | |
| glyphicon glyphicon-resize-full | 實例 ? | |
| glyphicon glyphicon-resize-small | 實例 ? | |
| glyphicon glyphicon-exclamation-sign | 實例 ? | |
| glyphicon glyphicon-gift | 實例 ? | |
| glyphicon glyphicon-leaf | 實例 ? | |
| glyphicon glyphicon-fire | 實例 ? | |
| glyphicon glyphicon-eye-open | 實例 ? | |
| glyphicon glyphicon-eye-close | 實例 ? | |
| glyphicon glyphicon-warning-sign | 實例 ? | |
| glyphicon glyphicon-plane | 實例 ? | |
| glyphicon glyphicon-calendar | 實例 ? | |
| glyphicon glyphicon-random | 實例 ? | |
| glyphicon glyphicon-comment | 實例 ? | |
| glyphicon glyphicon-magnet | 實例 ? | |
| glyphicon glyphicon-chevron-up | 實例 ? | |
| glyphicon glyphicon-chevron-down | 實例 ? | |
| glyphicon glyphicon-retweet | 實例 ? | |
| glyphicon glyphicon-shopping-cart | 實例 ? | |
| glyphicon glyphicon-folder-close | 實例 ? | |
| glyphicon glyphicon-folder-open | 實例 ? | |
| glyphicon glyphicon-resize-vertical | 實例 ? | |
| glyphicon glyphicon-resize-horizontal | 實例 ? | |
| glyphicon glyphicon-hdd | 實例 ? | |
| glyphicon glyphicon-bullhorn | 實例 ? | |
| glyphicon glyphicon-bell | 實例 ? | |
| glyphicon glyphicon-certificate | 實例 ? | |
| glyphicon glyphicon-thumbs-up | 實例 ? | |
| glyphicon glyphicon-thumbs-down | 實例 ? | |
| glyphicon glyphicon-hand-right | 實例 ? | |
| glyphicon glyphicon-hand-left | 實例 ? | |
| glyphicon glyphicon-hand-up | 實例 ? | |
| glyphicon glyphicon-hand-down | 實例 ? | |
| glyphicon glyphicon-circle-arrow-right | 實例 ? | |
| glyphicon glyphicon-circle-arrow-left | 實例 ? | |
| glyphicon glyphicon-circle-arrow-up | 實例 ? | |
| glyphicon glyphicon-circle-arrow-down | 實例 ? | |
| glyphicon glyphicon-globe | 實例 ? | |
| glyphicon glyphicon-wrench | 實例 ? | |
| glyphicon glyphicon-tasks | 實例 ? | |
| glyphicon glyphicon-filter | 實例 ? | |
| glyphicon glyphicon-briefcase | 實例 ? | |
| glyphicon glyphicon-fullscreen | 實例 ? | |
| glyphicon glyphicon-dashboard | 實例 ? | |
| glyphicon glyphicon-paperclip | 實例 ? | |
| glyphicon glyphicon-heart-empty | 實例 ? | |
| glyphicon glyphicon-link | 實例 ? | |
| glyphicon glyphicon-phone | 實例 ? | |
| glyphicon glyphicon-pushpin | 實例 ? | |
| glyphicon glyphicon-usd | 實例 ? | |
| glyphicon glyphicon-gbp | 實例 ? | |
| glyphicon glyphicon-sort | 實例 ? | |
| glyphicon glyphicon-sort-by-alphabet | 實例 ? | |
| glyphicon glyphicon-sort-by-alphabet-alt | 實例 ? | |
| glyphicon glyphicon-sort-by-order | 實例 ? | |
| glyphicon glyphicon-sort-by-order-alt | 實例 ? | |
| glyphicon glyphicon-sort-by-attributes | 實例 ? | |
| glyphicon glyphicon-sort-by-attributes-alt | 實例 ? | |
| glyphicon glyphicon-unchecked | 實例 ? | |
| glyphicon glyphicon-expand | 實例 ? | |
| glyphicon glyphicon-collapse-down | 實例 ? | |
| glyphicon glyphicon-collapse-up | 實例 ? | |
| glyphicon glyphicon-log-in | 實例 ? | |
| glyphicon glyphicon-flash | 實例 ? | |
| glyphicon glyphicon-log-out | 實例 ? | |
| glyphicon glyphicon-new-window | 實例 ? | |
| glyphicon glyphicon-record | 實例 ? | |
| glyphicon glyphicon-save | 實例 ? | |
| glyphicon glyphicon-open | 實例 ? | |
| glyphicon glyphicon-saved | 實例 ? | |
| glyphicon glyphicon-import | 實例 ? | |
| glyphicon glyphicon-export | 實例 ? | |
| glyphicon glyphicon-send | 實例 ? | |
| glyphicon glyphicon-floppy-disk | 實例 ? | |
| glyphicon glyphicon-floppy-saved | 實例 ? | |
| glyphicon glyphicon-floppy-remove | 實例 ? | |
| glyphicon glyphicon-floppy-save | 實例 ? | |
| glyphicon glyphicon-floppy-open | 實例 ? | |
| glyphicon glyphicon-credit-card | 實例 ? | |
| glyphicon glyphicon-transfer | 實例 ? | |
| glyphicon glyphicon-cutlery | 實例 ? | |
| glyphicon glyphicon-header | 實例 ? | |
| glyphicon glyphicon-compressed | 實例 ? | |
| glyphicon glyphicon-earphone | 實例 ? | |
| glyphicon glyphicon-phone-alt | 實例 ? | |
| glyphicon glyphicon-tower | 實例 ? | |
| glyphicon glyphicon-stats | 實例 ? | |
| glyphicon glyphicon-sd-video | 實例 ? | |
| glyphicon glyphicon-hd-video | 實例 ? | |
| glyphicon glyphicon-subtitles | 實例 ? | |
| glyphicon glyphicon-sound-stereo | 實例 ? | |
| glyphicon glyphicon-sound-dolby | 實例 ? | |
| glyphicon glyphicon-sound-5-1 | 實例 ? | |
| glyphicon glyphicon-sound-6-1 | 實例 ? | |
| glyphicon glyphicon-sound-7-1 | 實例 ? | |
| glyphicon glyphicon-copyright-mark | 實例 ? | |
| glyphicon glyphicon-registration-mark | 實例 ? | |
| glyphicon glyphicon-cloud-download | 實例 ? | |
| glyphicon glyphicon-cloud-upload | 實例 ? | |
| glyphicon glyphicon-tree-conifer | 實例 ? | |
| glyphicon glyphicon-tree-deciduous | 實例 ? |