Primer CSS
Primer CSSの使い方
| URL | https://primer.style/css/ |
| License | MIT |
| GitHub stars | 8.9k |
| Developed by | GitHub |
Installation
CDN (Contents Delivery Network) を通じてCSSをインポートすることもできます。
<head>
<link rel="stylesheet" href="https://unpkg.com/@primer/css/dist/primer.css" />Breadcrumb
<nav aria-label="Breadcrumb">
<ol>
<li>
<a href="/">SE学院</a>
</li>
<li>
<a href="/css/">CSS</a>
</li>
<li class="breadcrumb-item" aria-current="page">
Primer CSS
</li>
</ol>
</nav>Button
<button class="btn" type="button">Button</button><a class="btn" href="#" role="button">Link</a>Small button
<button class="btn btn-sm" type="button">Small</button>Large button
<button class="btn btn-large" type="button">Large</button>Primary button
<button class="btn btn-primary" type="button">Primary</button>Danger button
<button class="btn btn-danger" type="button">Danger</button>Outline button
<button class="btn btn-outline" type="button">Outline</button>Disabled button
<button class="btn" type="button aria-disabled="true"">Disabled</button>Block button
<button class="btn btn-block" type="button">Block</button>Form
Text
Checkbox
Radio
Select
Primer CSSでは、selectタグにform-selectクラスを指定します。
<select class="form-select">
<option value="1">1st option</option>
<option value="2">2nd option</option>
<option value="3">3rd option</option>
</select>Image
<img src="whale.png" class="img-responsive" alt="whale" />
Grayscale image
<img src="whale.png" class="img-responsive grayscale" alt="whale" />