ブートストラップのプロフィール

ターゲット

ブートストラップは、最も人気のあるフロントエンドのフレームワークであり、その3番目のバージョン（V3.0.0）をリリースしました。このチュートリアルでは、ブートストラップ3学習を開始するために行くことができます。

また、社会的なプラグインやGoogleマップや他のサードパーティ製プラグインを追加し、ドロップダウンボックスを作成して酒盛りを使用して、ナビゲーションはNAVによって作成され、このようなレイアウトを作成するためにグリッドを使用するなど異なるフレームカスタムフレーム機能を使用する方法について説明します。

デモのスクリーンショット

ブートストラップとは何ですか

ブートストラップは、WebアプリケーションとWebサイトを迅速に開発するためのフロントエンドのフレームワークです。

最新のWeb開発では、必要とされているほぼすべてのWebプロジェクトには、いくつかのコンポーネントがあります。

グリッド、タイポグラフィ、テーブル、フォーム、ボタンと応答性 - ブートストラップは、これらの基本モジュールのすべてを提供しています。

また、このようなドロップダウン、ナビゲーション、モーダル、Typehead、ページネーション、酒盛り、ブレッドクラム、タブ、サムネイル、ヘッダーなどのような他の有用なフロントエンドコンポーネント、たくさんあります。

これらを使用すると、Webプロジェクトを構築し、それをより迅速かつ容易に実行させることができます。

全体のフレームワークはモジュールに基づいているためまた、あなたはカスタマイズするプロジェクトを開始した後、独自のCSS、あるいは大きな補正を配置することができます。

これは、いくつかのベストプラクティスに基づいており、私たちは、これはあなたがHTMLとJavaScript / jQueryのための基本を習得したら、あなたはWeb開発にこの知識を適用することができ、最新のWeb開発の機会を学習を開始するには良い場所だと思います。

一部の批評家が、ブートストラップによって構築されたすべてのプロジェクトは同じに見えるウェブサイトを構築することができ、あなたはHTML + CSSの知識についてはあまり知っている必要はありません。しかし、私たちは、あなたがそれを一意にするためにカスタマイズする必要がある任意の他の一般的なもののように、ブートストラップが共通のフレームワークであり、理解する必要があります。カスタマイズしたいときは、綿密な調査を必要とする、全く良いHTML + CSSベースが不可能ではありませんがあります。

除くブートストラップ、もちろん、他の多くの良いフロントフレームは、人選の開発ですが、ブートストラップは間違いなく試してみる価値があるのフレームワークを使用して、そこにあります。

なぜプロジェクトが必要がありますブートストラップを使うのか？

ファイル構造をダウンロードし、理解

あなたがから選ぶことができますhttps://github.com/twbs/bootstrap/archive/v3.0.0.zipまたはhttps://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist .zipファイルにブートストラップバージョン3.0.0をダウンロードしてください。私たちは、あなたが第二を使用することができ、最初のものを使用しています。

また、我々は、ダウンロードコードがブートストラップコードフォルダを介して第1をダウンロードするためのリンクが含まれています。この辺はまたのcustom.cssのブートストラップCSSをカスタマイズするために使用された元が含まれています。

開梱後は、ルートフォルダのブートストラップ3.0.0で、一部のファイルやフォルダを検索します。

メインのCSSファイル - bootstrap.cssとブートストラップ・min.cssのその簡易版、フォルダの下のルートフォルダ」のdist」フォルダ」のcss "ブートストラップ-3.0.0ファイルにあります。

内部の「DIST」で、「JS」フォルダがメインのJavaScriptファイルのbootstrap.jsとその簡易版が含まれていますがあります。

ルート内のファイルは、個別の「JSの」フォルダが異なるファイルの異なるJavaScriptのプラグインが含まれていますがあります。

「資産」内のルートファイルでは、別の「JSの」フォルダを検索します。これはIE8のサポートを得るため、html5shiv.jsのHTML5のシムと場所です。 IE8のマルチメディアクエリをサポートするrespond.min.jsファイルもあります。このフォルダには、ブートストラップ依存jquery.jsをプラグインJSが含まれています。

同じフォルダに、「ICO」フォルダは、モバイルデバイスのアイコンとファビコンアイコンの様々なが含まれていますがあります。

同じパス 'CSS'はフォルダは、cssファイル、ドキュメントが含まれています。

