logo

CSS

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

Button


基本使用

默认样式(块级显示)

在要应用按钮样式的元素上添加 .btn,再设置相应的颜色。btn的宽高可根据外部容器的宽高自适应,使用时如果btn的尺寸不适合可做调整。

  • .btn-bg-default - 默认,灰色按钮
  • .btn-bg-primary - 蓝色按钮
  • .btn-bg-success - 绿色按钮
  • .btn-bg-disabled - 浅灰按钮
  • .btn-bg-danger - 红色按钮
  • .btn-bg-white - 白色按钮
  • .btn-bg-none - 透明按钮
<button type="button" class="btn btn-bg-default">默认样式</button>
<button type="button" class="btn btn-bg-primary">主色按钮</button>
<button type="button" class="btn btn-bg-success">绿色按钮</button>
<button type="button" class="btn btn-bg-disabled">禁用按钮</button>
<button type="button" class="btn btn-bg-danger">红色按钮</button>

默认样式(行内显示)

在要应用按钮样式的元素上添加 .btn,.btn-inline-block,再设置相应的颜色。

<button type="button" class="btn btn-inline-block btn-bg-default">默认样式</button>
<button type="button" class="btn btn-inline-block btn-bg-primary">主色按钮</button>
<button type="button" class="btn btn-inline-block btn-bg-success">绿色按钮</button>
<button type="button" class="btn btn-inline-block btn-bg-disabled">禁用按钮</button>
<button type="button" class="btn btn-inline-block btn-bg-danger">红色按钮</button>

按钮 Icon

使用 Icon 之前需先引入 Icon 组件

<button class="btn btn-default">
                    <i class="fc fc-setting"></i>
    设置
</button>
<a class="btn btn-danger" href="#">
                    <i class="fc fc-delete"></i>
    删除
</a>
<button class="btn btn-default">
                    <i class="fc fc-export"></i>
    导出
</button>
侧栏导航