Bootstrap4 基本チュートリアル

Bootstrap4 インストールと使用

Bootstrap をインストールするには以下の2つの方法があります4：

Bootstrap の使用方法 4 　CDN。
公式サイトから getbootstrap.com Bootstrapをダウンロード 4。

Bootstrap 4 CDN

国内では Staticfile CDN 上のライブラリを使用することをお勧めします：

Bootstrap4 CDN

<!--　新しい Bootstrap4　コア CSS ファイル　-->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　
<!--　jQuery ファイル。bootstrap.min.js の前にインポートする必要があります。　-->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　
<!--　bootstrap.bundle.min.js はポップアップ、ヒント、ドロップダウンメニューに使用され、popper.min.js を含んでいます。　-->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　
<!--　最新の Bootstrap4　コア JavaScript ファイル　-->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

注意：popper.min.js はポップアップ、ヒント、ドロップダウンメニューの設定に使用されます。現在、bootstrap.bundle.min.js には既に含まれています。 popper.min.js。

さらに、以下の CDN サービスを使用することもできます：

国内で推奨される： https://www.staticfile.org/
国際的に推奨される：https://cdnjs.com/

Bootstrapをダウンロード 4

公式サイトにアクセスしてください https://getbootstrap.com/ Bootstrapをダウンロード4 リポジトリ

注：さらに、npm、gem、composerなどのパッケージ管理ツールを使用してインストールすることもできます：
npm　install　[email protected]
gem　'bootstrap',　'~>　4.0.0.beta2'
composer　require　twbs/bootstrap:4.0.0-beta.2

最初のBootstrap 4 ページ

1、HTMLを追加5 doctype

BootstrapはHTMLのdoctypeを使用5 ファイルタイプであり、HTMLを追加する必要があります。5 doctype 声明

HTML5 doctypeはドキュメントのヘッダーに宣言し、対応するエンコーディングを設定します：

!DOCTYPE　html
<html>
　　<head>
　　　　<meta charset="utf-8">　
　　</head>
</html>

モバイルデバイス優先

Bootstrapで開発したウェブサイトがモバイルデバイスに対応し、適切な描画とタッチスクロールを確保するためには、ページのheadにviewport metaタグを追加する必要があります。以下のようにです：

<meta name="viewport" content="width=device-width,　initial-scale=1,　shrink-to-fit=no">

width=device-width は、デバイスの画面幅を示します。

initial-scale=1 は初期の縮尺比を示します。

shrink-to-fit=no 自動で携帯電話の画面幅に適応します。

コンテナクラス

Bootstrap 4 コンテナ要素が必要です。

以下の2つのコンテナクラスを使用できます：

.container クラスは、固定幅でレスポンシブレイアウトをサポートするコンテナとして使用されます。
.container-fluid クラスは、 100%の幅で、全視口(viewport)を占めるコンテナです。

2つの Bootstrap 4 ページ

Bootstrap4 .container サンプル

!DOCTYPE　html
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>私の最初の Bootstrap ページ</h1>
　　<p>これはテキストです。</p>　
</div>
</body>
</html>

テストを見てみる ‹/›

以下のサンプルは、全視口(viewport)を占めるコンテナを示しています。

Bootstrap4 .container-fluid サンプル

!DOCTYPE　html
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width,　initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
　　<h1>私の最初の Bootstrap ページ</h1>
　　<p>containerを使用しています-fluid、100% 幅広さ、全視野(viewport)を占めるコンテナ。</p>　
</div>
</body>
</html>

テストを見てみる ‹/›

Bootstrap4 グリッドシステム Bootstrap4 チュートリアル