オリジナル住所：http://www.work100.net/training/monolithic-frameworks-bootstrap-environment-setup.html
その他のチュートリアル：ビーム雲-無料講座

ビルドへの環境

いいえ。	記事のセクション	ビデオ
1	アウトライン
2	ダウンロードブートストラップ
3	ファイル構造
4	HTMLテンプレート
5	例

上記をご参照ください章节导航読み取るために

1.概要

ブートストラップのインストールは非常に簡単です。この章では、ブートストラップは、ファイル構造を議論し、ブートストラップをダウンロードしてインストールする方法について説明し、例を挙げてその使用を示しています。

2.ダウンロードブートストラップ

あなたは対処することができhttp://getbootstrap.com/ブートストラップの最新バージョンをダウンロードしてください。

あなたは、このリンクをクリックすると、以下のようなページが表示されます。

クリックしてDownload次のように、ダウンロードページに移動するにはボタンを：

あなたは非コンパイルされたソースコードを使用している場合は、再利用可能なCSSファイルを生成するために、LESSファイルをコンパイルする必要があります。

よりよく理解して使用するより便利にするために、我々はこのチュートリアルでブートストラップのコンパイル済みのバージョンを使用します。

ファイルをコンパイルして圧縮されているので、個別の開発機能で、あなたは常にこれらの別々のファイルが含まれていません。

最新のバージョン（使用して、このチュートリアルを書いている時点ブートストラップ4.4.1）。

3.ファイルの構造

あなたはブートストラップのコンパイル済みのバージョンをダウンロードする場合、ZIPファイル解凍し、次のファイル/ディレクトリ構造が表示されます。

bootstrap.* ：コンパイルCSSやJS
bootstrap.min.* CSSやJSコンパイルと圧縮後：

3.1.CSSファイル

ブートストラップは、オプションはコンパイルCSSの一部または全てを含むことが含まれています。

CSSファイル	レイアウト	コンテンツ	コンポーネント	ユーティリティ
bootstrap.css bootstrap.min.css	Included	Included	Included	Included
bootstrap-grid.css bootstrap-grid.min.css	Only grid system	Not included	Not included	Only flex utilities
bootstrap-reboot.css bootstrap-reboot.min.css	Not included	Only Reboot	Not included	Not included

3.2.JS文件

同样，我们可以选择包含部分或全部已编译的JavaScript。

JS files	Popper	jQuery
bootstrap.bundle.js bootstrap.bundle.min.js	Included	Not included
bootstrap.js bootstrap.min.js	Not included	Not included

4.HTML模板

一个使用了 Bootstrap 的基本的 HTML 模板如下所示：

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, Bootstrap!</title>
</head>
<body>
<h1>Hello, Bootstrap!</h1>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

5.实例

我们通过一个实例展示下如何构建基于 Bootstrap 的项目。

5.1.创建项目

首先通过 IDEA 创建一个 hello-bootstrap 项目，并构建如下目录结构：

目录结构说明：

目录	含义
assets/css/	样式
assets/images/	图片
assets/js/	JS
assets/plugins/	插件
assets/plugins/bootstrap/	Bootstrap 框架
assets/plugins/bootstrap/css/	Bootstrap 框架的样式
assets/plugins/bootstrap/js/	Bootstrap 框架的JS
assets/plugins/jquery-3.4.1.js	jQuery文件

5.2.创建测试文件

新しいプロジェクトのルートにindex.htmlファイルの導入Bootstrapフレームは、次の通り：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="./assets/plugins/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Hello Bootstrap</h1>

<script src="./assets/plugins/jquery-3.4.1.min.js"></script>
<script src="./assets/plugins/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

場合とない場合の比較のためBootstrapの違い、私たちは、新しい導入されていないBootstrapフレームワークtest.html以下のように、文書を：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

</head>
<body>
<h1>Hello Bootstrap</h1>

</body>
</html>