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

bootstrap三大核心之二。

包括glyphicon图标，下拉菜单（dropdown），按钮组 （button group）....等 等。 一. 图标字体 bootstrap3提供了200多个免费图标字体。认为它是一个字。

arial-hidden="true"

.sr-only（只读）

1. 引入方法： <div class="wiz-table-container" style="padding: 15px 0px 5px; position: relative; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; right: auto !important; top: auto !important; width: auto !important; font-family: Consolas, " bitstream vera sans mono new courier monospace font-size: min-height: auto background: none> <div class="wiz-table-body" style="position: static !important; padding-bottom: 0px !important; overflow: visible !important; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important"> <table class="noBorderTable" style="width: 1404px; border-color: #c0c0c0 !important; float: none !important; left: auto !important; line-height: 1.1em !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important" border="0" cellspacing="0" cellpadding="0"> <tbody style="border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important"> <td class="gutter" style="padding: 5px !important; border: 0px !important; outline-width: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important"> <div class="line number1 index0 alt2" style="height: 16px; border-width: 0px 3px 0px 0px !important; border-right-style: solid !important; border-right-color: #6ce26c !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none #fafafa !important"> 1 <td class="code" style="width: 1291px; padding: 0px !important; border: 0px !important; outline-width: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important"> <div class="line number1 index0 alt2" style="height: 16px; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none #fafafa !important"> i class = "glyphicon glyphicon-search" > i >

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

2. 实现机制： （1）雪碧技术：允许无损放大， 减少图片大小， 减少网页的请求次数。 把网页的背景图片整合到一张图片中，利用背景定位显示出来。

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

<div class="wiz-table-container" style="padding: 15px 0px 5px; position: relative; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; right: auto !important; top: auto !important; width: auto !important; font-family: Consolas, " bitstream vera sans mono new courier monospace font-size: min-height: auto background: none> <div class="wiz-table-body" style="position: static !important; padding-bottom: 0px !important; overflow: visible !important; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important"> <table class="noBorderTable" style="width: 1404px; border-color: #c0c0c0 !important; float: none !important; left: auto !important; line-height: 1.1em !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important" border="0" cellspacing="0" cellpadding="0"> <tbody style="border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important"> <td class="gutter" style="padding: 5px !important; border: 0px !important; outline-width: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important"> <div class="line number1 index0 alt2" style="height: 16px; border-width: 0px 3px 0px 0px !important; border-right-style: solid !important; border-right-color: #6ce26c !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none #fafafa !important"> 1

<td class="code" style="width: 1291px; padding: 0px !important; border: 0px !important; outline-width: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important"> <div class="line number1 index0 alt2" style="height: 16px; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none #fafafa !important"> background : url (路径) no-repeat 0 0 ；

（2）@font-face，缓存自服务器，字体特性（如可设置颜色）。CSS3的在线字体引入写法是： 在 CSS 的最上面：导入第三方字体图标

<div class="wiz-table-container" style="padding: 15px 0px 5px; position: relative; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; right: auto !important; top: auto !important; width: auto !important; font-family: Consolas, " bitstream vera sans mono new courier monospace font-size: min-height: auto background: none> <div class="wiz-table-body" style="position: static !important; padding-bottom: 0px !important; overflow: visible !important; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important"> <table class="noBorderTable" style="width: 1404px; border-color: #c0c0c0 !important; float: none !important; left: auto !important; line-height: 1.1em !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important" border="0" cellspacing="0" cellpadding="0"> <tbody style="border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important"> <td class="gutter" style="padding: 5px !important; border: 0px !important; outline-width: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important"> <div class="line number1 index0 alt2" style="height: 16px; border-width: 0px 3px 0px 0px !important; border-right-style: solid !important; border-right-color: #6ce26c !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none #fafafa !important"> 1 <div class="line number2 index1 alt1" style="height: 16px; border-width: 0px 3px 0px 0px !important; border-right-style: solid !important; border-right-color: #6ce26c !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background-image: none !important; background-attachment: initial !important; background-position: initial !important; background-repeat: initial !important"> 2 <div class="line number3 index2 alt2" style="height: 16px; border-width: 0px 3px 0px 0px !important; border-right-style: solid !important; border-right-color: #6ce26c !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none #fafafa !important"> 3