「_includes」と「_layouts」フォルダには、ラピッドプロトタイピングのために有用な設計とすることができるドキュメントのいくつかのデフォルトのレイアウト構造を、含まれています。

ルートフォルダが「少ない」フォルダには、いくつかの.lessファイルが含まれています。あなたがLESSに基づいて開発する場合は、これらのファイルが役立ちます。

ルートフォルダでは、いくつかのファイルがあります。いくつかのコンパイルbower.json、browserstack.jsonためバウアーに基づいていくつかの基本的なプロトタイプのHTMLファイルに使用されます。また、そこにcomposer.jsonとYAMLファイル_config.yml。

指定されたリンクからダウンロードする以外にも、すべてのCSS、JSファイルをコンパイルするには、次のコマンドを使用することができます -

$ bower install bootstrap

あなたはGitのブートストラップレポートをコピーすることができます

git clone git://github.com/twbs/bootstrap.git

このチュートリアルでは、我々は唯一のZipファイルをダウンロードして、それは使用されません。

このチュートリアルを学ぶたら、我々はそれがどのように動作するかを確認するためにフレームを取り付けバウアーすることをお勧めします。

NetDNAサポートのコンパイルとブートストラップCSS、Jsのおよび他のトピックのCSSの簡易版。あなたは彼らに次の文を引用することができます

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

ブートストラップV3.0.0を使用して開発

基本的なHTML

以下は、私たちのプロジェクトのための基本的なHTML構造であります

<！DOCTYPE HTML>
<HTML>
  <ヘッド>
    <タイトル>ブートストラップV3テンプレート</タイトル>
    <メタ名=「ビューポート」コンテンツ= "幅=デバイス幅、初期スケール= 1.0">
    <！ - ブートストラップ - >
    <リンクのhref = "ブートストラップ-3.0.0 / distの/ CSS / bootstrap.min.css"のrel = "スタイルシート"メディア= "画面">

    <！ -  HTML5のシムとHTML5の要素とメディアクエリのRespond.js IE8のサポート - >
    <！ -  [場合LT IE 9]>
      <SCRIPT SRC = "ブートストラップ-3.0.0 /資産/ JS / html5shiv.js"> </スクリプト>
      <スクリプトSRC = "ブートストラップ-3.0.0 /資産/のJS / respond.min.js"> </スクリプト>
    <！[endifの]  - >
  </ HEAD>
  <ボディ>
    <H1>こんにちは、世界！</ H1>

    <！ -  jQueryの（ブートストラップのJavaScriptのプラグインのために必要な） - >
    <SCRIPT SRC = "// code.jquery.com/jquery.js"> </スクリプト>
    <！ - すべてのコンパイル済みのプラグインを含める（以下）、または必要に応じて個々のファイルを含めます - >
    <スクリプトSRC = "ブートストラップ-3.0.0 / distの/ JS / bootstrap.min.js"> </スクリプト>
  </ BODY>
</ HTML>

IE8のサポートを得るためのテンプレートと追加html5shiv.js respond.min.jsことに注意してください。 ブートストラップバージョン3では、これらのファイルに追加されました。

私たちは、Twitter、ブートストラップのWebサーバーフォルダのルートフォルダ内のファイルを、それがブートストラップ-3.0.0フォルダを置いてきました。私たちが作成するすべてのHTMLファイルには、さえずり - ブートストラップに配置されます。その理由は、当社の開発プロセスを合理化するためには、この点を示します。

カスタマイズ

我々は、 さまざまなCSSボックスのスタイルをカスタマイズします。したがって、上のファイルを破壊しない、元のCSSに基づいて（ブートストラップ-3.0.0位置のdistフォルダの）同じフォルダに、我々はのcustom.cssという名前の個別のCSSファイルを作成します。その後、我々は、HTMLファイルで、すぐに元のCSSファイルの後に、CSSファイルを参照します。このように、我々は変更するデフォルトのスタイルを上書きすることができ、しかし、ブートストラップのアップグレード場合、元のCSSファイルが更新に基づいて、当社のカスタムを破壊しないであろう。我々はまた、あなたが開発プロセスでは、このアプローチに従うことをお勧めします。

ナビゲーションを作成します。

ナビゲーションを作成するには、開始タグの後に体に続いて、HTMLファイル内に、次のコードを追加します。

