Bootstrap-navigation-elements

提供：Dev Guides
移動先:案内、検索

ブートストラップ-ナビゲーション要素

ブートストラップには、ナビゲーション要素のスタイル設定のためのいくつかの異なるオプションがあります。 それらはすべて同じマークアップと基本クラス .nav を共有します。 Bootstrapは、マークアップと状態を共有するためのヘルパークラスも提供します。 修飾子クラスを交換して、各スタイルを切り替えます。

表形式のナビゲーションまたはタブ

タブ付きナビゲーションメニューを作成するには-

  • 基本クラスが .nav の基本的な順序なしリストから始めます
  • クラス .nav-tabs を追加します。

次の例はこれを示しています- 

<p>Tabs Example</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>

丸薬ナビゲーション

基本的な薬

タブを丸薬にするには、上記と同じ手順に従い、。nav-tabs *の代わりにクラス *.nav-pills を使用します。

次の例はこれを示しています- 

<p>Pills Example</p>

<ul class = "nav nav-pills">
   <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>

縦の丸薬

クラス .nav-stacked とクラス- .nav、.nav-pills を使用して、丸薬を垂直に積み重ねることができます。

次の例はこれを示しています- 

<p>Vertical Pills Example</p>

<ul class = "nav nav-pills nav-stacked">
   <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>

正当化されたナビゲーション

クラス .nav-justified と .nav、.nav-tabs または .nav、.nav-pills をそれぞれ使用して、768pxよりも広い画面で親と同じ幅のタブまたはピルを作成できます。 小さい画面では、ナビゲーションリンクが積み重ねられます。

次の例はこれを示しています- 

<p>Justified Nav Elements Example</p>

<ul class = "nav nav-pills nav-justified">
   <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>

<br>
<br>
<br>

<ul class = "nav nav-tabs nav-justified">
   <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>

無効なリンク

*.nav* クラスごとに、*。disabled *クラスを追加すると、次の例に示すように*：hover *状態も無効にする灰色のリンクが作成されます-
<p>Disabled Link Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>

   <li class = "disabled"><a href = "#">iOS(disabled link)</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

<br>
<br>

<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 class = "disabled"><a href = "#">VB.Net(disabled link)</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

'_このクラスは<a>の外観のみを変更し、機能は変更しません。 ここでリンクを無効にするには、カスタムJavaScriptを使用します。_

ドロップダウン

ナビゲーションメニューは、ドロップダウンメニューと同様の構文を共有します。 デフォルトでは、いくつかのデータ属性と連携して機能するアンカーを持つリストアイテムがあり、*。dropdown-menu *クラスで順序付けられていないリストをトリガーします。

ドロップダウン付きのタブ

タブにドロップダウンを追加するには-

  • 基本クラスが .nav の基本的な順序なしリストから始めます
  • クラス .nav-tabs を追加します。
  • ここで、*。dropdown-menu *クラスを使用して順序付けられていないリストを追加します。
<p>Tabs With Dropdown Example</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 class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java
         <span class = "caret"></span>
      </a>

      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>

   </li>

   <li><a href = "#">PHP</a></li>
</ul>

ドロップダウン付きの丸薬

ピルでも同じことを行うには、次の例に示すように、。nav-tabs *クラスを *.nav-pills と交換します。 

<p>Pills With Dropdown Example</p>

<ul class = "nav nav-pills">
   <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 class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java <span class = "caret"></span>
      </a>

      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>

         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>

   </li>

   <li><a href = "#">PHP</a></li>
</ul>
「https://www.finddevguides.com/index.php?title=Bootstrap-navigation-elements&oldid=7335」から取得
Powered by MediaWiki