Skip to main content Link Search Menu Expand Document (external link)
Just the Docs

按钮

目录

  1. 基本按钮样式
    1. 看起来像按钮的链接
    2. Button 元素
  2. 使用按钮工具
    1. 按钮型号
    2. 按钮间距

基本按钮样式

看起来像按钮的链接

Link button

Link button Link button Link button

Link button

[Link button](http://example.com/){: .btn }

[Link button](http://example.com/){: .btn .btn-purple }
[Link button](http://example.com/){: .btn .btn-blue }
[Link button](http://example.com/){: .btn .btn-green }

[Link button](http://example.com/){: .btn .btn-outline }

Button 元素

GitHub Flavored Markdown 不支持 button 元素，所以您不得不用行内 HTML 达到该效果：

<button type="button" name="button" class="btn">Button element</button>

使用按钮工具

按钮型号

在一个使用字型工具类可设置按钮的容器内封装按钮：

Big ass button

Tiny ass button 

<span class="fs-8">
[Link button](http://example.com/){: .btn }
</span>

<span class="fs-3">
[Tiny ass button](http://example.com/){: .btn }
</span>

按钮间距

用外边距工具类添加同一个块内的按钮间的间距。

Button with space Button

Button with more space Button

[Button with space](http://example.com/){: .btn .btn-purple .mr-2 }
[Button](http://example.com/){: .btn .btn-blue }

[Button with more space](http://example.com/){: .btn .btn-green .mr-4 }
[Button](http://example.com/){: .btn .btn-blue }