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

   1 <div class="bs-docs-section">
   2   <h1 id="btn-dropdowns" class="page-header">Button dropdowns</h1>
   3
   4   <p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
   5
   6   <div class="bs-callout bs-callout-danger" id="callout-btndropdown-dependency">
   7     <h4>Plugin dependency</h4>
   8     <p>Button dropdowns require the <a href="../javascript/#dropdowns">dropdown plugin</a> to be included in your version of Bootstrap.</p>
   9   </div>
  10
  11   <h2 id="btn-dropdowns-single">Single button dropdowns</h2>
  12   <p>Turn a button into a dropdown toggle with some basic markup changes.</p>
  13   <div class="bs-example" data-example-id="single-button-dropdown">
  14     <div class="btn-group">
  15       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default <span class="caret"></span></button>
  16       <ul class="dropdown-menu" role="menu">
  17         <li><a href="#">Action</a></li>
  18         <li><a href="#">Another action</a></li>
  19         <li><a href="#">Something else here</a></li>
  20         <li class="divider"></li>
  21         <li><a href="#">Separated link</a></li>
  22       </ul>
  23     </div><!-- /btn-group -->
  24     <div class="btn-group">
  25       <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary <span class="caret"></span></button>
  26       <ul class="dropdown-menu" role="menu">
  27         <li><a href="#">Action</a></li>
  28         <li><a href="#">Another action</a></li>
  29         <li><a href="#">Something else here</a></li>
  30         <li class="divider"></li>
  31         <li><a href="#">Separated link</a></li>
  32       </ul>
  33     </div><!-- /btn-group -->
  34     <div class="btn-group">
  35       <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success <span class="caret"></span></button>
  36       <ul class="dropdown-menu" role="menu">
  37         <li><a href="#">Action</a></li>
  38         <li><a href="#">Another action</a></li>
  39         <li><a href="#">Something else here</a></li>
  40         <li class="divider"></li>
  41         <li><a href="#">Separated link</a></li>
  42       </ul>
  43     </div><!-- /btn-group -->
  44     <div class="btn-group">
  45       <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info <span class="caret"></span></button>
  46       <ul class="dropdown-menu" role="menu">
  47         <li><a href="#">Action</a></li>
  48         <li><a href="#">Another action</a></li>
  49         <li><a href="#">Something else here</a></li>
  50         <li class="divider"></li>
  51         <li><a href="#">Separated link</a></li>
  52       </ul>
  53     </div><!-- /btn-group -->
  54     <div class="btn-group">
  55       <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning <span class="caret"></span></button>
  56       <ul class="dropdown-menu" role="menu">
  57         <li><a href="#">Action</a></li>
  58         <li><a href="#">Another action</a></li>
  59         <li><a href="#">Something else here</a></li>
  60         <li class="divider"></li>
  61         <li><a href="#">Separated link</a></li>
  62       </ul>
  63     </div><!-- /btn-group -->
  64     <div class="btn-group">
  65       <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger <span class="caret"></span></button>
  66       <ul class="dropdown-menu" role="menu">
  67         <li><a href="#">Action</a></li>
  68         <li><a href="#">Another action</a></li>
  69         <li><a href="#">Something else here</a></li>
  70         <li class="divider"></li>
  71         <li><a href="#">Separated link</a></li>
  72       </ul>
  73     </div><!-- /btn-group -->
  74   </div>
  75 {% highlight html %}
  76 <!-- Single button -->
  77 <div class="btn-group">
  78   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
  79     Action <span class="caret"></span>
  80   </button>
  81   <ul class="dropdown-menu" role="menu">
  82     <li><a href="#">Action</a></li>
  83     <li><a href="#">Another action</a></li>
  84     <li><a href="#">Something else here</a></li>
  85     <li class="divider"></li>
  86     <li><a href="#">Separated link</a></li>
  87   </ul>
  88 </div>
  89 {% endhighlight %}
  90
  91   <h2 id="btn-dropdowns-split">Split button dropdowns</h2>
  92   <p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p>
  93   <div class="bs-example" data-example-id="split-button-dropdown">
  94     <div class="btn-group">
  95       <button type="button" class="btn btn-default">Default</button>
  96       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
  97         <span class="caret"></span>
  98         <span class="sr-only">Toggle Dropdown</span>
  99       </button>
 100       <ul class="dropdown-menu" role="menu">
 101         <li><a href="#">Action</a></li>
 102         <li><a href="#">Another action</a></li>
 103         <li><a href="#">Something else here</a></li>
 104         <li class="divider"></li>
 105         <li><a href="#">Separated link</a></li>
 106       </ul>
 107     </div><!-- /btn-group -->
 108     <div class="btn-group">
 109       <button type="button" class="btn btn-primary">Primary</button>
 110       <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 111         <span class="caret"></span>
 112         <span class="sr-only">Toggle Dropdown</span>
 113       </button>
 114       <ul class="dropdown-menu" role="menu">
 115         <li><a href="#">Action</a></li>
 116         <li><a href="#">Another action</a></li>
 117         <li><a href="#">Something else here</a></li>
 118         <li class="divider"></li>
 119         <li><a href="#">Separated link</a></li>
 120       </ul>
 121     </div><!-- /btn-group -->
 122     <div class="btn-group">
 123       <button type="button" class="btn btn-success">Success</button>
 124       <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 125         <span class="caret"></span>
 126         <span class="sr-only">Toggle Dropdown</span>
 127       </button>
 128       <ul class="dropdown-menu" role="menu">
 129         <li><a href="#">Action</a></li>
 130         <li><a href="#">Another action</a></li>
 131         <li><a href="#">Something else here</a></li>
 132         <li class="divider"></li>
 133         <li><a href="#">Separated link</a></li>
 134       </ul>
 135     </div><!-- /btn-group -->
 136     <div class="btn-group">
 137       <button type="button" class="btn btn-info">Info</button>
 138       <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 139         <span class="caret"></span>
 140         <span class="sr-only">Toggle Dropdown</span>
 141       </button>
 142       <ul class="dropdown-menu" role="menu">
 143         <li><a href="#">Action</a></li>
 144         <li><a href="#">Another action</a></li>
 145         <li><a href="#">Something else here</a></li>
 146         <li class="divider"></li>
 147         <li><a href="#">Separated link</a></li>
 148       </ul>
 149     </div><!-- /btn-group -->
 150     <div class="btn-group">
 151       <button type="button" class="btn btn-warning">Warning</button>
 152       <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 153         <span class="caret"></span>
 154         <span class="sr-only">Toggle Dropdown</span>
 155       </button>
 156       <ul class="dropdown-menu" role="menu">
 157         <li><a href="#">Action</a></li>
 158         <li><a href="#">Another action</a></li>
 159         <li><a href="#">Something else here</a></li>
 160         <li class="divider"></li>
 161         <li><a href="#">Separated link</a></li>
 162       </ul>
 163     </div><!-- /btn-group -->
 164     <div class="btn-group">
 165       <button type="button" class="btn btn-danger">Danger</button>
 166       <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 167         <span class="caret"></span>
 168         <span class="sr-only">Toggle Dropdown</span>
 169       </button>
 170       <ul class="dropdown-menu" role="menu">
 171         <li><a href="#">Action</a></li>
 172         <li><a href="#">Another action</a></li>
 173         <li><a href="#">Something else here</a></li>
 174         <li class="divider"></li>
 175         <li><a href="#">Separated link</a></li>
 176       </ul>
 177     </div><!-- /btn-group -->
 178   </div>
 179 {% highlight html %}
 180 <!-- Split button -->
 181 <div class="btn-group">
 182   <button type="button" class="btn btn-danger">Action</button>
 183   <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 184     <span class="caret"></span>
 185     <span class="sr-only">Toggle Dropdown</span>
 186   </button>
 187   <ul class="dropdown-menu" role="menu">
 188     <li><a href="#">Action</a></li>
 189     <li><a href="#">Another action</a></li>
 190     <li><a href="#">Something else here</a></li>
 191     <li class="divider"></li>
 192     <li><a href="#">Separated link</a></li>
 193   </ul>
 194 </div>
 195 {% endhighlight %}
 196
 197   <h2 id="btn-dropdowns-sizing">Sizing</h2>
 198   <p>Button dropdowns work with buttons of all sizes.</p>
 199   <div class="bs-example" data-example-id="button-dropdown-sizing">
 200     <div class="btn-toolbar" role="toolbar">
 201       <div class="btn-group">
 202         <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
 203           Large button <span class="caret"></span>
 204         </button>
 205         <ul class="dropdown-menu" role="menu">
 206           <li><a href="#">Action</a></li>
 207           <li><a href="#">Another action</a></li>
 208           <li><a href="#">Something else here</a></li>
 209           <li class="divider"></li>
 210           <li><a href="#">Separated link</a></li>
 211         </ul>
 212       </div><!-- /btn-group -->
 213     </div><!-- /btn-toolbar -->
 214     <div class="btn-toolbar" role="toolbar">
 215       <div class="btn-group">
 216         <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
 217           Small button <span class="caret"></span>
 218         </button>
 219         <ul class="dropdown-menu" role="menu">
 220           <li><a href="#">Action</a></li>
 221           <li><a href="#">Another action</a></li>
 222           <li><a href="#">Something else here</a></li>
 223           <li class="divider"></li>
 224           <li><a href="#">Separated link</a></li>
 225         </ul>
 226       </div><!-- /btn-group -->
 227     </div><!-- /btn-toolbar -->
 228     <div class="btn-toolbar" role="toolbar">
 229       <div class="btn-group">
 230         <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
 231           Extra small button <span class="caret"></span>
 232         </button>
 233         <ul class="dropdown-menu" role="menu">
 234           <li><a href="#">Action</a></li>
 235           <li><a href="#">Another action</a></li>
 236           <li><a href="#">Something else here</a></li>
 237           <li class="divider"></li>
 238           <li><a href="#">Separated link</a></li>
 239         </ul>
 240       </div><!-- /btn-group -->
 241     </div><!-- /btn-toolbar -->
 242   </div><!-- /example -->
 243 {% highlight html %}
 244 <!-- Large button group -->
 245 <div class="btn-group">
 246   <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
 247     Large button <span class="caret"></span>
 248   </button>
 249   <ul class="dropdown-menu" role="menu">
 250     ...
 251   </ul>
 252 </div>
 253
 254 <!-- Small button group -->
 255 <div class="btn-group">
 256   <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
 257     Small button <span class="caret"></span>
 258   </button>
 259   <ul class="dropdown-menu" role="menu">
 260     ...
 261   </ul>
 262 </div>
 263
 264 <!-- Extra small button group -->
 265 <div class="btn-group">
 266   <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
 267     Extra small button <span class="caret"></span>
 268   </button>
 269   <ul class="dropdown-menu" role="menu">
 270     ...
 271   </ul>
 272 </div>
 273 {% endhighlight %}
 274
 275   <h2 id="btn-dropdowns-dropup">Dropup variation</h2>
 276   <p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p>
 277   <div class="bs-example" data-example-id="button-dropdown-dropup">
 278     <div class="btn-toolbar" role="toolbar">
 279       <div class="btn-group dropup">
 280         <button type="button" class="btn btn-default">Dropup</button>
 281         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 282           <span class="caret"></span>
 283           <span class="sr-only">Toggle Dropdown</span>
 284         </button>
 285         <ul class="dropdown-menu" role="menu">
 286           <li><a href="#">Action</a></li>
 287           <li><a href="#">Another action</a></li>
 288           <li><a href="#">Something else here</a></li>
 289           <li class="divider"></li>
 290           <li><a href="#">Separated link</a></li>
 291         </ul>
 292       </div><!-- /btn-group -->
 293       <div class="btn-group dropup">
 294         <button type="button" class="btn btn-primary">Right dropup</button>
 295         <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 296           <span class="caret"></span>
 297           <span class="sr-only">Toggle Dropdown</span>
 298         </button>
 299         <ul class="dropdown-menu dropdown-menu-right" role="menu">
 300           <li><a href="#">Action</a></li>
 301           <li><a href="#">Another action</a></li>
 302           <li><a href="#">Something else here</a></li>
 303           <li class="divider"></li>
 304           <li><a href="#">Separated link</a></li>
 305         </ul>
 306       </div><!-- /btn-group -->
 307     </div>
 308   </div><!-- /example -->
 309 {% highlight html %}
 310 <div class="btn-group dropup">
 311   <button type="button" class="btn btn-default">Dropup</button>
 312   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 313     <span class="caret"></span>
 314     <span class="sr-only">Toggle Dropdown</span>
 315   </button>
 316   <ul class="dropdown-menu" role="menu">
 317     <!-- Dropdown menu links -->
 318   </ul>
 319 </div>
 320 {% endhighlight %}
 321 </div>