最新のWeb開発のチュートリアル
 

Bootstrap Get Started

❮前 次の章❯

何であるBootstrap ？

  • Bootstrap迅速かつ容易にWeb開発のための無料のフロントエンドのフレームワークです
  • Bootstrapタイポグラフィー、フォーム、ボタン、テーブル、ナビゲーション、モーダル、画像カルーセルや他の多くの、だけでなく、任意のJavaScriptのプラグイン用のHTMLとCSSベースのデザインテンプレートが含まれて
  • Bootstrapまた、あなたの簡単に応答性のデザインを作成することができます

レスポンシブWebデザインとは何ですか？

レスポンシブウェブデザインは、自動的に大きなデスクトップに小さな携帯電話から、すべてのデバイスでよく見るために自分自身を調整し、ウェブサイトの作成についてです。

Bootstrapの歴史

Bootstrapツイッターでマーク・オットーとジェイコブソーントンによって開発され、GitHubの上で2011年8月にオープンソース製品としてリリースされました。

2014年6月にはBootstrap GitHubの上でNo.1のプロジェクトでした！

使用する理由Bootstrap ？

利点Bootstrap ：

  • HTMLとCSSのちょうど基本的な知識を持つ誰もが使い始めることができます簡単に使用する Bootstrap
  • 応答機能： Bootstrapの応答CSSは携帯電話、タブレット、デスクトップに調整します
  • モバイル最初のアプローチ：でBootstrap 3、モバイル-最初のスタイルは、コアフレームワークの一部であります
  • ブラウザの互換性： Bootstrapすべての最新ブラウザ（Chromeのは、Firefox、Internet Explorer、Safari、およびOpera）と互換性があります

どこで取得するBootstrap ？

使用を開始するには、2つの方法がありますBootstrapあなた自身のウェブサイト上では。

あなたはできる：

  • ダウンロードBootstrapからgetbootstrap.com
  • 含めるBootstrapからCDN

ダウンロードBootstrap

あなたがダウンロードし、ホストしたい場合はBootstrap自分自身に行くgetbootstrap.com 、そこの指示に従ってください。

Bootstrap CDN

あなたがダウンロードしてホストしたくない場合はBootstrap自分自身を、あなたからそれを含めることができCDN （コンテンツデリバリーネットワーク）。

MaxCDNはのためのCDNのサポート提供BootstrapのCSSとJavaScriptを。 また、jQueryのものがあります。

MaxCDN：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

使用することの一つの利点Bootstrap CDN ：
多くのユーザーは既にからブートストラップをダウンロードしているMaxCDN別のサイトを訪問するとき。 彼らはより速くロード時間に導くあなたのサイトを訪問するときその結果、キャッシュからロードされます。 また、ほとんどのCDN'sユーザーがそれからファイルを要求したら、また、より速くロード時間につながる、それらに最も近いサーバから提供されることを確認します。

最初のWebページの作成Bootstrap

1. HTML5のDOCTYPEを追加します。

Bootstrap HTML5のDOCTYPEが必要なHTML要素とCSSプロパティを使用しています。

必ずlang属性と正しい文字セットと一緒に、ページの先頭にHTML5のDOCTYPEが含まれています。

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

2. Bootstrap 3は、モバイル、最初のものです

Bootstrap 3のモバイル・デバイスに応答するように設計されています。 モバイル-最初のスタイルは、コアフレームワークの一部です。

適切なレンダリングとタッチズームを確保するために、次の追加<meta>タグ内の<head>要素：

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-widthの部分は、（デバイスによって異なります）デバイスの画面幅に従うようにページの幅を設定します。

initial-scale=1の部分は、ページが最初のブラウザによってロードされる初期のズームレベルを設定します。

3.コンテナ

Bootstrap 、サイトの内容をラップするために含む要素を必要とします。

から選択する2コンテナクラスがあります。

  1. .containerクラスは、応答性の固定幅のコンテナを提供します
  2. .container-fluidクラスは、ビューポートの幅全体に及ぶ、 全幅のコンテナを提供します

注意：コンテナは（あなたが別のコンテナ内のコンテナを置くことができない）ネスト可能ではありません。

二つの基本的なBootstrapページ

次の例では、基本のコードを示してBootstrap （応答固定幅のコンテナとの）ページを：

例

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
»それを自分で試してみてください

次の例では、基本のコードを示してBootstrap （全幅コンテナ付き）ページを：

例

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
»それを自分で試してみてください

❮前 次の章❯