<span class="badge">Badge</span>
Badge
Spectre.css は Yan Zhu が開発したCSSフレームワークです。このページも Spectre.css を使っています。
公式サイト | https://picturepan2.github.io/spectre/ |
開発者 | Yan Zhu |
ライセンス | MIT |
グリッド | 12列 |
GitHub stars | 10.7k |
@spectrecss |
Module | Size |
---|---|
spectre.min.css | 45.5KB |
spectre-exp.min.css | 23.1KB |
spectre-icons.min.css | 8.64KB |
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
<body>
<!-- content -->
</body>
</html>
<p class="bg-primary">Primary</p>
Primary
<p class="bg-secondary">Secondary</p>
Secondary
<p class="bg-dark">Dark</p>
Dark
<p class="bg-gray">Gray</p>
Gray
<p class="bg-success">Success</p>
Success
<p class="bg-warning">Warning</p>
Warning
<p class="bg-error">Error</p>
Error
<button class="btn">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-success">Button</button>
<button class="btn btn-error">Button</button>
<button class="btn btn-link">Link</button>
<button class="btn btn-sm">Button</button>
<button class="btn btn-lg">Button</button>
<button class="btn btn-block">Button</button>
<button class="btn btn-action">
<i class="icon icon-menu"></i>
</button>
<button class="btn btn-action s-circle">
<i class="icon icon-arrow-up"></i>
</button>
<button class="btn loading">Button</button>
<span class="text-primary">Primary</span>
Primary
<span class="text-secondary">Secondary</span>
Secondary
<span class="text-dark">Dark</span>
Dark
<span class="text-gray">Gray</span>
Gray
<p class="text-light bg-dark">Light</p>
Light
<span class="text-success">Success</span>
Success
<span class="text-warning">Warning</span>
Warning
<span class="text-error">Error</span>
Error
<div class="container">
初春の令月にして、気淑よく風和やわらぎ、
梅は鏡前の粉を披き、蘭は珮後の香を薫す。
</div>
<div class="form-group">
<label class="form-checkbox">
<input type="checkbox">
<i class="form-icon"></i> Check
</label>
</div>
<div class="hero bg-primary">
<div class="hero-body">
<h1>Title</h1>
<p>This is a hero example</p>
</div>
</div>
This is a hero example
Spectre.cssはアイコンを提供している。
<i class="icon icon-mail"></i>
<i class="icon icon-2x icon-mail"></i>
<i class="icon icon-3x icon-mail"></i>
<i class="icon icon-4x icon-mail"></i>
<table class="table">
Class | Description |
---|---|
table | テーブルの基本クラス |
table-striped | 1行ごとに色を変える修飾クラス |
table-hover | マウスカーソルを乗せた行の色を変える修飾クラス |
table-scroll | スクロール可能にする修飾クラス |
active | アクティブな行にする修飾クラス |
<table class="table table-striped">
Class | Description |
---|---|
table | テーブルの基本クラス |
table-striped | 1行ごとに色を変える修飾クラス |
table-hover | マウスカーソルを乗せた行の色を変える修飾クラス |
table-scroll | スクロール可能にする修飾クラス |
active | アクティブな行にする修飾クラス |
<p class="text-center">Center aligned text</p>
Center aligned text
<p class="text-right">Right aligend text</p>
Right aligend text
<p class="text-bold">Bold</p>
Bold
<p class="text-italic">Italic</p>
Italic
<p class="text-muted">Muted text</p>
Muted text
<p class="text-large">Large text</p>
Large text
<p class="text-small">Small text</p>
Small text
<p class="text-tiny">Tiny text</p>
Tiny text