From: Mark Otto Date: Wed, 22 Feb 2012 06:01:39 +0000 (-0800) Subject: Merge branch '2.0/fork/components/dropup' of https://github.com/buraktuyan/bootstrap... X-Git-Tag: v2.0.2~113 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=20221a67c2590e5d5d2d3a78dd79d61498e80661;p=thirdparty%2Fbootstrap.git Merge branch '2.0/fork/components/dropup' of https://github.com/buraktuyan/bootstrap into buraktuyan-2.0/fork/components/dropup Conflicts: docs/assets/css/bootstrap.css docs/components.html docs/templates/pages/components.mustache less/navbar.less --- 20221a67c2590e5d5d2d3a78dd79d61498e80661 diff --cc docs/assets/bootstrap.zip index 44fdb437ae,0000000000..dde638c05e mode 100644,000000..100644 Binary files differ diff --cc docs/assets/css/bootstrap.css index b90cb7635e,9cd0ec5f11..c9c2ee8919 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@@ -1825,10 -1560,14 +1825,9 @@@ table .span24 *border-right-width: 2px; *border-bottom-width: 2px; } --.dropdown-menu.bottom-up { -- top: auto; -- bottom: 100%; - margin-bottom: 2px; - margin-bottom: 1px; -} + .dropdown-menu.pull-right { + right: 0; + left: auto; } .dropdown-menu .divider { height: 1px; @@@ -1864,10 -1603,6 +1863,20 @@@ .dropdown.open .dropdown-menu { display: block; } +.pull-right .dropdown-menu { + left: auto; + right: 0; +} ++.dropup .caret { ++ border-top: 0; ++ border-bottom: 4px solid #000000; ++ content: "\2191"; ++} ++.dropup .dropdown-menu { ++ top: auto; ++ bottom: 100%; ++ margin-bottom: 1px; ++} .typeahead { margin-top: 2px; -webkit-border-radius: 4px; @@@ -2334,12 -1996,12 +2343,13 @@@ button.btn.btn-small, input[type="submi opacity: 1; filter: alpha(opacity=100); } -.primary .caret, -.danger .caret, -.info .caret, -.success .caret { +.btn-primary .caret, +.btn-danger .caret, +.btn-info .caret, +.btn-success .caret, +.btn-inverse .caret { border-top-color: #ffffff; + border-bottom-color: #ffffff; opacity: 0.75; filter: alpha(opacity=75); } @@@ -2549,15 -2206,18 +2559,18 @@@ -moz-border-radius: 4px; border-radius: 4px; } -.tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret { +.nav-tabs .dropdown-toggle .caret, .nav-pills .dropdown-toggle .caret { border-top-color: #0088cc; + border-bottom-color: #0088cc; margin-top: 6px; } -.tabs .dropdown-toggle:hover .caret, .pills .dropdown-toggle:hover .caret { +.nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret { border-top-color: #005580; + border-bottom-color: #005580; } -.tabs .active .dropdown-toggle .caret, .pills .active .dropdown-toggle .caret { +.nav-tabs .active .dropdown-toggle .caret, .nav-pills .active .dropdown-toggle .caret { border-top-color: #333333; + border-bottom-color: #333333; } .nav > .dropdown.active > a:hover { color: #000000; diff --cc docs/components.html index 9cfd261fff,d6347747a9..41129c304a --- a/docs/components.html +++ b/docs/components.html @@@ -188,16 -175,16 +188,17 @@@ ================================================== -->
-

Buttons dropdowns Contextual dropdown menus built on button groups

-

Button dropdowns and dropups Built on button groups to provide contextual dropdown menus

++

Button dropdown menus Built on button groups to provide contextual menus

+ ++

Button dropdowns

-

Button dropdowns

-

Split button dropdowns and dropups

-

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.

++

Overview and examples

+

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

- Action - + Action
-
-

Additionally, you can create dropup style split buttons. Simply add a second class, .bottom-up, after .caret and .dropdown-menu classes. Optionally, it's recommended to add a third .pull-right class to provide a better experience.

+
+
+

Heads up! Button dropdowns require the Bootstrap dropdown plugin to function.

