Bootstrap4はじめに
ブートストラップとは何ですか？
- Bootstrapは、より高速で簡単なWeb開発のための無料のフロントエンドフレームワークです。
- Bootstrapには、タイポグラフィ、フォーム、ボタン、テーブル、ナビゲーション、モーダル、画像カルーセルなどのHTMLおよびCSSベースのデザインテンプレートと、オプションのJavaScriptプラグインが含まれています。
- Bootstrapを使用すると、レスポンシブデザインを簡単に作成することもできます。
レスポンシブウェブデザインとは何ですか？
レスポンシブウェブデザインとは、小さな電話から大きなデスクトップまで、すべてのデバイスで見栄えがするように自動的に調整されるウェブサイトを作成することです。
ブートストラップ4の例
<div class="jumbotron text-center">
<h1>My First Bootstrap
Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum
dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum
dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum
dolor..</p>
</div>
</div>
</div>
ブートストラップバージョン
このチュートリアルは、2018年にリリースされたBootstrap 4に続き、 Bootstrap 3へのアップグレードとして、新しいコンポーネント、より高速なstylesheetc、より高い応答性などを備えています。
Bootstrap 5 （2021年リリース）は、 Bootstrapの最新バージョンです。すべての主要なブラウザとプラットフォームの最新の安定したリリースをサポートします。ただし、Internet Explorer11以下はサポートされていません。
Bootstrap5とBootstrap3＆4の主な違いは、Bootstrap5がjQueryではなくJavaScriptに切り替わったことです。
注： Bootstrap3とBootstrap4は、重大なバグ修正とドキュメントの変更についてチームによって引き続きサポートされており、引き続き使用しても完全に安全です。ただし、新機能は追加されません。
なぜブートストラップを使用するのですか？
ブートストラップの利点：
- 使いやすさ： HTMLとCSSの基本的な知識があれば、誰でもBootstrapの使用を開始できます。
- レスポンシブ機能： BootstrapのレスポンシブCSSは、電話、タブレット、デスクトップに適応します
- モバイルファーストのアプローチ： Bootstrapでは、モバイルファーストのスタイルはコアフレームワークの一部です
- ブラウザの互換性： Bootstrap 4は、最新のすべてのブラウザ（Chrome、Firefox、Internet Explorer 10以降、Edge、Safari、Opera）と互換性があります。
Bootstrap 4はどこで入手できますか？
自分のWebサイトでBootstrap4の使用を開始する方法は2つあります。
あなたはできる：
- CDNからのブートストラップ4を含める
- getbootstrap.comからBootstrap4をダウンロードします
ブートストラップ4CDN
Bootstrap 4を自分でダウンロードしてホストしたくない場合は、CDN（コンテンツ配信ネットワーク）から含めることができます。
jsDelivrは、BootstrapのCSSおよびJavaScriptのCDNサポートを提供します。jQueryも含める必要があります。
jsDelivr：
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
Bootstrap 4 CDNを使用する利点の1つ：
多くのユーザーは、別のサイトにアクセスしたときにjsDelivrからBootstrap4をダウンロードしています。その結果、サイトにアクセスしたときにキャッシュから読み込まれるため、読み込み時間が短縮されます。また、ほとんどのCDNは、ユーザーがファイルを要求すると、最も近いサーバーからファイルが提供されることを確認します。これにより、読み込み時間が短縮されます。
jQueryとPopper？
Bootstrap 4は、JavaScriptコンポーネント（モーダル、ツールチップ、ポップオーバーなど）にjQueryとPopper.jsを使用します。ただし、BootstrapのCSS部分を使用するだけの場合は、それらは必要ありません。
- クローズ可能なアラート
- 状態を切り替えるためのボタンとチェックボックス/ラジオボタン
- スライド、コントロール、インジケーター用のカルーセル
- コンテンツを切り替えるには折りたたむ
- Dropdowns (also requires Popper.js for perfect positioning)
- Modals (open and close)
- Navbar (for collapsible menus)
- Tooltips and popovers (also requires Popper.js for perfect positioning)
- Scrollspy for scroll behavior and navigation updates
Bootstrap4のダウンロード
Bootstrap 4を自分でダウンロードしてホストする場合は、 https：//getbootstrap.com/にアクセスし、そこにある指示に従ってください。
Bootstrap4を使用して最初のWebページを作成する
1.HTML5Doctypeを追加します
Bootstrap 4は、HTML5Doctypeを必要とするHTML要素とCSSプロパティを使用します。
ページの先頭には、lang属性と正しい文字セットとともにHTML5Doctypeを常に含めてください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap4はモバイルファーストです
Bootstrap 4は、モバイルデバイスに応答するように設計されています。モバイルファーストスタイルはコアフレームワークの一部です。
適切なレンダリングとタッチズームを確実にするには、要素<meta>内に次のタグを
追加します。<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-widthパーツは、デバイスの画面幅（デバイスによって異なります）に従うようにページの幅を設定します。
このinitial-scale=1パーツは、ページがブラウザによって最初にロードされたときの初期ズームレベルを設定します。
3.コンテナ
Bootstrap 4には、サイトのコンテンツをラップするための包含要素も必要です。
選択できるコンテナクラスは2つあります。
- この
.containerクラスは、レスポンシブな固定幅のコンテナを提供します - この
.container-fluidクラスは、ビューポートの全幅にまたがる全幅のコンテナを提供します
2つの基本的なブートストラップ4ページ
次の例は、基本的なBootstrap 4ページ（レスポンシブ固定幅コンテナを使用）のコードを示しています。
コンテナの例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
次の例は、基本的なBootstrap 4ページ（全幅コンテナを含む）のコードを示しています。
コンテナ流体の例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>