POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/components/navs.html

   1 <div class="bs-docs-section">
   2   <h1 id="nav" class="page-header">Navs</h1>
   3
   4   <p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
   5
   6   <div class="bs-callout bs-callout-info" id="callout-navs-tabs-plugin">
   7     <h4>Using navs for tab panels requires JavaScript tabs plugin</h4>
   8     <p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>. The markup will also require additional <code>role</code> and ARIA attributes – see the plugin's <a href="../javascript/#tabs-usage">example markup</a> for further details.</p>
   9   </div>
  10
  11   <div class="bs-callout bs-callout-warning" id="callout-navs-accessibility">
  12     <h4>Make navs used as navigation accessible</h4>
  13     <p>If you are using navs to provide a navigation bar, be sure to add a <code>role="navigation"</code> to the most logical parent container of the <code>&lt;ul&gt;</code>, or wrap a <code>&lt;nav&gt;</code> element around the whole navigation. Do not add the role to the <code>&lt;ul&gt;</code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p>
  14   </div>
  15
  16   <h2 id="nav-tabs">Tabs</h2>
  17   <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
  18   <div class="bs-example" data-example-id="simple-nav-tabs">
  19     <ul class="nav nav-tabs">
  20       <li role="presentation" class="active"><a href="#">Home</a></li>
  21       <li role="presentation"><a href="#">Profile</a></li>
  22       <li role="presentation"><a href="#">Messages</a></li>
  23     </ul>
  24   </div>
  25 {% highlight html %}
  26 <ul class="nav nav-tabs">
  27   <li role="presentation" class="active"><a href="#">Home</a></li>
  28   <li role="presentation"><a href="#">Profile</a></li>
  29   <li role="presentation"><a href="#">Messages</a></li>
  30 </ul>
  31 {% endhighlight %}
  32
  33
  34   <h2 id="nav-pills">Pills</h2>
  35   <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
  36   <div class="bs-example" data-example-id="simple-nav-pills">
  37     <ul class="nav nav-pills">
  38       <li role="presentation" class="active"><a href="#">Home</a></li>
  39       <li role="presentation"><a href="#">Profile</a></li>
  40       <li role="presentation"><a href="#">Messages</a></li>
  41     </ul>
  42   </div>
  43 {% highlight html %}
  44 <ul class="nav nav-pills">
  45   <li role="presentation" class="active"><a href="#">Home</a></li>
  46   <li role="presentation"><a href="#">Profile</a></li>
  47   <li role="presentation"><a href="#">Messages</a></li>
  48 </ul>
  49 {% endhighlight %}
  50   <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
  51   <div class="bs-example" data-example-id="simple-nav-stacked">
  52     <ul class="nav nav-pills nav-stacked nav-pills-stacked-example">
  53       <li role="presentation" class="active"><a href="#">Home</a></li>
  54       <li role="presentation"><a href="#">Profile</a></li>
  55       <li role="presentation"><a href="#">Messages</a></li>
  56     </ul>
  57   </div>
  58 {% highlight html %}
  59 <ul class="nav nav-pills nav-stacked">
  60   ...
  61 </ul>
  62 {% endhighlight %}
  63
  64
  65   <h2 id="nav-justified">Justified</h2>
  66   <p>Easily make tabs or pills equal widths of their parent at screens wider than 768px with <code>.nav-justified</code>. On smaller screens, the nav links are stacked.</p>
  67   <p><strong class="text-danger">Justified navbar nav links are currently not supported.</strong></p>
  68   <div class="bs-callout bs-callout-warning" id="callout-navs-justified-safari">
  69     <h4>Safari and responsive justified navs</h4>
  70     <p>As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
  71   </div>
  72   <div class="bs-example" data-example-id="simple-nav-justified">
  73     <ul class="nav nav-tabs nav-justified">
  74       <li role="presentation" class="active"><a href="#">Home</a></li>
  75       <li role="presentation"><a href="#">Profile</a></li>
  76       <li role="presentation"><a href="#">Messages</a></li>
  77     </ul>
  78     <br>
  79     <ul class="nav nav-pills nav-justified">
  80       <li role="presentation" class="active"><a href="#">Home</a></li>
  81       <li role="presentation"><a href="#">Profile</a></li>
  82       <li role="presentation"><a href="#">Messages</a></li>
  83     </ul>
  84   </div>
  85 {% highlight html %}
  86 <ul class="nav nav-tabs nav-justified">
  87   ...
  88 </ul>
  89 <ul class="nav nav-pills nav-justified">
  90   ...
  91 </ul>
  92 {% endhighlight %}
  93
  94
  95   <h2 id="nav-disabled-links">Disabled links</h2>
  96   <p>For any nav component (tabs or pills), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>.</p>
  97
  98   <div class="bs-callout bs-callout-warning" id="callout-navs-anchor-disabled">
  99     <h4>Link functionality not impacted</h4>
 100     <p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p>
 101   </div>
 102
 103   <div class="bs-example" data-example-id="disabled-nav-link">
 104     <ul class="nav nav-pills">
 105       <li role="presentation"><a href="#">Clickable link</a></li>
 106       <li role="presentation"><a href="#">Clickable link</a></li>
 107       <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
 108     </ul>
 109   </div>
 110 {% highlight html %}
 111 <ul class="nav nav-pills">
 112   ...
 113   <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
 114   ...
 115 </ul>
 116 {% endhighlight %}
 117
 118
 119   <h2 id="nav-dropdowns">Using dropdowns</h2>
 120   <p>Add dropdown menus with a little extra HTML and the <a href="../javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p>
 121
 122   <h3>Tabs with dropdowns</h3>
 123   <div class="bs-example" data-example-id="nav-tabs-with-dropdown">
 124     <ul class="nav nav-tabs">
 125       <li role="presentation" class="active"><a href="#">Home</a></li>
 126       <li role="presentation"><a href="#">Help</a></li>
 127       <li role="presentation" class="dropdown">
 128         <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
 129           Dropdown <span class="caret"></span>
 130         </a>
 131         <ul class="dropdown-menu" role="menu">
 132           <li><a href="#">Action</a></li>
 133           <li><a href="#">Another action</a></li>
 134           <li><a href="#">Something else here</a></li>
 135           <li class="divider"></li>
 136           <li><a href="#">Separated link</a></li>
 137         </ul>
 138       </li>
 139     </ul>
 140   </div>
 141 {% highlight html %}
 142 <ul class="nav nav-tabs">
 143   ...
 144   <li role="presentation" class="dropdown">
 145     <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
 146       Dropdown <span class="caret"></span>
 147     </a>
 148     <ul class="dropdown-menu" role="menu">
 149       ...
 150     </ul>
 151   </li>
 152   ...
 153 </ul>
 154 {% endhighlight %}
 155
 156   <h3>Pills with dropdowns</h3>
 157   <div class="bs-example" data-example-id="nav-pills-with-dropdown">
 158     <ul class="nav nav-pills">
 159       <li role="presentation" class="active"><a href="#">Home</a></li>
 160       <li role="presentation"><a href="#">Help</a></li>
 161       <li role="presentation" class="dropdown">
 162         <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
 163           Dropdown <span class="caret"></span>
 164         </a>
 165         <ul class="dropdown-menu" role="menu">
 166           <li><a href="#">Action</a></li>
 167           <li><a href="#">Another action</a></li>
 168           <li><a href="#">Something else here</a></li>
 169           <li class="divider"></li>
 170           <li><a href="#">Separated link</a></li>
 171         </ul>
 172       </li>
 173     </ul>
 174   </div><!-- /example -->
 175 {% highlight html %}
 176 <ul class="nav nav-pills">
 177   ...
 178   <li role="presentation" class="dropdown">
 179     <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
 180       Dropdown <span class="caret"></span>
 181     </a>
 182     <ul class="dropdown-menu" role="menu">
 183       ...
 184     </ul>
 185   </li>
 186   ...
 187 </ul>
 188 {% endhighlight %}
 189 </div>