logo

CSS

浏览器默认样式统一,基础样式,网格,表格、表单、按钮及常用组件样式。

Utility


布局相关

浮动相关

<div class="overflow-hidden">
    <button class="btn btn-inline-block btn-bg-success pull-left">向左浮动</button>
    <button class="btn btn-inline-block btn-bg-success pull-right">向右浮动</button>
</div>                                                                     
        

内外边距

尺寸(padding)base:10px,small:5px,large:20px

  • .pd-base-->padding:10px;
    .pd-small-->padding:5px;
    .pd-large-->padding:20px;
  • .pd-base-left/right/top/bottom-->padding-left/right/top/bottom:10px;
    .pd-small-left/right/top/bottom-->padding-left/right/top/bottom:5px;
    .pd-large-left/right/top/bottom-->padding-left/right/top/bottom:5px;
  • .pd-none-->padding:0;
    .pd-none-left/right/top/bottom-->padding-left/right/top/bottom:0;

尺寸(margin)base:10px,small:5px,large:20px

  • .mg-base-->margin:10px;
    .mg-small-->margin:5px;
    .mg-large-->margin:20px;
  • .mg-base-left/right/top/bottom-->margin-left/right/top/bottom:10px;
    .mg-small-left/right/top/bottom-->margin-left/right/top/bottom:5px;
    .mg-large-left/right/top/bottom-->margin-left/right/top/bottom:20px;
  • .mg-none-->margin:0;
    .mg-none-left/right/top/bottom-->margin-left/right/top/bottom:0;

在需要内边距或者外边距的元素上直接加pd--/mg--样式

文本相关

文本颜色

文本颜色

文本颜色

文本颜色

文本颜色

文本颜色

文本颜色

<p class="text-danger">文本颜色</p>
<p class="text-success">文本颜色</p>
<p class="text-primary">文本颜色</p>
<p class="text-warning">文本颜色</p>
<p class="text-details">文本颜色</p>
<p class="text-assistant">文本颜色</p>                                                                     
        

文本对齐

文本左对齐

文本右对齐

文本居中

<p class="text-left">文本左对齐</p>
<p class="text-right">文本右对齐</p>
<p class="text-center">文本居中</p>                                                                     
        

文字换行及截断

文本溢出省略文本溢出省略文本溢出省略文本溢出省略文本溢出省略

单词换行jfslgfhksfhskhfksjfksdfsfsdfsdfsfsdfdfdfdfdfdfdf

<p class="text-ellipsis">文本溢出省略文本溢出省略文本溢出省略文本溢出省略文本溢出省略</p>
<p class="text-wordbreak">单词换行jfslgfhksfhskhfksjfksdfsfsdfsdfsfsdfdfdfdfdfdfdf</p>                                                                     
        
侧栏导航