Bootstrap 自学笔记

帮助类 - Helper Classes

2016-04-01  本文已影响128人  勤劳的悄悄

关闭按钮

<div class="alert alert-success">
    Close Icon Example
    <button type = "button" class = "close" data-dismiss="alert">
        ×
    </button>
</div>

倒三角

<p>Caret Example<span class = "caret"></span></p>

文本背景颜色

<p class="bg-primary">Important: Please read the instructions carefully before proceeding.</p>
......

漂浮

<div class = "pull-left">Quick Float to left</div>
<div class = "pull-right">Quick Float to right</div>

块居中

<div class = "center-block">
    This is an example for center-block
</div>

块的显示和隐藏

<div class="show">This is visible to the user.</div>
<div class="hidden">This is not visible to the user.</div>
<div class="invisible">This is not visible but affects the layout.</div>

隐藏文本

隐藏文本看不见,但是可以被搜索引擎看见,同时占据一定的空间

<h1 class="text-hide">The text of this heading is not visible</h1>
<p class="text-hide">The text of this paragraph is not visible.</p>

屏幕阅读器

其中内容不会显示出来,但是可以被屏幕阅读器读取

<p class="sr-only">This paragraph is only visible to screen readers.</p>
上一篇 下一篇

猜你喜欢

热点阅读