Twitter Bootstrap 3 - JavaScriptコンポーネント-jsチュートリアル-php.cn

Twitter Bootstrap 3 - JavaScriptコンポーネント

尊渡假赌尊渡假赌尊渡假赌

リリース： 2025-02-22 08:59:09

オリジナル

780 人が閲覧しました

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

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

キーポイント：

Twitter Bootstrap 3は、包括的なJavaScriptコンポーネントを備えた強力なCSSフレームワークであり、CSSを理解していなくても簡単にテンプレートを構築できます。
Bootstrap 3のJavaScriptコンポーネントは、Modal、Dropdown、Scrollspy、Tab、Tooltip、Popover、Alertなど、JQueryに基づいて記述されています。各コンポーネントには独自の特定の機能があり、さまざまなプロジェクトのニーズに合わせてカスタマイズできます。

使用：

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

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

各コンポーネントを1つずつ説明し、カスタムブートストラップ3 JavaScriptコンポーネントを取得するためにいくつかの実験を行います。ここをクリックしてデモページを表示します。

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

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

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  启动演示模态框
</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">模态标题</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">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

ログイン後にコピー

Twitter Bootstrap 3 – JavaScript Components

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

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

結論

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

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

以上がTwitter Bootstrap 3 - JavaScriptコンポーネントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。