diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 146023c5d..58ef3d5ee 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 155f5dad1..472a3fa31 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 895d62f75..046bd7280 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 dcf5212a8..a8aaeeff5 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 88a7462c4..fa46e288b 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 0d9436e2f..e05667fff 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 06219fa62..1325bb15a 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();
+}