(1) 颜色徽章
<span class="badge primary">1</span> <span class="badge secondary">2</span> <span class="badge success">3</span> <span class="badge alert">CD</span> <span class="badge warning">B</span>
(2) Lable
<span class="label primary">Primary Label</span> <span class="label secondary">Secondary Label</span> <span class="label success">Success Label</span> <span class="label alert">Alert Label</span> <span class="label warning">Warning Label</span>
(3) 动画图片转盘
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit> <div class="orbit-wrapper"> <div class="orbit-controls"> <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button> <button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button> </div> <ul class="orbit-container"> <li class="is-active orbit-slide"> <figure class="orbit-figure"> <img class="orbit-image" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space"> <figcaption class="orbit-caption">Space, the final frontier.</figcaption> </figure> </li> <li class="orbit-slide"> <figure class="orbit-figure"> <img class="orbit-image" src="https://placehold.it/1200x600/888?text=Slide-2" alt="Space"> <figcaption class="orbit-caption">Lets Rocket!</figcaption> </figure> </li> <li class="orbit-slide"> <figure class="orbit-figure"> <img class="orbit-image" src="https://placehold.it/1200x600/777?text=Slide-3" alt="Space"> <figcaption class="orbit-caption">Encapsulating</figcaption> </figure> </li> <li class="orbit-slide"> <figure class="orbit-figure"> <img class="orbit-image" src="https://placehold.it/1200x600/666&text=Slide-4" alt="Space"> <figcaption class="orbit-caption">Outta This World</figcaption> </figure> </li> </ul> </div> <nav class="orbit-bullets"> <button class="is-active" data-slide="0"> <span class="show-for-sr">First slide details.</span> <span class="show-for-sr" data-slide-active-label>Current Slide</span> </button> <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button> <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button> <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button> </nav> </div>
（4）进度条
颜色可以取： .secondary, .success, .warning, and .alert
<div class="secondary progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100"> <div class="progress-meter" style="width: 25%"></div> </div> <div class="success progress"> <div class="progress-meter" style="width: 50%"></div> </div> <div class="warning progress"> <div class="progress-meter" style="width: 50%"></div> </div> <div class="alert progress"> <div class="progress-meter" style="width: 75%"></div> </div>
（5）图片锚点
<img class="thumbnail" src="assets/img/thumbnail/01.jpg" alt="Photo of Uranus."> <a href="#" class="thumbnail"><img src="assets/img/thumbnail/02.jpg" alt="Photo of Neptune."></a> <img class="thumbnail" src="assets/img/thumbnail/03.jpg" alt="Photo of Pluto.">
（6）工具提示
6。1基本提示：
The <span data-tooltip tabindex="1" title="Fancy word for a beetle.">scarabaeus</span> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet.
6.2 左边和右边提示
When he was dressed he went down the hall into the <span data-tooltip class="right" tabindex="3" title="Aligned on the right">kitchen</span>. The table was almost hidden beneath all Dudley's birthday presents. It looked as though <span data-tooltip class="left" tabindex="4" title="Aligned on the left">Dudley</span> had gotten the new computer he wanted, not to mention the second television and the racing bike.
6.3 指定提示位置
下面是顶和底的位置。
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="left"> Bottom Left </button> <button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="center"> Bottom Center </button> <button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="right"> Bottom Right </button> <button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="left"> Top Left </button> <button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="center"> Top Center </button> <button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="right"> Top Right </button>
下面是左和右的位置：
<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="top"> Right Top </button> <button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="top"> Left Top </button> <button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="center"> Right Center </button> <button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="center"> Left Center </button> <button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="bottom"> Right Bottom </button> <button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="bottom"> Left Bottom </button>
---------------------
作者：hackpig
来源：www.skcircle.com
版权声明：本文为博主原创文章，转载请附上博文链接！