New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

Delete

一个多功能的 删除 叉叉

Colors No
Sizes Yes
Variables No

.delete 是一个独立元素,可以在不通的上下文中使用。

就其本身而言,它是一个带有叉叉的圆圈:

<a class="delete"></a>

Sizes | 尺寸 #

它有 4 种尺寸:

<a class="delete is-small"></a>
<a class="delete"></a>
<a class="delete is-medium"></a>
<a class="delete is-large"></a>

Combinations | 组合 #

Bulma 将他用于 tagsnotificationsmessages:

Hello World
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
Info
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
<div class="block">
  <span class="tag is-success">
    Hello World
    <button class="delete is-small"></button>
  </span>
</div>

<div class="notification is-danger">
  <button class="delete"></button>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>

<article class="message is-info">
  <div class="message-header">
    Info
    <button class="delete"></button>
  </div>
  <div class="message-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
  </div>
</article>

Made with Bulma
这是一个 开源项目. 错别字? Or 有疑问? 在GitHub上改进这个页面。

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!