ホーム
本ドキュメントは Bootstrap5 実践版ドキュメントです。 実際にプロジェクトでよく使うソースコードを中心に解説しております。 コード例は、コンポーネントページから閲覧ください。
Bootstrap4 では標準で jQuery が内包されており依存する形で bootstrap.js が動いていましたが、 Bootstrap5 では jQuery が廃止 され脱jQuery となりました。 最近では、Vue.js や React.js 等が登場して jQuery 以外の JavaScript フレームワークが非常に人気を集めており、 jQuery との依存関係を無くなった事でそれらのフレームワークでも使いやすくなりました。 また、jQuery との依存関係が無くなった事でファイルサイズが軽くなりページの読み込みが高速化されました。
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
主要なプラウザやプラットフォームの最新安定リリース版をサポートしております。 また、Bootstrap4 まではサポートされていた Internet Explorer が Bootstrap5 ではサポートが終了する事になりました。 Internet Explorer で Bootstrap を使用したい場合は Bootstrap4 を使用してください。
ブラウザのサポート状況に関しては以下です。
ブラウザー | Bootstrap4 | Bootstrap5 |
---|---|---|
Chrome | 45以上 | 60以上 |
Firefox | 38以上 | 60以上 |
Microsoft Edge | 12以上 | 最新版 |
Safari | 9以上 | 12以上 |
Internet Explorer | 10以上 | サポート終了 |
ブラウザー | Bootstrap4 | Bootstrap5 |
---|---|---|
Chrome | 最新版 | 最新版 |
Safari | 最新版 | 最新版 |
Firefox | 最新版 | 最新版 |
Android Browser & WebView | v5.0以上 | v6.0以上 |
IEのサポート終了によりIEで使用する事の出来なかったCSSカスタムプロパティ(CSS変数)が大幅に拡充されました。
全てのカスタムプロパティは --bs-
から始まっています。
Bootstrapにはルート変数が用意されており以下が一覧となります。
:root {
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
--bs-white: #fff;
--bs-gray: #6c757d;
--bs-gray-dark: #343a40;
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-info: #0dcaf0;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #212529;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}
a {
color: var(--bs-blue);
}
Bootstrap4 までの4つブレイクポイントでしたが Bootstrap5 では一つ大きいサイズ xxl
が追加されて以下5つになりました。
- 576px: Small
- 768px: Medium
- 992px: Large
- 1200px: Extra Large
レスポンシブWebデザインを行う上で重要なグリッドシステムに機能拡張があり Gutters が実装されました。
Gutters (.gx-*
)を使用する事でカラムの間に隙間を追加する事が可能となります。
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>