Card Image
<div class="card" style="width:20rem;">
<img src="card.png" class="card-img-top">
<div class="card-body">Body</div>
</div>
Body
BootstrapとはTwitterが開発したCSSフレームワークで、CSSフレームワークの中では1番ポピュラーな存在です。 この記事では、Bootstrapの使い方をサンプルを交えて解説します。この記事自体もBootstrapを使っています。
| Item | Description |
|---|---|
| URL | https://getbootstrap.com/ |
| License | MIT |
| Module | Size |
|---|---|
| bootstrap.min.css | 155KB |
| bootstrap.min.js | 58.6KB |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- Bootstrap JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html><span class="badge badge-primary">Primary</span>
<a href="#" class="badge badge-primary">Primary</a><span class="badge badge-secondary">Secondary</span>
<a href="#" class="badge badge-secondary">Secondary</a><span class="badge badge-success">Success</span>
<a href="#" class="badge badge-success">Success</a><span class="badge badge-danger">Danger</span>
<a href="#" class="badge badge-danger">Danger</a><span class="badge badge-warning">Warning</span>
<a href="#" class="badge badge-warning">Warning</a><span class="badge badge-light">Light</span>
<a href="#" class="badge badge-light">Light</a><span class="badge badge-pill badge-primary">Badge</span>
<a href="#" class="badge badge-pill badge-primary">Badge</a><div class="card">
<div class="card-body">Body</div>
</div><div class="card">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p>Body</p>
</div>
</div>Body
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Body</div>
</div><div class="card">
<div class="card-body">Body</div>
<div class="card-footer">Footer</div>
</div><div class="card" style="width:20rem;">
<img src="card.png" class="card-img-top">
<div class="card-body">Body</div>
</div><div class="text-primary">Primary</div><div class="bg-primary text-white">Primary</div><img class="img-fluid" src="200x200.jpg">
<img class="img-thumbnail" src="200x200.jpg"><img class="rounded" src="200x200.jpg"><img class="float-left" src="200x200.jpg"><img class="float-right" src="200x200.jpg"><img class="mx-auto d-block" src="200x200.jpg"><div class="text-center">
<img src="200x200.jpg">
</div><ul class="list-group">
<li class="list-group-item">1st item</li>
<li class="list-group-item">2nd item</li>
</ul><ul class="list-group">
<li class="list-group-item active">Active item</li>
<li class="list-group-item">Non-active item</li>
</ul><ul class="list-group">
<li class="list-group-item">Enabled item</li>
<li class="list-group-item disabled">Disabled item</li>
</ul><ul class="list-group">
<li class="list-group-item">Non-clickable item</li>
<a href="#" class="list-group-item list-group-item-action">Clickable item</a>
</ul><ul class="list-group">
<li class="list-group-item">Item</li>
<li class="list-group-item list-group-item-primary">Primary item</li>
</ul><ul class="list-group">
<li class="list-group-item">Item</li>
<li class="list-group-item list-group-item-secondary">Secondary item</li>
</ul><ul class="list-group">
<li class="list-group-item">Item</li>
<li class="list-group-item list-group-item-success">Success item</li>
</ul><ul class="list-group">
<li class="list-group-item">Item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
</ul><ul class="list-group">
<li class="list-group-item">Item</li>
<li class="list-group-item list-group-item-warning">Warning item</li>
</ul><ul class="list-group">
<li class="list-group-item">Item</li>
<li class="list-group-item list-group-item-info">Info item</li>
</ul><ul class="list-group">
<li class="list-group-item">Item</li>
<li class="list-group-item list-group-item-light">Light item</li>
</ul><ul class="list-group">
<li class="list-group-item">Item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
</ul><nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="/">SE学院</a>
</li>
<li class="breadcrumb-item">
<a href="/css/">CSS</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Bootstrap
</li>
</ol>
</nav><div class="shadow mb-5">Shadow</div><div class="shadow-sm mb-5">Small shadow</div><div class="shadow-lg mb-5">Large shadow</div><table class="table">
<caption>Table classes</caption>
<thead>
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>table</td><td>Basic class</td></tr>
<tr><td>table-dark</td><td>Dark modifier</td></tr>
</tbody>
</table>| Class | Description |
|---|---|
| table | Basic class |
| table-dark | Dark modifier |
<table class="table table-dark">
<caption>Table classes</caption>
<thead>
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>table</td><td>Basic class</td></tr>
<tr><td>table-dark</td><td>Dark modifier</td></tr>
</tbody>
</table>| Class | Description |
|---|---|
| table | Basic class |
| table-dark | Dark modifier |
<table class="table table-striped">
<caption>Breakpoints</caption>
<thead>
<tr><th>Breakpoint</th><th>Width</th></tr>
</thead>
<tbody>
<tr><td>sm</td><td>≥ 576px</td></tr>
<tr><td>md</td><td>≥ 768px</td></tr>
<tr><td>lg</td><td>≥ 992px</td></tr>
<tr><td>xl</td><td>≥ 1200px</td></tr>
</tbody>
</table>| Breakpoint | Width |
|---|---|
| sm | ≥ 576px |
| md | ≥ 768px |
| lg | ≥ 992px |
| xl | ≥ 1200px |
<table class="table table-bordered">
<caption>Table classes</caption>
<thead>
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>table</td><td>Basic class</td></tr>
<tr><td>table-dark</td><td>Dark modifier</td></tr>
</tbody>
</table>| Class | Description |
|---|---|
| table | Basic class |
| table-dark | Dark modifier |
<table class="table table-borderless">
<caption>Table classes</caption>
<thead>
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>table</td><td>Basic class</td></tr>
<tr><td>table-dark</td><td>Dark modifier</td></tr>
</tbody>
</table>| Class | Description |
|---|---|
| table | Basic class |
| table-dark | Dark modifier |
<table class="table table-hover">
<caption>Table classes</caption>
<thead>
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>table</td><td>Basic class</td></tr>
<tr><td>table-dark</td><td>Dark modifier</td></tr>
</tbody>
</table>| Class | Description |
|---|---|
| table | Basic class |
| table-dark | Dark modifier |
<table class="table table-sm">
<caption>Table classes</caption>
<thead>
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>table</td><td>Basic class</td></tr>
<tr><td>table-dark</td><td>Dark modifier</td></tr>
</tbody>
</table>| Class | Description |
|---|---|
| table | Basic class |
| table-dark | Dark modifier |
<table class="table">
<caption>Table classes</caption>
<thead class="thead-dark">
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>table</td><td>Basic class</td></tr>
<tr><td>table-dark</td><td>Dark modifier</td></tr>
</tbody>
</table>| Class | Description |
|---|---|
| table | Basic class |
| table-dark | Dark modifier |
<table class="table">
<caption>Table classes</caption>
<thead class="thead-light">
<tr><th>Class</th><th>Description</th></tr>
</thead>
<tbody>
<tr><td>table</td><td>Basic class</td></tr>
<tr><td>table-dark</td><td>Dark modifier</td></tr>
</tbody>
</table>| Class | Description |
|---|---|
| table | Basic class |
| table-dark | Dark modifier |