帮助类 - Helper Classes

关闭按钮

<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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,251评论 4 61
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,813评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,498评论 25 708
  • 我们在第五章的基础上来优化一下登录成功的页面 1.首先我们创建.../templates/event_manage...
    guitar_当当当阅读 316评论 0 0
  • 《删除》 卸载了所有的通讯软件 删除了这么多年对自己软弱本性的记录 还好你改变了 《踌躇》 面前的 不是有分叉的黄...
    鹿氏九思阅读 795评论 0 0