辅助类

情境文本颜色

<p class='text-muted'>...</p>
<p class='text-primary'>...</p>
<p class='text-success'>...</p>
<p class='text-info'>...</p>
<p class='text-warning'>...</p>
<p class='text-danger'>...</p>

情境背景色

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

关闭按钮

通过使用一个象征关闭的图标,可以让模态框和警告框消失

<button class='close' aria-label='Close' type='button' >
  <span aria-hidden='true'>×</span>
</button>

三角符号

指示某个元素具有下拉菜单功能

<span class='caret'></span>

快速浮动

.pull-left.pull-right

清除浮动

mixin

.clearfix() {
  &:before,
  &:after{
    content: " ";
    display: table;
    clear: both;
  }
}
/*use as a mixin*/
elem{
  .clearfix();
}

显示或隐藏内容

.show.hidden强制对任意块级元素显示或隐藏,使用!important,.invisible只改变元素的可见性

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

推荐阅读更多精彩内容

  • 知识点 情境文本颜色通过颜色来展示意图,如果文本是个链接鼠标移动到文本上会变暗。 类 | 描述 | :-: | -...
    蝴蝶结199007阅读 3,244评论 0 2
  • 知识点: 1、辅助类2、响应式工具3、字体图标4、下拉菜单 1、辅助类 1)文本 2)背景 3)关闭按钮 cl...
    东东丶酱阅读 2,999评论 0 0
  • 这些类其实和bootstrap中的一些类很相似,可以多记记,这样效率会高点,当然也可以不记,用的时候查文档也行,但...
    _信仰zmh阅读 4,952评论 0 0
  • 可以通过bootstrap的辅助类实现元素的对齐(左右对齐,居中)显示. .pull-left元素浮动到左边 .p...
    穆弋阅读 2,773评论 0 1
  • 用法1:对象名.成员名 用法2:指针->成员名 用法3:引用名.成员名 成员函数体和类的定义分开写 类的成员函数的...
    Mitchell阅读 2,206评论 0 0