+
+
+

Example markup

+

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.

+
 +<div class="btn-group">
 +  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
 +    Action
 +    <span class="caret"></span>
 +  </a>
 +  <ul class="dropdown-menu">
 +    <!-- dropdown menu links -->
 +  </ul>
 +</div>
 +
+
+ ++
++ Heads up! In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript. ++
+ ++

Split button dropdowns

+
+
-

Split button dropdowns

++

Overview and examples

+

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.

- Dropup - -
+
+
+ Success + + +
+
+ Info + + +
+
+ Inverse + + +
-
++
++

Right aligned menus

++

Add .pull-right to the .dropdown-menu of any button dropdown for right aligned menus.

++
++
++ Right ++ ++ ++
++
++
++<div class="btn-group">
++  ...
++  <ul class="dropdown-menu pull-right">
++    <!-- dropdown menu links -->
++  </ul>
++</div>
++

Example markup

@@@ -368,6 -291,9 +396,44 @@@ </ul> </div> -
- Heads up! In some cases (especially on mobile screens) the content of the dropdown or dropup menus will overflow the screen. You need to manually take care of this or use a custom JavaScript code to adjust the alignment of the menu. ++

Dropup menus

++

Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

++
++
++ Dropup ++ ++ ++
++
++ Right dropup ++ ++ ++
+
++
++<div class="btn-group dropup">
++  <a class="btn" href="#">Dropup</a>
++  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
++    <span class="caret"></span>
++  </a>
++  <ul class="dropdown-menu">
++    <!-- dropdown menu links -->
++  </ul>
++</div>
++
++
@@@ -472,9 -397,9 +538,9 @@@

Tabs with dropdowns

-

Pills with dropdowns

- +
  • + Dropup + +
    • ++
    ++ {{_i}}Heads up!{{/i}} {{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}} ++
    + ++

    {{_i}}Split button dropdowns{{/i}}

    +
    +
    -

    {{_i}}Split button dropdowns{{/i}}

    ++

    {{_i}}Overview and examples{{/i}}

    +

    {{_i}}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.{{/i}}

    - {{_i}}Dropup{{/i}} - -
    +
    +
    + {{_i}}Success{{/i}} + + +
    +
    + {{_i}}Info{{/i}} + + +
    +
    + {{_i}}Inverse{{/i}} + + +
    -
    ++
    ++

    {{_i}}Right aligned menus{{/i}}

    ++

    {{_i}}Add .pull-right to the .dropdown-menu of any button dropdown for right aligned menus.{{/i}}

    ++
    ++
    ++ {{_i}}Right{{/i}} ++ ++ ++
    ++
    ++
    ++<div class="btn-group">
++  ...
++  <ul class="dropdown-menu pull-right">
++    <!-- {{_i}}dropdown menu links{{/i}} -->
++  </ul>
++</div>
++

    {{_i}}Example markup{{/i}}

    @@@ -292,6 -219,9 +320,44 @@@ </ul> </div> -
    -+ {{_i}}Heads up!{{/i}} {{_i}}In some cases (especially on mobile screens) the content of the dropdown or dropup menus will overflow the screen. You need to manually take care of this or use a custom JavaScript code to adjust the alignment of the menu.{{_i}} -+
    ++

    {{_i}}Dropup menus{{/i}}

    ++

    {{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.{{/i}}

    ++
    ++
    ++ {{_i}}Dropup{{/i}} ++ ++ ++
    ++
    ++ {{_i}}Right dropup{{/i}} ++ ++ ++
    ++
    ++
    ++<div class="btn-group dropup">
++  <a class="btn" href="#">{{_i}}Dropup{{/i}}</a>
++  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
++    <span class="caret"></span>
++  </a>
++  <ul class="dropdown-menu">
++    <!-- {{_i}}dropdown menu links{{/i}} -->
++  </ul>
++</div>
++
    ++
    @@@ -396,9 -325,9 +462,9 @@@

    {{_i}}Tabs with dropdowns{{/i}}

    -

    {{_i}}Pills with dropdowns{{/i}}

    - +
  • + {{_i}}Dropup{{/i}} + +