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

十. 标签（.label类，label-xxx） 高亮一些标题部分。 <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: 883px; 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="white-space: nowrap; height: 17px; 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="white-space: nowrap; height: 17px; 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="white-space: nowrap; height: 17px; 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="white-space: nowrap; height: 17px; 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 <div class="line number5 index4 alt2" style="white-space: nowrap; height: 17px; 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">5 <div class="line number6 index5 alt1" style="white-space: nowrap; height: 17px; 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">6 <td class="code" style="width: 812px; 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: 17px; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !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"> h1 >HELLO span class = "label label-default" >default span > h1 > <div class="line number2 index1 alt1" style="height: 17px; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !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"> h1 >HELLO span class = "label label-primary" >primary span > h1 > <div class="line number3 index2 alt2" style="height: 17px; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !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"> h1 >HELLO span class = "label label-success" >success span > h1 > <div class="line number4 index3 alt1" style="height: 17px; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !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"> h1 >HELLO span class = "label label-info" >info span > h1 > <div class="line number5 index4 alt2" style="height: 17px; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !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"> h1 >HELLO span class = "label label-warning" >warning span > h1 > <div class="line number6 index5 alt1" style="height: 17px; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !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"> h1 >HELLO span class = "label label-danger" >danger span > h1 >

标签本身不能控制大小，需要用其它样式进行控制。如果标签本身是连接元素（a，btn等），hover和focus时颜色比原来加深10%。

十一. 徽章（.badge） 徽章通常用于消息数的显示，无内容时自动消失。在不同风格组件下的badge类，具有反色的高亮显示效果。尽管如此，在个性化bootstrap的过程中，还是有必要自己定制一些类来显示badge的颜色。比如.badge-danger等等。

<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: 1416px; 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="white-space: nowrap; height: 17px; 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="white-space: nowrap; height: 17px; 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 <td class="code" style="width: 1302px; 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: 17px; border: 0px !important; float: none !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !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"> p >Email me span class = "badge"

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

Artikel berkaitan