Bootstrap 图标.pdfVIP

Bootstrap 图标 Bootstrap 图标 简介 在本教程中，您将学习如何使⽤ Bootstrap 2.0 ⼯具包来创建图标。Bootstrap 图标由 Glyphicons 提供。如果您在项⽬中使⽤这些图标， 确保提供 Glyphicons 的链接。 作为 CSS Sprite 使⽤ 所有的图标图像都捆绑到⼀起，并通过 background-position CSS 属性使⽤。图像⽂件 是 glyphicons-halflings.png ，位于 Bootstrap 主⽂件夹下的 img ⽂件夹。图标的样式以 及背景位置是在 bootstrap .css 的⾏号 1168 到 1 44 中规定。 注意，为避免冲突，所 有的图标 class 都以 icon- 为前缀。Bootstrap 2.0 中定义了 120 个图标 class 。 如何在您⾃⼰的站点或 app 中使⽤图标 下⾯是在站点或 app 中使⽤图标的通⽤语法： i class=icon_class_name/i 其中 icon_class_name 是在 bootstrap .css 中定义的图标 class 的名称 （例如：icon- music、icon-star 、icon-user 等）。 如果您想要使⽤⽩⾊图标，然后添加⼀个额外的 icon-white class ，如下所⽰： i class=icon_class_name icon-white/i /i 如果您想要在使⽤图标时带上⼀些字符串，记得在 之后添加⼀些空格。在按钮中使⽤ 图标或者⼀些导航链接中可能会出现这种情况。 实例：⼀个搜索表单 实例 !DOCTYPE html html lang=en head meta charset=utf-8 title使⽤Bootstrap 版本2.0 中搜索图标的实例/title meta name=viewport content=width=device-width , initial-scale= 1.0 meta name=description content=Example of using icons in search form - Bootstrap version 2.0 from w3cschool .cn meta name=author content= !-- Le styles -- link href=../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap .css rel=stylesheet style type=text/css form { margin-top: 0px; } /style !-- Le HTML shim , for IE6-8 support of HTML elements -- !--[if lt IE 9] script src=//html shim .googlecode .com/svn/trunk/html .j s/script ![endif]-- !-- Le fav and touch icons -- link rel=shortcut icon href=../bootstrap/twitter-bootstrap- v2/docs/examples/images/favicon .ico link rel=apple-touch-icon href=../bootstrap/twitter-bootstrap- v2/docs/examples/images/apple-touch-icon .png link rel=apple-touch-icon sizes=72x72 href=../bootstrap/twitter-bootstrap- v2/docs/examples/images/apple-touch-icon-72x72.png link rel=apple-touch-icon sizes=114x 114 href=../bootstrap/twitter-bootstrap- v2/docs/examples/images/appl