Bootstrap 公式 Web サイトのコンポーネントは何ですか?-ブートストラップのチュートリアル-php.cn

Bootstrap 公式 Web サイトのコンポーネントは何ですか?

(*-*)浩

リリース： 2019-07-18 14:56:25

オリジナル

2556 人が閲覧しました

Bootstrap には豊富な Web コンポーネントが含まれており、これらのコンポーネントに基づいて、美しく完全に機能する Web サイトを迅速に構築できます。次のコンポーネントが含まれています:

ドロップダウンメニュー、ボタングループ、ボタンドロップダウンメニュー、ナビゲーション、ナビゲーションバー、パスナビゲーション、ページング、レイアウト、サムネイル、警告ダイアログ、進行状況バー、メディアオブジェクトなど

#デモされたコンポーネントの一部を次に示します。 (推奨学習:

Bootstrap ビデオチュートリアル )

ドロップダウン

ドロップダウンメニューは切り替え可能で、リスト形式のコンテキストメニューにリンクが表示されます。これは、Dropdown JavaScript プラグインと対話することで実現できます。

ドロップダウンメニューを使用する必要がある場合は、クラス .dropdown にドロップダウンメニューを追加するだけです。次の例は、基本的なドロップダウンメニューを示しています。

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>

ログイン後にコピー

Navigation

同じマークアップと基本クラス .nav を使用します。ブートストラップは、マークアップと状態を共有するためのヘルパークラスも提供します。変更されたクラスを変更すると、異なるスタイルに切り替えることができます。

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

ログイン後にコピー

Bootstrap に関連する技術的な記事については、

Bootstrap チュートリアル列にアクセスして学習してください。

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