Bulma 中的骨架
将几乎任何 Bulma 组件转换为骨架加载器，或使用预构建的实用元素之一
骨架加载器是一种加载状态，充当界面中内容的占位符。Bulma v1 附带 2 个骨架元素，以及大多数 Bulma 组件的骨架变体。
所有骨架加载器共享这些 CSS 变量
:root {
--bulma-skeleton-background: var(--bulma-border);
--bulma-skeleton-radius: var(--bulma-radius-small);
--bulma-skeleton-block-min-height: 4.5em;
--bulma-skeleton-lines-gap: 0.75em;
--bulma-skeleton-line-height: 0.75em;
}
骨架块是一个简单的块元素，带有脉冲背景。它的最小高度为 4.5em。
示例
HTML
<div class="skeleton-block"></div>如果你在这个块中插入文本，你可以使其高度响应
示例
HTML
<div class="skeleton-block">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
ut fermentum massa justo sit amet risus. Donec sed odio dui.
Nullam quis risus eget urna mollis ornare vel eu leo.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nullam id dolor id
nibh ultricies vehicula ut id elit.
</div>骨架线元素是一个加载元素，类似于段落。每个 <div></div> 将呈现为一个单独的加载行。
示例
HTML
<div class="skeleton-lines">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>大多数 Bulma 元素和组件都有骨架变体，可以通过添加 is-skeleton 或 has-skeleton 修饰符来启用。
示例
HTML
<div class="buttons">
<button class="button is-skeleton">Button</button>
<button class="button is-link is-skeleton">Link</button>
<button class="button is-primary is-skeleton">Primary</button>
<button class="button is-success is-skeleton">Success</button>
<button class="button is-info is-skeleton">Info</button>
<button class="button is-warning is-skeleton">Warning</button>
<button class="button is-danger is-skeleton">Danger</button>
</div>示例
HTML
<span class="icon is-skeleton">
<i class="fas fa-reply"></i>
</span>示例
HTML
<figure class="image is-16x16 is-skeleton">
<img alt="Placeholder" src="https://placehold.co/16x16">
</figure>
<figure class="image is-32x32 is-skeleton">
<img alt="Placeholder" src="https://placehold.co/32x32">
</figure>
<figure class="image is-64x64 is-skeleton">
<img alt="Placeholder" src="https://placehold.co/64x64">
</figure>
<figure class="image is-128x128 is-skeleton">
<img alt="Placeholder" src="https://placehold.co/128x128">
</figure>示例
John Smith @johnsmith 31m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
HTML
<article class="media">
<figure class="media-left">
<p class="image is-64x64 is-skeleton">
<img src="https://placehold.co/128x128" alt="Placeholder image">
</p>
</figure>
<div class="media-content">
<div class="content is-skeleton">
<p>
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus est non commodo luctus,
nisi erat porttitor ligula, eget lacinia odio sem nec elit
vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
</p>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item"><span class="icon is-small is-skeleton"><i class="fas fa-reply"></i></span></a>
<a class="level-item"><span class="icon is-small is-skeleton"><i class="fas fa-retweet"></i></span></a>
<a class="level-item"><span class="icon is-small is-skeleton"><i class="fas fa-heart"></i></span></a>
</div>
</nav>
</div>
<div class="media-right">
<button aria-label="delete" class="delete is-skeleton"></button>
</div>
</article>示例
HTML
<article class="media">
<figure class="media-left">
<p class="image is-64x64 is-skeleton">
<img src="https://placehold.co/128x128" alt="Placeholder image">
</p>
</figure>
<div class="media-content">
<div class="field">
<p class="control">
<textarea class="textarea is-skeleton" placeholder="Add a comment..."></textarea>
</p>
</div>
<nav class="level">
<div class="level-left">
<div class="level-item">
<a class="button is-info is-skeleton">Submit</a>
</div>
</div>
<div class="level-right">
<div class="level-item">
<label class="checkbox is-skeleton"> <input type="checkbox"> Press enter to submit </label>
</div>
</div>
</nav>
</div>
</article>示例
HTML
<div class="notification is-skeleton">
Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
</div>示例
HTML
<span class="tag is-skeleton">Tag</span>
<span class="tag is-link is-skeleton">Link</span>
<span class="tag is-primary is-skeleton">Primary</span>
<span class="tag is-info is-skeleton">Info</span>
<span class="tag is-success is-skeleton">Success</span>
<span class="tag is-warning is-skeleton">Warning</span>
<span class="tag is-danger is-skeleton">Danger</span>示例
HTML
<h1 class="title is-skeleton">
Title
</h1>示例
HTML
<h1 class="title has-skeleton">
Title
</h1>示例
HTML
<h2 class="subtitle is-skeleton">
Subtitle
</h2>示例
HTML
<h2 class="subtitle has-skeleton">
Subtitle
</h2>示例
HTML
<h1 class="title is-skeleton">
Title
</h1>
<h2 class="subtitle is-skeleton">
Subtitle
</h2>示例
HTML
<h1 class="title has-skeleton">
Title
</h1>
<h2 class="subtitle has-skeleton">
Subtitle
</h2>示例
HTML
<input class="input is-skeleton">示例
HTML
<textarea class="textarea is-skeleton"></textarea>