English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
このチュートリアルでは、Bootstrapを使う方法を学びます。 3 コンパイル版のBootstrapで基本的なBootstrapテンプレートを作成します。
ここでは、Bootstrapを使ってウェブページを作成するのがどれだけ簡単かを学びます。始める前に、コードエディタおよびHTMLとCSSの基本的な使用知識を確保してください。
ウェブ開発を始めたばかりの方は、ここからHTMLの基礎を学びましょう»
それでは、さっそく始めましょう。
ダウンロード可能な二つのバージョンがあります。コンパイルされたBootstrapおよびBootstrapソースファイル。ここからBootstrapファイルをダウンロードしてください。
CSSとJavaScriptファイルのコンパイルおよび縮小版、およびアイコンのフォント形式を含むダウンロードを編集します。これにより、より速く、簡単にウェブ開発ができます。また、ソースコードにはすべてのCSSとJavaScriptのオリジナルソースファイルおよび文書のローカルコピーが含まれています。
よりよく理解するために、コンパイルされたBootstrapファイルに焦点を当てます。これにより、あなたの時間を節約できます。なぜなら、各機能ごとにファイルを管理する必要がなく、HTTPリクエストとダウンロードサイズも小さいため、サイトをプロダクション環境に移行する際に、ファイルをコンパイルおよび圧縮できるため、ウェブサイトのパフォーマンスを向上させ、貴重なバンド幅を節約できます。
コンパイルされたBootstrapをダウンロード後、圧縮ファイルを解凍して構造を確認してください。以下のファイル構造と内容が見つかります。
bootstrap/ |—— css/ | |—— bootstrap.css | |—— bootstrap.min.css | |—— bootstrap-theme.css | |—— bootstrap-theme.min.css |—— js/ | |—— bootstrap.js | |—— bootstrap.min.js |—— fonts/ | |—— glyphicons-halflings-regular.eot | |—— glyphicons-halflings-regular.svg | |—— glyphicons-halflings-regular.ttf | |—— glyphicons-halflings-regular.woff
ご覧の通り、Bootstrapのコンパイル版はコンパイルされたCSSとJSファイル（bootstrap.*），およびコンパイルおよび圧縮されたCSSとJS（bootstrap.min.*）。
フォントファイルglyphicons-halflings-regular.*フォルダには4つのフォントファイル()があります。これらのフォントファイルはGlyphicon Halflingsコレクションに含まれています250以上のアイコンがあります。
ヒント：これはBootstrapの最も基本的な形式で、どんなWebプロジェクトでも簡単に使用できます。BootstrapのJavaScriptプラグインはjQueryを含む必要があります。以下にアクセスしてくださいhttps://jquery.com/download/最新バージョンのjQueryフォームをダウンロードしてください。
今までBootstrapファイルの構造と用途について学びました。今や実際にBootstrapを使う時が来ました。このセクションでは、ファイル構造で述べたすべての内容を含む基本的なBootstrapテンプレートを作成します。
以下の手順を順番に進めていきましょう。このチュートリアルの最後に、Webブラウザで「Hello world」メッセージを表示するHTMLファイルを作成します。
お好みのコードエディタを開き、新しいHTMLファイルを作成してください。空のウィンドウから始め、以下のコードを入力し、デスクトップに「basic.html」として保存してください。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>基本的なHTMLファイル</title> </head> <body> <h1>Hello, world!</h1> </body> </html>テストを試してみる‹/›
ヒント：常にドキュメント部分にviewport<meta>タグを含め、タッチズームを有効にし、モバイルデバイス上での正確な表示を確保します。またX-UA-CompatibleでEdgeモードを持つmetaタグを含めることで、Internet Explorerが最高のモードでウェブページを表示するように指示します。
このHTMLファイルをBootstrapテンプレートに設定するには、対応するBootstrap CSSとJSファイルを追加するだけで十分です。JavaScriptファイルはページの下部に追加するべきです-閉じるタグ（つまり）の前に配置することで、ウェブページのパフォーマンスを向上させます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>基本的なBootstrapテンプレート</title> <link rel="stylesheet" type="text/css" href="/static/style/bootstrap.min.css"> <!-- オプションのBootstrapテーマ --> <link rel="stylesheet" href="/static/style/bootstrap-theme.min.css"> </head> <body> <h1>Hello, world!</h1> <script src="/static/script/jquery-1.11.3.min.js"></script> <script src="/static/script/bootstrap.min.js"></script> </body> </html>テストを試してみる‹/›
私たちは準備ができています！BootstrapのCSSとJSファイル、必要なjQueryライブラリを追加した後、Bootstrapフレームワークを使用して、どのサイトやアプリケーションでも開発を開始できます。
今、ファイルを「bootstrap」と名前を変更します-template.html
注意：.htmlエクスパンション名を指定することは重要です-一部のテキストエディタ（例えば、メモ帳）は、自動的に.txtエクスパンション名を保存します。
ファイルをブラウザで開きます。ファイルに移動し、それをダブルクリックします。デフォルトのWebブラウザで開かれます。（ない場合は、ブラウザを開き、ファイルをその中にドラッグします。）
自分でダウンロードしてホストする必要がない場合は、無料で提供されるCDN（Content Delivery Network）リンクを使用して、BootstrapのCSSとJavaScriptファイル、jQueryライブラリのJavaScriptファイルをドキュメントに含めることができます。
CDNは、Bootstrapのファイルを世界中に分散した複数のサーバー上にホストすることで、読み込み時間を短縮し、パフォーマンスの向上を提供します。ユーザーがファイルをリクエストした場合、最も近いサーバーからファイルを提供します。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基本的なBootstrapテンプレート</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- オプションのBootstrapテーマ --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>テストを試してみる‹/›
子资源完全性(SRI)を実現するために、Bootstrap
CDNに完全性とcrossorigin属性が追加されました。これは安全機能であり、ウェブサイトがCDNまたは他の場所から取得したファイルが予期せぬ操作なく配信されることを確実にし、損傷したCDNからの攻撃リスクを低減します。その動作原理は、取得したファイルが一致する暗号化ハッシュを提供することを許可することです。
属性integrityとcrossoriginがCDNのインストールに追加されました子资源完全性(SRI)。これはセキュリティ機能であり、ウェブを通じて伝達されるファイル（CDNまたは他のどこからでも）が意図せず処理されていないことを確認し、CDNが攻撃されるリスクを軽減します。読み込むファイルが提供された暗号化ハッシュと一致する必要があるため、動作します。
ヒント：あなたのサイトの訪問者が他のサイトにアクセスする際に、既に同一のCDNからBootstrapのファイルをダウンロードしている場合、ブラウザのキャッシュから読み込まれ、再ダウンロードされずに、読み込み時間が短縮されます。