mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-25 06:21:26 +02:00
overhauled dropdowns now require use of .caret for dropdown arrow, redid the button group docs section, added the split button dropdown docs section
This commit is contained in:
Mark Otto
@@ -402,7 +402,8 @@ pre.prettyprint {
|
||||
}
|
||||
|
||||
/* Make tables spaced out a bit more */
|
||||
h2 + table {
|
||||
h2 + table,
|
||||
h2 + .row {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
@@ -1203,17 +1203,12 @@
|
||||
|
||||
<br>
|
||||
|
||||
<h2>Button groups <small>Join buttons for more toolbar-like functionality</small></h2>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Button groups</h2>
|
||||
<p>Use button groups to join multiple buttons together as one composite component. Just build them with a series of <code><a></code> or <code><button></code> elements. Button groups can also function as radios and checkboxes (see <a href="./javascript.html#buttons">the Javascript docs</a> for that).</p>
|
||||
<p>You can also combine sets of button groups into a toolbar for more complex projects.</p>
|
||||
<p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript »</a></p>
|
||||
<p class="muted">Heads up: CSS for button groups is in a separate file, button-groups.less.</p>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<h3>Linked button group</h3>
|
||||
<p>Using the standard <code><a class="btn" href="#">...</a></code> markup, simply add all the buttons you need.</p>
|
||||
<h3>Button groups</h3>
|
||||
<p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.</p>
|
||||
<p>You can also combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex projects.</p>
|
||||
<div class="well" style="padding: 10px; margin-bottom: 9px;">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">Left</a>
|
||||
@@ -1221,7 +1216,6 @@
|
||||
<a class="btn" href="#">Right</a>
|
||||
</div>
|
||||
</div>
|
||||
<p>Level up one more time by wrapping multiple instances of <code><div class="btn-group"></code> with <code><div class="btn-toolbar"></code>.</p>
|
||||
<div class="well" style="padding: 10px;">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
@@ -1229,24 +1223,132 @@
|
||||
<a class="btn" href="#">2</a>
|
||||
<a class="btn" href="#">3</a>
|
||||
<a class="btn" href="#">4</a>
|
||||
<a class="btn" href="#">5</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">5</a>
|
||||
<a class="btn" href="#">6</a>
|
||||
<a class="btn" href="#">7</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">8</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">9</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">10</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Example markup</h3>
|
||||
<p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">1</a>
|
||||
<a class="btn" href="#">2</a>
|
||||
<a class="btn" href="#">3</a>
|
||||
</div>
|
||||
</pre>
|
||||
<p>And with a toolbar for multiple groups:</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Checkbox and radio flavors</h3>
|
||||
<p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.</p>
|
||||
<p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript »</a></p>
|
||||
<hr>
|
||||
<h4 class="muted">Heads up</h4>
|
||||
<p class="muted">CSS for button groups is in a separate file, button-groups.less.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<h2>Button dropdowns <small>Built on button groups to provide contextual menus</small></h2>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3>Split button dropdowns</h3>
|
||||
<p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
|
||||
<div class="well" style="padding: 10px; margin-bottom: 9px;">
|
||||
<div class="btn-toolbar" style="margin-bottom: 9px;">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">Action</a>
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<a class="btn primary" href="#">Action</a>
|
||||
<a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<a class="btn danger" href="#">Danger</a>
|
||||
<a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group">
|
||||
<a class="btn success" href="#">Success</a>
|
||||
<a class="btn success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<a class="btn info" href="#">Info</a>
|
||||
<a class="btn info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
</div> <!-- /well -->
|
||||
</div>
|
||||
<div class="span8">
|
||||
<h3>Example markup</h3>
|
||||
<p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="btn-group">
|
||||
<a class="btn" href="#">Action</a>
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<!-- dropdown menu links -->
|
||||
</ul>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1454,5 +1556,11 @@
|
||||
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
<script src="../js/bootstrap-dropdown.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
$('.dropdown-toggle').dropdown();
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -274,7 +274,7 @@ $('#myModal').on('hidden', function () {
|
||||
<ul class="tabs">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li id="secondary" class="dropdown">
|
||||
<a href="#secondary" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
|
||||
<a href="#secondary" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Secondary link</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
@@ -302,7 +302,7 @@ $('#myModal').on('hidden', function () {
|
||||
</form>
|
||||
<ul class="nav secondary-nav">
|
||||
<li id="fat-menu" class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1</a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1 <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Secondary link</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
@@ -311,7 +311,7 @@ $('#myModal').on('hidden', function () {
|
||||
</ul>
|
||||
</li>
|
||||
<li id="mdo-menu" class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2</a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Secondary link</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
|
||||
@@ -107,6 +107,12 @@
|
||||
<li>Fluid examples redone. <code>.fluid-container</code> now requires a <code>.sidebar-left</code> or <code>.sidebar-right</code> as well. Fluid sidebar element has a new class, <code>.fluid-sidebar</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Dropdown menus
|
||||
<ul>
|
||||
<li>Updated the <code>.dropdown-menu</code> to tighten up spacing</li>
|
||||
<li>Now requires you to add a <code><span class="caret"></span></code> to show the dropdown arrow</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<!--
|
||||
<li>
|
||||
|
||||
Reference in New Issue
Block a user