<ナビゲーションクラス= "ナビゲーションバーナビゲーションバー-逆ナビゲーションバー固定トップ」の役割="ナビゲーション ">
  <ULクラス= "NAVナビゲーションバー-NAV">
  <李> <a href="new.html" class="navbar-brand">
<IMG SRC = "logo.png"> </a>の</李>
  <李クラス= "アクティブ"> <a href="#">ホーム</a>にます。</ li>
  <李> <aのhref="price.html">価格する</a>ます。</ li>
  <李> <aのhref="contact.html">の接触する</a>ます。</ li>
  <李クラス= "]プルダウン">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">社会<Bクラスは、= "カレット"> </ b>をします</a>
        <ULクラス= "ドロップダウンメニュー">
          <李クラス= "社交"> <グラム：プラスワン注釈= "インライン"幅= "150"> </グラム：プラスワン> </ LI>
          <李クラス= "社交">の<divクラス= "FB-のような「データのhref =" https://developers.facebook.com/docs/plugins/ "データ幅が="プラグインのピクセル幅 "データデータ-カラースキーム= "光"データレイアウト= "標準"のデータ・アクション=データショーの顔 "のように" = "true"のデータ送信= "false"を-height = "プラグインの高さをピクセル単位"> < / DIV> </ LI>
          <李クラス= "社交"> <a href="https://twitter.com/share" class="twitter-share-button">ツイートします</a>
