Bootstrap基本教程

Bootstrapプラグイン

Bootstrap CSS 介绍 Bootstrap 入門

Bootstrap 環境設定

Bootstrapのインストールは非常に簡単です。本章では、Bootstrapをダウンロードしてインストールする方法、ファイル構造について説明し、サンプルでその使用法を紹介します。

Bootstrapをダウンロードしてください。

から https://Bootstrapの最新バージョンを以下からダウンロードできます。このリンクをクリックすると、以下のように表示されるウェブページが見られます：/docs/3.4/ getbootstrap.com

"Download Bootstrap"リンクをクリックして、以下のページに移動します：

2つのボタンが見られます：

Download Bootstrap：Bootstrapのダウンロード。このボタンをクリックすると、Bootstrap CSS、JavaScript、フォントの予编译圧縮版をダウンロードできます。ドキュメントや元のソースコードファイルは含まれていません。
Download Source：ソースコードのダウンロード。このボタンをクリックすると、最新のBootstrap LESSとJavaScriptのソースコードを直接取得できます。

未コンパイルのソースコードを使用している場合、LESSファイルをコンパイルして再利用可能なCSSファイルを生成する必要があります。Bootstrap公式では、LESSファイルのコンパイルには、以下の方法がサポートされています： Recess、これはTwitterの less.js の CSS ヒント

より深く理解し、使いやすくするために、このチュートリアルでは Bootstrapの予编译バージョンを使用します。

ファイルがコンパイルされ圧縮されているため、独立した機能開発では、これらの独立したファイルを常に含めなくても良いです。

このチュートリアルの作成時には、最新版（Bootstrap 3）。

ファイル構造

予编译の Bootstrap

Bootstrapの既编译バージョンをダウンロードし、ZIPファイルを解凍すると、以下のファイルが見られます：/ディレクトリ構造：

上図のように、既にコンパイルされた CSS と JS（bootstrap.*）。また、既にコンパイルされ圧縮された CSS と JS（bootstrap.min.*）。また、Glyphicons フォントも含まれており、これはオプションの Bootstrap トピックです。

Bootstrap ソースコード

Bootstrap ソースコードをダウンロードした場合、ファイル構造は以下のようになります：

less/、js/ および fonts/ フォルダ内のファイルは、Bootstrap CSS、JS、アイコンフォントのソースコードです。
dist/ フォルダには、上記の予编译ダウンロード部分に記載されているファイルとフォルダが含まれています。
docs-assets/、examples/ およびすべての *.html ファイルは Bootstrap ドキュメントです。

HTML テンプレート

Bootstrap を使用した基本的な HTML テンプレートは以下のようになります：

サンプル

<!DOCTYPE　html>
<html>
　　　<head>
　　　　　　<title>Bootstrap　テンプレート</title>
　　　　　　<meta　name="viewport"　content="width=device-width,　initial-scale=1.0">
　　　　　　<!--　Bootstrapをインポートする　-->
　　　　　　<link　href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"　rel="stylesheet">
　
　　　　　　<!--　HTML5　ShivおよびRespond.jsはIE8　HTMLをサポート5要素およびメディアクエリ　-->
　　　　　　<!--　注意：　file://　　Respond.jsファイルをインポートすると、そのファイルは効果がありません　-->
　　　　　　<!--[if　lt　IE　9]>
　　　　　　　　　<script　src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
　　　　　　　　　<script　src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
　　　　　　<![endif]-->
　　　</<head>
　　　<body>
　　　　　　<h1>Hello,　world!</h1>
　
　　　　　　<!--　jQuery（BootstrapのJavaScriptプラグインはjQueryをインポートする必要があります）　-->
　　　　　　<script　src="https://code.jquery.com/jquery.js"></script>
　　　　　　<!--　すべてのコンパイル済みプラグインを含んでいます　-->
　　　　　　<script　src="js/bootstrap.min.js"></script>
　　　</body>
</html>

ここでは、含まれています jquery.js、bootstrap.min.js および bootstrap.min.css ファイル。通常のHTMLファイルをBootstrapを使用したテンプレートに変えるために使用されます。

上記コードセクションの各要素の詳細は、以下で説明します： Bootstrap CSS概観章節詳細解説。

オンラインサンプル

今、Bootstrapを使って"Hello, world!"を出力してみましょう：

サンプル

　<h1>Hello,　world!</h1>

Staticfile CDNお勧め

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

<!--　新　Bootstrap　核心　CSS　ファイル　-->
<link　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"　rel="stylesheet">
　
<!--　jQueryファイル。bootstrap.min.jsの前にインポートする必要があります　-->
<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　
<!--　最新のBootstrap核心JavaScriptファイル　-->
<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

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

国際推薦使用：https://cdnjs.com/

Bootstrap CSS 介绍 Bootstrap 入門