diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 146023c5df..58ef3d5ee8 100644
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 155f5dad13..472a3fa31c 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1612,7 +1612,7 @@ table .span12 {
}
.dropdown-menu .divider {
height: 1px;
- margin: 5px 1px;
+ margin: 8px 1px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
@@ -2217,6 +2217,15 @@ button.btn.small, input[type="submit"].btn.small {
.nav-list [class^="icon-"] {
margin-right: 2px;
}
+.nav-list .divider {
+ height: 1px;
+ margin: 8px 1px;
+ overflow: hidden;
+ background-color: #e5e5e5;
+ border-bottom: 1px solid #ffffff;
+ *width: 100%;
+ *margin: -5px 0 5px;
+}
.nav-tabs, .nav-pills {
*zoom: 1;
}
diff --git a/docs/components.html b/docs/components.html
index 895d62f756..046bd72804 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -542,8 +542,18 @@
Application-style navigation
Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.
Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.
+
With icons
Nav lists are also easy to equip with icons. Add the proper <i> tag with class and you're set.
+ Horizontal dividers
+ Add a horizontal divider by creating an empty list item with the class .divider, like so:
+
+<ul class="nav nav-list">
+ ...
+ <li class="divider"></li>
+ ...
+</ul>
+
@@ -587,6 +598,7 @@
Profile
Settings
+
Help
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index dcf5212a89..a8aaeeff5f 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -466,8 +466,18 @@
{{_i}}Application-style navigation{{/i}}
{{_i}}Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.{{/i}}
{{_i}}Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.{{/i}}
+
{{_i}}With icons{{/i}}
{{_i}}Nav lists are also easy to equip with icons. Add the proper <i> tag with class and you're set.{{/i}}
+ {{_i}}Horizontal dividers{{/i}}
+ {{_i}}Add a horizontal divider by creating an empty list item with the class .divider, like so:{{/i}}
+
+<ul class="nav nav-list">
+ ...
+ <li class="divider"></li>
+ ...
+</ul>
+
@@ -511,6 +522,7 @@
{{_i}}Profile{{/i}}
{{_i}}Settings{{/i}}
+
{{_i}}Help{{/i}}
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 88a7462c46..fa46e288b1 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -71,18 +71,7 @@
// Dividers (basically an hr) within the dropdown
.divider {
- height: 1px;
- margin: 5px 1px;
- overflow: hidden;
- background-color: #e5e5e5;
- border-bottom: 1px solid @white;
-
- // IE7 needs a set width since we gave a height. Restricting just
- // to IE7 to keep the 1px left/right space in other browsers.
- // It is unclear where IE is getting the extra space that we need
- // to negative-margin away, but so it goes.
- *width: 100%;
- *margin: -5px 0 5px;
+ .nav-divider();
}
// Links within the dropdown menu
diff --git a/less/mixins.less b/less/mixins.less
index 0d9436e2fc..e05667fff2 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -527,8 +527,30 @@
}
-// Mixin for generating button backgrounds
-// ---------------------------------------
+
+// COMPONENT MIXINS
+// --------------------------------------------------
+
+// NAV DIVIDER
+// -------------------------
+// Dividers (basically an hr) within dropdowns and nav lists
+.nav-divider() {
+ height: 1px;
+ margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
+ overflow: hidden;
+ background-color: #e5e5e5;
+ border-bottom: 1px solid @white;
+
+ // IE7 needs a set width since we gave a height. Restricting just
+ // to IE7 to keep the 1px left/right space in other browsers.
+ // It is unclear where IE is getting the extra space that we need
+ // to negative-margin away, but so it goes.
+ *width: 100%;
+ *margin: -5px 0 5px;
+}
+
+// BUTTON BACKGROUNDS
+// ------------------
.buttonBackground(@startColor, @endColor) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
.gradientBar(@startColor, @endColor);
@@ -546,10 +568,6 @@
}
}
-
-// COMPONENT MIXINS
-// --------------------------------------------------
-
// POPOVER ARROWS
// -------------------------
// For tipsies and popovers
diff --git a/less/navs.less b/less/navs.less
index 06219fa62d..1325bb15a3 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -64,6 +64,10 @@
.nav-list [class^="icon-"] {
margin-right: 2px;
}
+// Dividers (basically an hr) within the dropdown
+.nav-list .divider {
+ .nav-divider();
+}