！<スクリプト>関数（D、S、ID）{varの各JS、FJS = d.getElementsByTagName（複数可）[0];（！d.getElementById（ID））;のJs {jsファイル= d.createElement（複数可）の場合。 ID = ID; js.src = "// platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs）;}}（文書、「スクリプト」、「さえずり-WJS"）; < /スクリプト> </ LI>
       </ UL>
      </李>
  </ UL>
</ナビゲーション>

ナビゲーションのために、ブートストラップは、コンテナ階層に「ナビゲーションバー」クラスを使用します。従って、全体のナビゲーションナビゲーション要素を保持するために割り当てられます。

私たちは、ナビゲーションバーのデフォルト色、代わりにデフォルトの暗い前の光の使用を変更するには、「ナビゲーションバー-逆」クラスを使用しています。「ナビゲーションバーに固定されたトップ」クラスは、我々は、HTMLページ、固定位置の上部にあるナビゲーションバーを下にスクロールしたときにことを保証します。

役割を使用している場合、ナビゲーションが作成されたブートストラップV3.0.0では、=「ナビゲーション」が新しく追加されました。 ナビゲーションバーへ簡単にアクセスするために、そのような使用をお勧めしますブートストラップ。

この時点で、我々はのcustom.cssに文書の本文を増やす必要がある」パディングトップ：80px; '。あなたが満たされたピクセルの上部が異なっていてもよいように、本体に追加しますが、そうしない限り、後に、ナビゲーションバーの上部に表示されなくなります。

コンテナのナビゲーションでは、我々は我々が「ナビゲーションバー」と「ナビゲーションバー、ナビゲーションバー」順不同リストのクラスを持っています。この順不同リストでは、各リスト項目は、ナビゲーションリンクが含まれています。

ブランド名を提示する「ナビゲーションバーブランド「クラス。私たちは、画像を使用しています。画像の高さの高さは、我々はいくつかのカスタマイズを行うベースラインのナビゲーションバー、よりも大きいため。 50px元のデフォルトの20ピクセルから「.navbar-NAV>李> ''行の高さ 'プロパティ、に16pxにフォントサイズを変更。

右へのリンクは、私たちは、ドロップダウンボックスを増加しています。関連李は「ドロップダウン」クラスに追加するために、「ドロップダウン・トグル 'と2クラスを持つ「カレット」のアンカーを追加することが続きます。私たちのプロジェクトのアンカーは、実際には社会的なアンカーテキストが含まれています。この李は順不同リスト、ネストされたリスト内の各リスト項目は、次のボックスに示したリンクが含まれていているが含まれています。

私たちは社会的なプラグインを追加したドロップダウンボックスで。最初は李グーグルプラスマークを含み、第二は、Facebookの李タグが含まれ、3番目は表示のliタグTwitterのボタンといくつかのjsのスクリプトが含まれています。

また、あなたは、Facebookボタンの作品を作るために以下のマークアップおよびスクリプトを追加し、bodyタグの後に開始する必要があります

<DIVのID = "FB-ルート"> </ div>の

（関数（D、S、ID）{
  var JS、FJS = d.getElementsByTagName（複数可）[0];
  （d.getElementById（ID））、戻り場合;
  JS = d.createElement（s）は、js.id = ID;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore（JS、FJS）。
}（文書、「スクリプト」、「Facebookの-jssdk '））;

Twitterのボタンを機能させるために、我々はbodyタグの前に終了し、次のスクリプトを追加します。

（関数（）{
    するvar PO =のdocument.createElement（ 'スクリプト'）; po.type = 'テキスト/ javascriptの'; po.async =はtrue。
    po.src = 'https://apis.google.com/js/plusone.js';
    VAR S = document.getElementsByTagName（ 'スクリプト'）[0]; s.parentNode.insertBefore（経口、秒）。
  }）（）;

私たちは、ソーシャルボタンの「社交」のクラスにいくつかの余分なスタイルを追加するには、次のスタイルを使用します。

.socials {
パディング：10pxの;
}

これは、私たちのナビゲーションを完了します。

酒盛りによってスライドショーを作成します。

ホームページのナビゲーションバーを投影するためには、スライドショーを作成し、我々は次のタグを使用します。

<DIVのID = "カルーセル例 - 一般的な"クラス= "カルーセルスライド」>
  <！ - インジケータ - >
  <オルクラス= "カルーセル・指標」>
    <李データターゲット= "＃カルーセル例 - 一般的な"データ・スライドへ= "0"クラス= "アクティブ"> </ LI>
    <李データターゲット= "＃カルーセル例 - 一般的な"データ・スライドへ= "1"> </ LI>
    <李データターゲット= "＃カルーセル例 - 一般的な"データ・スライドへ= "2"> </ LI>
  </オル>

  <！ - スライドのラッパー - >
  <DIVクラス= "カルーセル・インナー">
    <DIVクラス= "項目アクティブ">
      <IMG SRC = "computer.jpg" ALT = "...">
      <DIVクラス= "カルーセルドキャプション」>
        <H1>大規模なデスクトップがあふれている</ H1>
        <P> <ボタンクラス= "BTN-LG BTN BTN-成功">今、</ P> 30日間のトライアルをお試しください
      </ DIV>
    </ DIV>
    <DIV CLASS = "アイテム">
      <IMG SRC = "mobile.jpg" ALT = "...">
      <DIVクラス= "カルーセルドキャプション」>
        <H1>携帯電話は、デスクトップをより多かっされている</ H1>
        <P> <ボタンクラス= "BTN-LG BTN BTN-成功">今、</ P> 30日間のトライアルをお試しください
      </ DIV>
    </ DIV>
<DIV CLASS = "アイテム">
      <IMG SRC = "cloud1.jpg" ALT = "...">
      <DIVクラス= "カルーセルドキャプション」>
        <H1>企業は、高速</ H1>のクラウドコンピューティングを採用しています
        <P> <ボタンクラス= "BTN-LG BTN BTN-成功">今、</ P> 30日間のトライアルをお試しください
      </ DIV>
    </ DIV>
  </ DIV>
  <！ - コントロール - >
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <スパンクラス= "アイコン-PREV"> </ span>の
  こちら</a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <スパンクラス= "アイコンの横"> </ span>の
  こちら</a>
</ DIV>
</ DIV>

酒盛りの4つのセクションがあります。「カルーセルスライド」クラス定義でのdivタグを使用して、本体容器。

そして、順序付きリストで「カルーセル・指標」クラス。各リスト項目は、スライドを表しオール。ページがロードされると、「アクティブ」クラスにデフォルトのスライドショーによってロードされました。レンダリングする場合、あなたは小さな円の見出しにそれらが表示されます。

その後、各スライド（画像）は、divタグの「アイテム」クラスに配置されます。各項目は、div要素の「カルーセル・キャプション」クラスにネストされています。カルーセル・キャプションはタイトルタグと一緒に表示された画像が含まれています。段落は、H1とボタンが含まれている、あなたはまた、他の独自のマークを含めることができます。

最後の部分は、次の/前のスライドスライドを制御するために使用されます。これは、以下の「正しい」とクラスの「カルーセル・コントロール」の定義を使用して、クラスの定義に「カルーセル・コントロールを ''左 'との使用です。

前と次のアイコンのための「アイコン-前へ 'と'アイコンの横」クラス。

私たちは、 デフォルトの酒盛りにいくつかのカスタマイズを行っています。 私たちは、キャプション、インジケーター、次/前のアイコンが数ピクセルのデフォルトの場所の上にレンダリングされます願っています。

これを行うには、ファイルのcustom.css以下のスタイルを追加します。

.carousel-インナー.itemの.carouselドキャプション{
位置：絶対;
トップ：200pxの
}
.carousel-指標{
位置：絶対;
トップ：400ピクセル;
}
.navbar {
マージン底：0;
}
.navbar-NAV>李> {
行の高さ：は50px;
フォントサイズ：16pxに
}

我々はまた、H1をカスタマイズし、それに30ピクセルの下余白を追加します。

H1 {
  マージン底：30px
  }

応答画像

あなたはスライド内の各画像は、私たちは「IMG応答」クラスを使用していたことに気づいたかもしれません。これは、ブートストラップV3.0.0の新機能です。 imgタグ「IMG応答性」クラスを使用することにより、ブートストラップ画像応答するように。

グリッドを作成します。

次のスライドでは、コンテンツを配置するためにグリッドを使用していました。 div要素の「コンテナ」クラスを持つことによって、グリッドを開始します。代わりに、コンテナは単一のクラスを持っているブートストラップ、以前のバージョンの場合、デフォルトは応答し、我々は応答Webサイトを開発しようとしていることに注意してください。

div要素のネストされたいくつかの「行」クラスを持つコンテナのdiv（3の最初の行は、2行目は6を持っている）、ブートストラップグリッド線を作成します。

各行には、列を作成するために、div要素の「COL-XY」クラスにあります。 xの値は次のようになります。ノートパソコンや大型のデスクトップ画面をLGのためのより小さいデスクトップ画面用にMDタブレットPCのSMのためのモバイルデバイス用のXS、。これが第一の方法です。グリッド内の列の合計数が12以下であってはならないが、yの値は、任意の正の整数を指定できます。私たちのプロジェクトでは、簡単のために我々は、LGを使用していたが、我々はまだ行っておりますので、あなたは比較のためにプロジェクトサイトを表示するには、携帯電話またはタブレットを得ることができます。

以下のチュートリアルでは、その魅力的な応答を探求し、ブートストラップグリッドシステム上の完全なチュートリアルを持っています。

この例では、最初の3行の列幅が等しいたいので、すべてのために使用する列 'COL-LG-4」。 2行目では、同じ幅の6つの列をたいので、列 'COL-LG-2」のすべてのために使用します。

ここでは、2つの列のグリッドを含むタグ、最初の行は3がある場合、2行目は6を持っています。

<DIVクラス= "行バローネ">
<DIVクラス= "COL-LG-2">
<P> <IMG SRC = "../のwp-コンテンツ/アップロード/ 10分の2013 / php.png"> </ P>
</ DIV>
<DIVクラス= "COL-LG-2">
<P> <IMG SRC = "../のwp-コンテンツ/アップロード/ 10分の2013 / mysqlの-logo.jpg"> </ P>
</ DIV>
<DIVクラス= "COL-LG-2">
<P> <IMG SRC = "../のwp-コンテンツ/アップロード/ 10分の2013 / javascriptの-logo.png"> </ P>
</ DIV>
<DIVクラス= "COL-LG-2">
<P> <IMG SRC = "../のwp-コンテンツ/アップロード/ 10分の2013 / java.jpg"> </ P>
</ DIV>
<DIVクラス= "COL-LG-2">
<P> <IMG SRC = "../のwp-コンテンツ/アップロード/ 10分の2013 / postgresql.png"> </ P>
</ DIV>
</ DIV>

私たちは、時間と、次のマークとフッターのグリッドの端を持っています

<HR>
<P>のToDoアプリによって2013から14 @著作権。</ P>

表を使用してください

私たちのプロジェクトのprice.htmlページでは、我々は次のようにラベル付け、価格リストをレンダリングするためにフォームを使用します

<Tableクラス= "表table-境」>
          <THEAD>
            <TR>
              <Thの> </ thは>特長
              <Thの>個々の</目>
              <Thの>小さなチーム</目>
              <Thの>ミディアムチーム</目>
              <Thの>エンタープライズ</目>
            </ TR>
          </ THEAD>
          <TBODY>
            <TR>
              <TD> <H3>ユーザの番号</ H3> </ TD>
              <TD> <スパンクラス= "バッジ"> One </ span>の</ TD>
              <TD> <スパンクラス= "バッジ">ファイブ</ span>の</ TD>
              <TD> <スパンクラス= "バッジ">フィフティーン</ span>の</ TD>
              <TD> <スパンクラス= "バッジ">無制限</ span>の</ TD>
           </ TR>
            <TR>
              <TD> <H3>プロトレーニング</ H3> </ TD>
              <TD> <スパンクラス= "バッジ">なし</ span>の</ TD>
              <TD> <スパンクラス= "バッジ">はい</ span>の</ TD>
              <TD> <スパンクラス= "バッジ">はい</ span>の</ TD>
              <TD> <スパンクラス= "バッジ">はい</ span>の</ TD>
           </ TR>
            <TR>
              <TD> <H3>フォーラムサポート</ H3> </ TD>
              <TD> <スパンクラス= "バッジ">はい</ span>の</ TD>
              <TD> <スパンクラス= "バッジ">はい</ span>の</ TD>
              <TD> <スパンクラス= "バッジ">はい</ span>の</ TD>
              <TD> <スパンクラス= "バッジ">はい</ span>の</ TD>
           </ TR>
	<TR>
              人のサポート</ H3> </ TD>で<TD> <H3>
              <TD> <スパンクラス= "バッジ">なし</ span>の</ TD>
              <TD> <スパンクラス= "バッジ">なし</ span>の</ TD>
              <TD> <スパンクラス= "バッジ">はい</ span>の</ TD>
              <TD> <スパンクラス= "バッジ">はい</ span>の</ TD>
           </ TR>
	   <TR>
              <TD> <H3>週刊ウェビナー</ H3> </ TD>
              <TD> <スパンクラス= "バッジ">なし</ span>の</ TD>
              <TD> <スパンクラス= "バッジ">なし</ span>の</ TD>
              <TD> <スパンクラス= "バッジ">はい</ span>の</ TD>
              <TD> <スパンクラス= "バッジ">はい</ span>の</ TD>
           </ TR>
	 <TR>
              <TD> <H3>価格</ H3> </ TD>
              <TD> <ボタンタイプ= "ボタン"クラス= "BTN-LG BTN BTN-警告"> $ 9 /月</ボタン> </ TD>
              <TD> <ボタンタイプ= "ボタン"クラス= "BTN-LG BTN BTN-警告"> $ 19 /月</ボタン> </ TD>
              <TD> <ボタンタイプ= "ボタン"クラス= "BTN-LG BTN BTN-警告"> $ 49 /月</ボタン> </ TD>
              <TD> <ボタンタイプ= "ボタン"クラス= "BTN-LG BTN BTN-警告"> $ 99 /月</ボタン> </ TD>
           </ TR>
	    <TR>
              <TD> </ TD>
              <TD> <ボタンタイプ= "ボタン"クラス= "BTN-LG BTN BTN-成功">今、</ button>の</ TD>購入
              <TD> < "BTN-LG BTN BTN-成功」ボタンタイプ="ボタン "クラス=">今すぐ購入</ボタン> </ TD>
              <TD> < "BTN-LG BTN BTN-成功」ボタンタイプ="ボタン "クラス=">今すぐ購入</ボタン> </ TD>
              <TD> < "BTN-LG BTN BTN-成功」ボタンタイプ="ボタン "クラス=">今すぐ購入</ボタン> </ TD>
           </ TR>
          </ TBODY>
        </表>

元のCSSファイル 'テーブル'と 'テーブル-境'は、2つのクラスを使用してブートストラップ。しかし、我々は異なって見える customize.cssにいくつかのカスタム CSSファイルを追加することによって、次の表を作成する必要があります

{番目
背景色：＃428bca。
色：＃1 ec8007。
Zインデックス：10;
テキストの影：1pxの1ピクセル1ピクセル#FFF;
フォントサイズ：は24px;
}

バッジを使用してください

私たちは、テーブル内のテキストを表示するには、「バッジ」クラスを使用します。我々は、バッジのクラスでは、次のカスタムCSSを持っています

.badge {
背景色：＃428bca。
色：#FFF;
フォントサイズ：22px;
}

このページとcontact.htmlページのために、私たちはcustomize.cssで別のCSSルールを追加しました

.container> H1 {
テキスト整列：センター;
}

これはh1を中心にできます。

フォームの使用

contact.htmlファイルでは、我々は3つの列、最初の列を作成し、我々はフォームを埋め込みます。デフォルトのスタイルシートを使用してください。

<Formクラス= "フォームの水平「役割="フォーム ">
  <DIVクラス= "フォーム・グループ」>
    メール</ label>は<用= "メール"クラス= "COL-LG-2コントロールラベル「ラベル>
    <DIVクラス= "COL-LG-10">
      <入力タイプ= "メール"クラス= "フォームコントロール" ID = "メール"プレースホルダ= "メール">
    </ DIV>
  </ DIV>
  <DIVクラス= "フォーム・グループ」>
    名前</ label>は<用= "名前"クラス= "COL-LG-2コントロールラベル「ラベル>
    <DIVクラス= "COL-LG-10">
      <input type = "text"クラス= "フォームコントロール" ID = "名前"プレースホルダ= "名前">
    </ DIV>
  </ DIV>
   <DIVクラス= "フォーム・グループ」>
    カントリー</ label>は、<= "国"クラス= "COL-LG-2コントロールラベル」のラベル>
    <DIVクラス= "COL-LG-10">
      <選択>
      <オプション> USA </オプション>
      <オプション>インド</オプション>
      <オプション>英国</オプション>
      <オプション> Autralia </オプション>
      </選択>
    </ DIV>
  </ DIV>
<DIVクラス= "フォーム・グループ」>
    <=のラベル "DESC"クラス= "COL-LG-2コントロールラベル">メッセージ</ label>は
    <DIVクラス= "COL-LG-10">
      <テキストエリアの行= "5" colsの= "50"> </ TEXTAREA>
    </ DIV>
  </ DIV>

  <DIVクラス= "フォーム・グループ」>
    <DIVクラス= "COL-LG-オフセット-2 COL-LG-10">
      <ボタンタイプ= "提出"クラス= "BTN BTN-デフォルト"> </ button>の送信
    </ DIV>
  </ DIV>
</フォーム>

「フォームの水平 'クラスはフォームが水平方向の配置を維持することができます。 役割= "フォーム"を追加し、アクセスの容易さのためにそれを注意してください。 これは、新機能のバージョン3.0.0です。

各フォームコントロールを見つけるには、ブートストラップ3.0.0は新しい「フォーム・グループ」クラスを使用します。

このページでは、グリッドの2列目には、私たちは、単にいくつかのテキストを置きました。

Googleマップを追加します。

contact.htmlページでは、グリッドの3列目は、我々はGoogleマップ（Googleマップ）を追加しました。これを行うには、次のタグを使用します

<DIVのID = "map_canvas"> </ div>の
  </ DIV>

ヘッダ内部のHTMLファイルのヘッダに追加された次のjs

関数の初期化（）{
        VAR map_canvas =のdocument.getElementById（ 'map_canvas'）;
        するvar map_optionsの= {
          センター：新しいgoogle.maps.LatLng（23.244066、87.861276）、
          ズーム：8、
          mapTypeId：google.maps.MapTypeId.ROADMAP
        }
        VARマップ=新しいgoogle.maps.Map（map_canvas、map_options）
      }
      google.maps.event.addDomListener（ウィンドウ、「荷重」、初期化）;

前jsの前に言った、あなたは、次のスクリプトタグを追加する必要があります

<SCRIPT SRC = "http://maps.googleapis.com/maps/api/js?sensor=false"> </スクリプト>

正しくマップを描画するためには、以下のスタイルを追加する必要がありますのcustom.css

#map_canvas {
        幅：400ピクセル;
        高さ：400ピクセル;
}

これは、ブートストラップV3.0.0に基づいて単純なプロジェクトを作成する方法です。しかし、我々は唯一の後の章では、より詳細に説明する、表面に触れています。

前：ブートストラップチュートリアル

次へ：3 CSSの概要ブートストラップ

Bootstrap コース

Bootstrap CSS

Bootstrap レイアウトコンポーネント

Bootstrap ウィジェット

Bootstrap 他の