Twitter Bootstrap：シンプルで強(qiáng)力なCSSフレームワークとJavaScriptコンポーネントの詳細(xì)な説明

Twitter Bootstrapは、CSSを理解していない開発者でさえ、基本的なテンプレートを簡単に構(gòu)築できます。しかし、それは初心者だけではなく、その強(qiáng)力なJavaScriptコンポーネントセットもデザイナーに人気があり、使いやすく、プロジェクトへの迅速な統(tǒng)合です。このチュートリアルでは、最高のTwitterブートストラップJavaScriptコンポーネントとそれらの使用方法に飛び込みます。

キーポイント：

• Twitter Bootstrap 3は、包括的なJavaScriptコンポーネントを備えた強(qiáng)力なCSSフレームワークであり、CSSを理解していなくても簡単にテンプレートを構(gòu)築できます。
• Bootstrap 3のJavaScriptコンポーネントは、Modal、Dropdown、Scrollspy、Tab、Tooltip、Popover、Alertなど、JQueryに基づいて記述されています。各コンポーネントには獨(dú)自の特定の機(jī)能があり、さまざまなプロジェクトのニーズに合わせてカスタマイズできます。
これらのJavaScriptコンポーネントを使用するには、getBootStrap.comからBootstrap 3をダウンロードする必要があります。また、Webブラウザー（推奨Google Chrome）とテキストエディター（Sublime Textなど）が必要です。 JavaScriptコンポーネントが適切に機(jī)能するようにするには、Bootstrap CSSを含める必要があります。
Bootstrap 3のJavaScriptコンポーネントは、それが非常に人気がある重要な理由の1つです。彼らは、設(shè)計効率を改善したいCSSやデザイナーを理解していない開発者に便利なソリューションを提供します。

使用：

最初に、getBootStrap.comからBootstrap 3をダウンロードし、Webブラウザー（できればGoogle Chrome）とテキストエディター（Sublime Textを使用している）を準(zhǔn)備する必要があります。 BootstrapのJavaScriptコンポーネントはjQueryに基づいて書かれているため、jQueryを使用する必要があります。 Bootstrap 3をダウンロードした後、フォルダーの內(nèi)容を新しいワークスペースにコピーします。 JavaScriptを?qū)W習(xí)するために、なぜCSSとフォントフォルダーが必要なのか疑問に思うかもしれません。多くのブートストラップJavaScriptコンポーネントは、適切に動作するためにCSSに依存しているため、Bootstrap CSSが含まれていなければ適切に機(jī)能しません。 Bootstrap 3を使用すると、すべてのJavaScriptコンポーネントをダウンロードせずに、各モジュールを個別に使用することもできます。このチュートリアルは、すべてのコンポーネントを含める代わりに、モジュールのみを使用する方法で終了します。このチュートリアルでは、次の主要なTwitterブートストラップJavaScriptコンポーネントを説明します。

distモーダル（モーダルボックス）

ドロップダウン（ドロップダウンメニュー）
scrollspy（scroll聴?。?li> タブ（タブ）
ツールチップ（ツールチップ）
ポップオーバー（ポップアップ）
アラート（警告ボックス）
6. 各コンポーネントを1つずつ説明し、カスタムブートストラップ3 JavaScriptコンポーネントを取得するためにいくつかの実験を行います。ここをクリックしてデモページを表示します。

モーダル（モーダルボックス）

モーダルボックスは、従來の警告ボックスに似ていますが、モーダルタイトル、モーダルボディ、モーダルフッター、クローズボタン、右上隅の近接シンボルなど、より強(qiáng)力です。支払い前やアカウントなどの削除など、確認(rèn)ウィンドウの多くのアプリケーションで使用できます。

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  啟動演示模態(tài)框
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">模態(tài)標(biāo)題</h4>
      </div>
      <div class="modal-body">
        <h1>Hello World!</h1>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

Bootstrap Modalには、タイトル、ボディ、フッターの3つの部分が含まれています。各セクションに何を配置するかを決定できます。

（後続のコンポーネントのドロップダウン、スクロールスピ、タブ、ツールチップ、ポップオーバー、説明とサンプル寫真については、元のテキストに従って追加して、畫像形式を変更しておきます）

結(jié)論

このチュートリアルを使用すると、Twitter BootstrapがjQueryコードを作成せずにJavaScriptコンポーネントの作成にどのように役立つかをよりよく理解する必要があります。これらのJavaScriptコンポーネントは、Twitter Bootstrapフレームワークが非常に人気がある主な理由の1つです。 CSSを理解していない開発者に適しているだけでなく、設(shè)計者が設(shè)計効率を改善するのにも役立ちます。 次の投稿では、Twitter Bootstrap 3のCarouselコンポーネントを使用してスライダーを作成する方法について説明します。ご不明な點(diǎn)がございましたら、コメントセクションにメッセージをお?dú)葺Xに殘してください。 Twitter Bootstrapを初めて使用する場合は、SitePointの著者ページにアクセスして、以前のTwitter Bootstrapチュートリアルを読んでください。

（元のテキストで提供されているFAQパーツは、必要に応じてオプションで擬似オリジナル化するか、直接保持することができます。）

以上がTwitter Bootstrap 3 - JavaScriptコンポーネントの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。