Bootstrap 图标 | 您所在的位置:网站首页 › bootstrap按钮超链接 › Bootstrap 图标 |
Bootstrap 图标
简介
在本教程中,您将学习如何使用 Bootstrap 2.0 工具包来创建图标。Bootstrap 图标由 Glyphicons 提供。如果您在项目中使用这些图标,请确保提供 Glyphicons 的链接。 作为 CSS Sprite 使用所有的图标图像都捆绑到一起,并通过 background-position CSS 属性使用。图像文件是 glyphicons-halflings.png,位于 Bootstrap 主文件夹下的 img 文件夹。图标的样式以及背景位置是在 bootstrap.css 的行号 1168 到 1544 中规定。请注意,为避免冲突,所有的图标 class 都以 "icon-" 为前缀。Bootstrap 2.0 中定义了 120 个图标 class。 如何在您自己的站点或 app 中使用图标下面是在站点或 app 中使用图标的通用语法: 其中 "icon_class_name" 是在 bootstrap.css 中定义的图标 class 的名称(例如:icon-music、icon-star、icon-user 等)。 如果您想要使用白色图标,然后添加一个额外的 icon-white class,如下所示: 如果您想要在使用图标时带上一些字符串,记得在 之后添加一些空格。在按钮中使用图标或者一些导航链接中可能会出现这种情况。 实例:一个搜索表单 实例 使用Bootstrap 版本2.0 中搜索图标的实例 form { margin-top: 50px; } 搜索© Company 2013 在线查看在不同的浏览器窗口查看上面实例。 实例:在导航中使用图标 实例 Bootstrap 版本 2.0 在导航中使用图标 runoob Home User Downlaod Upload Play Circle Bookmark Gift 在线查看在不同的浏览器窗口查看上面实例。 实例:在按钮和按钮组中使用图标 实例 Bootstrap 版本 2.0 在按钮和按钮组中使用图标 form { margin-top: 50px; } User Edit Delete Ban Make adminRefresh Checkout Delete Comment Settings More Info 在线查看在不同的浏览器窗口查看上面实例。 点击这里,下载本教程中使用到的所有 HTML、CSS、JS 和图片文件。 |
CopyRight 2018-2019 实验室设备网 版权所有 |