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

   1 <div class="bs-docs-section">
   2   <h1 id="btn-groups" class="page-header">Button groups</h1>
   3
   4   <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="../javascript/#buttons">our buttons plugin</a>.</p>
   5
   6   <div class="bs-callout bs-callout-warning" id="callout-btn-group-tooltips">
   7     <h4>Tooltips &amp; popovers in button groups require special setting</h4>
   8     <p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
   9   </div>
  10
  11   <div class="bs-callout bs-callout-warning" id="callout-btn-group-accessibility">
  12     <h4>Ensure correct <code>role</code> and provide a label</h4>
  13     <p>In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate <code>role</code> attribute needs to be provided. For button groups, this would be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.</p>
  14     <p>One exception are groups which only contain a single control (for instance the <a href="#btn-groups-justified">justified button groups</a> with <code>&lt;button&gt;</code> elements) or a dropdown.</p>
  15     <p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct <code>role</code> attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p>
  16   </div>
  17
  18   <h2 id="btn-groups-single">Basic example</h2>
  19   <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
  20   <div class="bs-example" data-example-id="simple-button-group">
  21     <div class="btn-group" role="group" aria-label="Basic example">
  22       <button type="button" class="btn btn-default">Left</button>
  23       <button type="button" class="btn btn-default">Middle</button>
  24       <button type="button" class="btn btn-default">Right</button>
  25     </div>
  26   </div>
  27 {% highlight html %}
  28 <div class="btn-group" role="group" aria-label="...">
  29   <button type="button" class="btn btn-default">Left</button>
  30   <button type="button" class="btn btn-default">Middle</button>
  31   <button type="button" class="btn btn-default">Right</button>
  32 </div>
  33 {% endhighlight %}
  34
  35   <h2 id="btn-groups-toolbar">Button toolbar</h2>
  36   <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
  37   <div class="bs-example" data-example-id="simple-button-toolbar">
  38     <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  39       <div class="btn-group" role="group" aria-label="First group">
  40         <button type="button" class="btn btn-default">1</button>
  41         <button type="button" class="btn btn-default">2</button>
  42         <button type="button" class="btn btn-default">3</button>
  43         <button type="button" class="btn btn-default">4</button>
  44       </div>
  45       <div class="btn-group" role="group" aria-label="Second group">
  46         <button type="button" class="btn btn-default">5</button>
  47         <button type="button" class="btn btn-default">6</button>
  48         <button type="button" class="btn btn-default">7</button>
  49       </div>
  50       <div class="btn-group" role="group" aria-label="Third group">
  51         <button type="button" class="btn btn-default">8</button>
  52       </div>
  53     </div>
  54   </div>
  55 {% highlight html %}
  56 <div class="btn-toolbar" role="toolbar" aria-label="...">
  57   <div class="btn-group" role="group" aria-label="...">...</div>
  58   <div class="btn-group" role="group" aria-label="...">...</div>
  59   <div class="btn-group" role="group" aria-label="...">...</div>
  60 </div>
  61 {% endhighlight %}
  62
  63   <h2 id="btn-groups-sizing">Sizing</h2>
  64   <p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to each <code>.btn-group</code>, including when nesting multiple groups.</p>
  65   <div class="bs-example" data-example-id="button-group-sizing">
  66     <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
  67       <button type="button" class="btn btn-default">Left</button>
  68       <button type="button" class="btn btn-default">Middle</button>
  69       <button type="button" class="btn btn-default">Right</button>
  70     </div>
  71     <br>
  72     <div class="btn-group" role="group" aria-label="Default button group">
  73       <button type="button" class="btn btn-default">Left</button>
  74       <button type="button" class="btn btn-default">Middle</button>
  75       <button type="button" class="btn btn-default">Right</button>
  76     </div>
  77     <br>
  78     <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
  79       <button type="button" class="btn btn-default">Left</button>
  80       <button type="button" class="btn btn-default">Middle</button>
  81       <button type="button" class="btn btn-default">Right</button>
  82     </div>
  83     <br>
  84     <div class="btn-group btn-group-xs" role="group" aria-label="Extra-small button group">
  85       <button type="button" class="btn btn-default">Left</button>
  86       <button type="button" class="btn btn-default">Middle</button>
  87       <button type="button" class="btn btn-default">Right</button>
  88     </div>
  89   </div>
  90 {% highlight html %}
  91 <div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
  92 <div class="btn-group" role="group" aria-label="...">...</div>
  93 <div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
  94 <div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
  95 {% endhighlight %}
  96
  97   <h2 id="btn-groups-nested">Nesting</h2>
  98   <p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
  99   <div class="bs-example" data-example-id="button-group-nesting">
 100     <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
 101       <button type="button" class="btn btn-default">1</button>
 102       <button type="button" class="btn btn-default">2</button>
 103
 104       <div class="btn-group" role="group">
 105         <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 106           Dropdown
 107           <span class="caret"></span>
 108         </button>
 109         <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
 110           <li><a href="#">Dropdown link</a></li>
 111           <li><a href="#">Dropdown link</a></li>
 112         </ul>
 113       </div>
 114     </div>
 115   </div>
 116 {% highlight html %}
 117 <div class="btn-group" role="group" aria-label="...">
 118   <button type="button" class="btn btn-default">1</button>
 119   <button type="button" class="btn btn-default">2</button>
 120
 121   <div class="btn-group" role="group">
 122     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 123       Dropdown
 124       <span class="caret"></span>
 125     </button>
 126     <ul class="dropdown-menu" role="menu">
 127       <li><a href="#">Dropdown link</a></li>
 128       <li><a href="#">Dropdown link</a></li>
 129     </ul>
 130   </div>
 131 </div>
 132 {% endhighlight %}
 133
 134   <h2 id="btn-groups-vertical">Vertical variation</h2>
 135   <p>Make a set of buttons appear vertically stacked rather than horizontally. <strong class="text-danger">Split button dropdowns are not supported here.</strong></p>
 136   <div class="bs-example" data-example-id="vertical-button-group">
 137     <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
 138       <button type="button" class="btn btn-default">Button</button>
 139       <button type="button" class="btn btn-default">Button</button>
 140       <div class="btn-group" role="group">
 141         <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 142           Dropdown
 143           <span class="caret"></span>
 144         </button>
 145         <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
 146           <li><a href="#">Dropdown link</a></li>
 147           <li><a href="#">Dropdown link</a></li>
 148         </ul>
 149       </div>
 150       <button type="button" class="btn btn-default">Button</button>
 151       <button type="button" class="btn btn-default">Button</button>
 152       <div class="btn-group" role="group">
 153         <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 154           Dropdown
 155           <span class="caret"></span>
 156         </button>
 157         <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
 158           <li><a href="#">Dropdown link</a></li>
 159           <li><a href="#">Dropdown link</a></li>
 160         </ul>
 161       </div>
 162       <div class="btn-group" role="group">
 163         <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 164           Dropdown
 165           <span class="caret"></span>
 166         </button>
 167         <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
 168           <li><a href="#">Dropdown link</a></li>
 169           <li><a href="#">Dropdown link</a></li>
 170         </ul>
 171       </div>
 172       <div class="btn-group" role="group">
 173         <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 174           Dropdown
 175           <span class="caret"></span>
 176         </button>
 177         <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
 178           <li><a href="#">Dropdown link</a></li>
 179           <li><a href="#">Dropdown link</a></li>
 180         </ul>
 181       </div>
 182     </div>
 183   </div>
 184 {% highlight html %}
 185 <div class="btn-group-vertical" role="group" aria-label="...">
 186   ...
 187 </div>
 188 {% endhighlight %}
 189
 190   <h2 id="btn-groups-justified">Justified button groups</h2>
 191   <p>Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.</p>
 192
 193   <div class="bs-callout bs-callout-warning" id="callout-btn-group-justified-dbl-border">
 194     <h4>Handling borders</h4>
 195     <p>Due to the specific HTML and CSS used to justify buttons (namely <code>display: table-cell</code>), the borders between them are doubled. In regular button groups, <code>margin-left: -1px</code> is used to stack the borders instead of removing them. However, <code>margin</code> doesn't work with <code>display: table-cell</code>. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.</p>
 196   </div>
 197   <div class="bs-callout bs-callout-warning" id="callout-btn-group-ie8-border">
 198     <h4>IE8 and borders</h4>
 199     <p>Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p>
 200     <p>See <a href="https://github.com/twbs/bootstrap/issues/12476">#12476</a> for more information.</p>
 201   </div>
 202
 203   <h4>With <code>&lt;a&gt;</code> elements</h4>
 204   <p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>
 205   <div class="bs-example" data-example-id="simple-justified-button-group">
 206     <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
 207       <a href="#" class="btn btn-default" role="button">Left</a>
 208       <a href="#" class="btn btn-default" role="button">Middle</a>
 209       <a href="#" class="btn btn-default" role="button">Right</a>
 210     </div>
 211     <br>
 212     <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">
 213       <a href="#" class="btn btn-default" role="button">Left</a>
 214       <a href="#" class="btn btn-default" role="button">Middle</a>
 215       <div class="btn-group" role="group">
 216         <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
 217           Dropdown <span class="caret"></span>
 218         </a>
 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>
 227     </div>
 228   </div>
 229 {% highlight html %}
 230 <div class="btn-group btn-group-justified" role="group" aria-label="...">
 231   ...
 232 </div>
 233 {% endhighlight %}
 234
 235   <div class="bs-callout bs-callout-warning" id="callout-btn-group-anchor-btn">
 236     <h4>Links acting as buttons</h4>
 237     <p>If the <code>&lt;a&gt;</code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
 238   </div>
 239
 240   <h4>With <code>&lt;button&gt;</code> elements</h4>
 241   <p>To use justified button groups with <code>&lt;button&gt;</code> elements, <strong class="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code>&lt;button&gt;</code> elements, but since we support button dropdowns, we can work around that.</p>
 242   <div class="bs-example" data-example-id="button-tag-button-group-justified">
 243     <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
 244       <div class="btn-group" role="group">
 245         <button type="button" class="btn btn-default">Left</button>
 246       </div>
 247       <div class="btn-group" role="group">
 248         <button type="button" class="btn btn-default">Middle</button>
 249       </div>
 250       <div class="btn-group" role="group">
 251         <button type="button" class="btn btn-default">Right</button>
 252       </div>
 253     </div>
 254   </div>
 255 {% highlight html %}
 256 <div class="btn-group btn-group-justified" role="group" aria-label="...">
 257   <div class="btn-group" role="group">
 258     <button type="button" class="btn btn-default">Left</button>
 259   </div>
 260   <div class="btn-group" role="group">
 261     <button type="button" class="btn btn-default">Middle</button>
 262   </div>
 263   <div class="btn-group" role="group">
 264     <button type="button" class="btn btn-default">Right</button>
 265   </div>
 266 </div>
 267 {% endhighlight %}
 268 </div>