《深入理解bootstrap》读书笔记：第4章 CSS组件（上）-html教程-PHP中文网

《深入理解bootstrap》读书笔记：第4章 CSS组件（上）

php中文网

发布： 2016-10-17 09:11:30

原创

854人浏览过

bootstrap三大核心之二。

包括glyphicon图标，下拉菜单（dropdown），按钮组（button group）....等等。

一. 图标字体

bootstrap3提供了200多个免费图标字体。认为它是一个字。

arial-hidden="true"

.sr-only（只读）

1. 引入方法：

<code class="html keyword" style="font-family: Consolas, " bitstream vera sans mono new courier monospace margin-top: margin-bottom: border: float: none left: auto line-height: outline: overflow: visible padding: position: static right: top: width: font-weight: bold font-size: min-height: color: background:&gt;i class="glyphicon glyphicon-search"&gt;<code class="html keyword" style="font-family: Consolas, " bitstream vera sans mono new courier monospace margin-top: margin-bottom: border: float: none left: auto line-height: outline: overflow: visible padding: position: static right: top: width: font-weight: bold font-size: min-height: color: background:&gt;i&gt;

i标签是已经废弃了的html斜体标签。用span也可以。使用时必须基于glyphicon glyphicon-xxx两个类的样式。

2. 实现机制：

（1）雪碧技术：允许无损放大，减少图片大小，减少网页的请求次数。

把网页的背景图片整合到一张图片中，利用背景定位显示出来。

定位的是做上点坐标，右边为x轴负方向，左边为y轴正方向。

background:url(路径) no-repeat 0 0；

（2）@font-face，缓存自服务器，字体特性（如可设置颜色）。CSS3的在线字体引入写法是：

在CSS的最上面：导入第三方字体图标

<span style="font-family: 微软雅黑"&gt;@font-face{</span&gt;
    font:字体名称;(自定义名称，避开网络安全字名)
    src:url(字体文件路径), url(字体文件路径), url(字体文件路径),…;}

@font-face至少.woff，.eot两种格式的字体。一般还要加上SVG字体。

3.应用

在button上应用字体图标：

<code class="html keyword" style="font-family: Consolas, " bitstream vera sans mono new courier monospace margin-top: margin-bottom: border: float: none left: auto line-height: outline: overflow: visible padding: position: static right: top: width: font-weight: bold font-size: min-height: color: background:&gt;button class="btn btn-default glyphicon glyphicon-log-in"&gt; login<code class="html keyword" style="font-family: Consolas, " bitstream vera sans mono new courier monospace margin-top: margin-bottom: border: float: none left: auto line-height: outline: overflow: visible padding: position: static right: top: width: font-weight: bold font-size: min-height: color: background:&gt;button&gt;

这是在按钮上应用字体图标的案例。可以在login上面加一个空格。不然会和图标挤在一起。

还有一种推荐的方式：

<code class="html keyword" style="font-family: Consolas, " bitstream vera sans mono new courier monospace margin-top: margin-bottom: border: float: none left: auto line-height: outline: overflow: visible padding: position: static right: top: width: font-weight: bold font-size: min-height: color: background:&gt;button class="btn btn-default"&gt;
                <code class="html keyword" style="font-family: Consolas, " bitstream vera sans mono new courier monospace margin-top: margin-bottom: border: float: none left: auto line-height: outline: overflow: visible padding: position: static right: top: width: font-weight: bold font-size: min-height: color: background:&gt;span class="glyphicon glyphicon-log-in"&gt;<code class="html keyword" style="font-family: Consolas, " bitstream vera sans mono new courier monospace margin-top: margin-bottom: border: float: none left: auto line-height: outline: overflow: visible padding: position: static right: top: width: font-weight: bold font-size: min-height: color: background:&gt;span&gt;