From 918a17a30bbaed3f7d8c80a30b7766b95e636dff Mon Sep 17 00:00:00 2001 From: Burak Tuyan Date: Mon, 30 Jan 2012 00:50:47 +0200 Subject: [PATCH 1/8] Adding dropup support to split buttons and navbar * Documents the hidden .dropdown-menu.bottom-up option (to be used for dropups) * Extends the .bottom-up class to carets and all relevant caret styles * Adds .dropdown-menu.pull-right class for right-aligned dropdowns and dropups * Adds examples and some information to the "split dropdown" and "navbar" sections of the Docs --- docs/assets/css/bootstrap.css | 33 ++++++++++-- docs/components.html | 67 ++++++++++++++++++++++-- docs/templates/pages/components.mustache | 67 ++++++++++++++++++++++-- less/button-groups.less | 1 + less/dropdowns.less | 16 +++++- less/navbar.less | 20 ++++++- less/navs.less | 1 + 7 files changed, 190 insertions(+), 15 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index c96818a5642b..e2b419af7850 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1517,6 +1517,11 @@ table .span12 { filter: alpha(opacity=30); content: "\2193"; } +.caret.bottom-up { + border-top: 0; + border-bottom: 4px solid #000000; + content: "\2191"; +} .dropdown .caret { margin-top: 8px; margin-left: 2px; @@ -1558,7 +1563,11 @@ table .span12 { .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; @@ -1992,6 +2001,7 @@ button.btn.small, input[type="submit"].btn.small { .info .caret, .success .caret { border-top-color: #ffffff; + border-bottom-color: #ffffff; opacity: 0.75; filter: alpha(opacity=75); } @@ -2217,6 +2227,7 @@ button.btn.small, input[type="submit"].btn.small { } .nav .open .caret, .nav .open.active .caret, .nav .open a:hover .caret { border-top-color: #ffffff; + border-bottom-color: #ffffff; opacity: 1; filter: alpha(opacity=100); } @@ -2554,8 +2565,22 @@ button.btn.small, input[type="submit"].btn.small { top: -6px; left: 10px; } +.navbar .dropdown-menu.bottom-up:before { + border-top: 7px solid #ccc; + border-top-color: rgba(0, 0, 0, 0.2); + border-bottom: 0; + bottom: -7px; + top: auto; +} +.navbar .dropdown-menu.bottom-up:after { + border-top: 6px solid #ffffff; + border-bottom: 0; + bottom: -6px; + top: auto; +} .navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret { border-top-color: #ffffff; + border-bottom-color: #ffffff; } .navbar .nav .active .caret { opacity: 1; @@ -2567,15 +2592,15 @@ button.btn.small, input[type="submit"].btn.small { .navbar .nav .active > .dropdown-toggle:hover { color: #ffffff; } -.navbar .nav.pull-right .dropdown-menu { +.navbar .nav.pull-right .dropdown-menu, .navbar .nav .dropdown-menu.pull-right { left: auto; right: 0; } -.navbar .nav.pull-right .dropdown-menu:before { +.navbar .nav.pull-right .dropdown-menu:before, .navbar .nav .dropdown-menu.pull-right:before { left: auto; right: 12px; } -.navbar .nav.pull-right .dropdown-menu:after { +.navbar .nav.pull-right .dropdown-menu:after, .navbar .nav .dropdown-menu.pull-right:after { left: auto; right: 13px; } diff --git a/docs/components.html b/docs/components.html index 63a4b3dd08dd..f8b65b3ae695 100644 --- a/docs/components.html +++ b/docs/components.html @@ -175,11 +175,11 @@

Heads up

================================================== -->
-

Split 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.

@@ -239,6 +239,42 @@

Split button dropdowns

  • Separated link
  • + +
    +

    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.

    +
    @@ -255,6 +291,9 @@

    Example markup

    </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. +
    @@ -684,6 +723,16 @@

    Static navbar example

  • Separated link
  • +