<td class="code" style="width: 1291px; padding: 0px !important; border: 0px !important; outline-width: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important"> <div class="line number1 index0 alt2" style="height: 16px; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none #fafafa !important"> @font-face{ <div class="line number2 index1 alt1" style="height: 16px; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background-image: none !important; background-attachment: initial !important; background-position: initial !important; background-repeat: initial !important"> font :字体名称;(自定义名称，避开网络安全字名) <div class="line number3 index2 alt2" style="height: 16px; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none #fafafa !important"> src : url (字体文件路径), url (字体文件路径), url (字体文件路径),…;}

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

3.应用 在button上应用字体图标：

<div class="wiz-table-container" style="padding: 15px 0px 5px; position: relative; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; right: auto !important; top: auto !important; width: auto !important; font-family: Consolas, " bitstream vera sans mono new courier monospace font-size: min-height: auto background: none> <div class="wiz-table-body" style="position: static !important; padding-bottom: 0px !important; overflow: visible !important; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important"> <table class="noBorderTable" style="width: 1404px; border-color: #c0c0c0 !important; float: none !important; left: auto !important; line-height: 1.1em !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important" border="0" cellspacing="0" cellpadding="0"> <tbody style="border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important"> <td class="gutter" style="padding: 5px !important; border: 0px !important; outline-width: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important"> <div class="line number1 index0 alt2" style="height: 32px; border-width: 0px 3px 0px 0px !important; border-right-style: solid !important; border-right-color: #6ce26c !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none #fafafa !important"> 1

<td class="code" style="width: 1291px; padding: 0px !important; border: 0px !important; outline-width: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important"> <div class="line number1 index0 alt2" style="height: 32px; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none #fafafa !important"> button class = "btn btn-default glyphicon glyphicon-log-in" > login button >

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

还有一种推荐的方式：

<div class="wiz-table-container" style="padding: 15px 0px 5px; position: relative; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; right: auto !important; top: auto !important; width: auto !important; font-family: Consolas, " bitstream vera sans mono new courier monospace font-size: min-height: auto background: none> <div class="wiz-table-body" style="position: static !important; padding-bottom: 0px !important; overflow: visible !important; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important"> <table class="noBorderTable" style="width: 1404px; border-color: #c0c0c0 !important; float: none !important; left: auto !important; line-height: 1.1em !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important" border="0" cellspacing="0" cellpadding="0"> <tbody style="border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important"> <td class="gutter" style="padding: 5px !important; border: 0px !important; outline-width: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important"> <div class="line number1 index0 alt2" style="height: 16px; border-width: 0px 3px 0px 0px !important; border-right-style: solid !important; border-right-color: #6ce26c !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none #fafafa !important"> 1 <div class="line number2 index1 alt1" style="height: 16px; border-width: 0px 3px 0px 0px !important; border-right-style: solid !important; border-right-color: #6ce26c !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background-image: none !important; background-attachment: initial !important; background-position: initial !important; background-repeat: initial !important"> 2 <div class="line number3 index2 alt2" style="height: 16px; border-width: 0px 3px 0px 0px !important; border-right-style: solid !important; border-right-color: #6ce26c !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none #fafafa !important"> 3 <div class="line number4 index3 alt1" style="height: 16px; border-width: 0px 3px 0px 0px !important; border-right-style: solid !important; border-right-color: #6ce26c !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background-image: none !important; background-attachment: initial !important; background-position: initial !important; background-repeat: initial !important"> 4

<td class="code" style="width: 1291px; padding: 0px !important; border: 0px !important; outline-width: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; font-size: 1em !important; min-height: auto !important; background: none !important"> <div class="line number1 index0 alt2" style="height: 16px; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none #fafafa !important"> button class = "btn btn-default" > <div class="line number2 index1 alt1" style="height: 16px; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background-image: none !important; background-attachment: initial !important; background-position: initial !important; background-repeat: initial !important"> span class = "glyphicon glyphicon-log-in" > span > <div class="line number3 index2 alt2" style="height: 16px; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; font-size: 1em !important; min-height: auto !important; background: none #fafafa !important">

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

Artikel berkaitan