With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outter <div>.
For a more durable component with less code, we've removed the differentiating look for block alerts, messages that com with more padding and typically more text. The class also has changed to .alert-block.
For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.
Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.
diff --git a/docs/javascript.html b/docs/javascript.html index 7f589de4c2..6a240c4d4b 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -240,7 +240,7 @@
<ul class="nav pills">
<li class="active"><a href="#">Regular link</a></li>
- <li class="dropdown">
+ <li class="dropdown" id="menu1">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
Dropdown
<b class="caret"></b>
</a>
- <ul id="menu1" class="dropdown-menu">
+ <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>
diff --git a/lib/breadcrumbs.less b/lib/breadcrumbs.less
index 2fa9921ac8..19b8081e1b 100644
--- a/lib/breadcrumbs.less
+++ b/lib/breadcrumbs.less
@@ -4,7 +4,7 @@
.breadcrumb {
padding: 7px 14px;
margin: 0 0 @baseLineHeight;
- #gradient > .vertical(#ffffff, #f5f5f5);
+ #gradient > .vertical(@white, #f5f5f5);
border: 1px solid #ddd;
.border-radius(3px);
.box-shadow(inset 0 1px 0 @white);
diff --git a/lib/button-groups.less b/lib/button-groups.less
index e9724ba8c2..253469f88a 100644
--- a/lib/button-groups.less
+++ b/lib/button-groups.less
@@ -110,7 +110,7 @@
.info,
.success {
.caret {
- border-top-color: #fff;
+ border-top-color: @white;
.opacity(75);
}
}
diff --git a/lib/buttons.less b/lib/buttons.less
index e53dce7af5..5da34a5257 100644
--- a/lib/buttons.less
+++ b/lib/buttons.less
@@ -34,9 +34,9 @@
padding: 5px 10px 6px;
font-size: @baseFontSize;
line-height: normal;
- color: #333;
+ color: @grayDark;
text-shadow: 0 1px 1px rgba(255,255,255,.75);
- #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
+ #gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
border: 1px solid #ccc;
border-bottom-color: #bbb;
.border-radius(4px);
diff --git a/lib/carousel.less b/lib/carousel.less
index a9399ef63c..1a18d44b6a 100644
--- a/lib/carousel.less
+++ b/lib/carousel.less
@@ -70,7 +70,7 @@
line-height: 30px;
color: #ccc;
text-align: center;
- background: #999;
+ background: @grayLight;
background: rgba(0,0,0,.5);
.border-radius(20px);
@@ -82,9 +82,9 @@
// Hover state
&:hover {
- color: #fff;
+ color: @white;
text-decoration: none;
- background: #333;
+ background: @grayDark;
background: rgba(0,0,0,.75);
}
}
@@ -98,10 +98,10 @@
right: 0;
bottom: 0;
padding: 10px 15px 5px;
- background: #333;
+ background: @grayDark;
background: rgba(0,0,0,.75);
}
.carousel-caption h4,
.carousel-caption p {
- color: #fff;
+ color: @white;
}
diff --git a/lib/dropdowns.less b/lib/dropdowns.less
index 08054713ce..40b4d7e875 100644
--- a/lib/dropdowns.less
+++ b/lib/dropdowns.less
@@ -14,7 +14,7 @@
vertical-align: top;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
- border-top: 4px solid #000;
+ border-top: 4px solid @black;
.opacity(30);
content: "\2193";
}
@@ -79,7 +79,7 @@
.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
- color: #fff;
+ color: @white;
text-decoration: none;
background-color: @linkColor;
}
diff --git a/lib/navbar.less b/lib/navbar.less
index 94bc652410..8064490f76 100644
--- a/lib/navbar.less
+++ b/lib/navbar.less
@@ -164,7 +164,7 @@
.navbar .nav .active > a {
color: @white;
text-decoration: none;
- background-color: #222;
+ background-color: @grayDarker;
background-color: rgba(0,0,0,.5);
}
@@ -174,7 +174,7 @@
width: 1px;
margin: 0 5px;
overflow: hidden;
- background-color: #222;
+ background-color: @grayDarker;
border-right: 1px solid #444;
}
@@ -209,7 +209,7 @@
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
- border-bottom: 6px solid #fff;
+ border-bottom: 6px solid @white;
position: absolute;
top: -6px;
left: 10px;
@@ -219,7 +219,7 @@
// Dropdown toggle caret
.navbar .nav .dropdown-toggle .caret,
.navbar .nav .open.dropdown .caret {
- border-top-color: #fff;
+ border-top-color: @white;
}
.navbar .nav .active .caret {
.opacity(100);
@@ -234,7 +234,7 @@
// Dropdown link on hover
.navbar .nav .active > .dropdown-toggle:hover {
- color: #fff;
+ color: @white;
}
// Right aligned menus need alt position
diff --git a/lib/navs.less b/lib/navs.less
index 432ab3cbd1..4db77af4f2 100644
--- a/lib/navs.less
+++ b/lib/navs.less
@@ -18,7 +18,7 @@
}
.nav > li > a:hover {
text-decoration: none;
- background-color: #eee;
+ background-color: @grayLighter;
}
@@ -97,7 +97,7 @@
border: 1px solid transparent;
.border-radius(4px 4px 0 0);
&:hover {
- border-color: #eee #eee #ddd;
+ border-color: @grayLighter @grayLighter #ddd;
}
}
// Active state, and it's :hover to override normal :hover
@@ -201,13 +201,13 @@
// -------------------------
.tabs .active .dropdown-toggle .caret,
.pills .active .dropdown-toggle .caret {
- border-top-color: #333;
+ border-top-color: @grayDark;
}
// Active:hover dropdown links
// -------------------------
.nav > .dropdown.active > a:hover {
- color: #000;
+ color: @black;
cursor: pointer;
}
@@ -216,20 +216,20 @@
.tabs .open .dropdown-toggle,
.pills .open .dropdown-toggle,
.nav > .open.active > a:hover {
- color: #fff;
- background-color: #999;
- border-color: #999;
+ color: @white;
+ background-color: @grayLight;
+ border-color: @grayLight;
}
.nav .open .caret,
.nav .open.active .caret,
.nav .open a:hover .caret {
- border-top-color: #fff;
+ border-top-color: @white;
.opacity(100);
}
// Dropdowns in stacked tabs
.tabs.stacked .open > a:hover {
- border-color: #999;
+ border-color: @grayLight;
}
@@ -312,7 +312,7 @@
.border-radius(4px 0 0 4px);
}
.tabs-left .tabs > li > a:hover {
- border-color: #eee #ddd #eee #eee;
+ border-color: @grayLighter #ddd @grayLighter @grayLighter;
}
.tabs-left .tabs .active > a,
.tabs-left .tabs .active > a:hover {
@@ -330,7 +330,7 @@
.border-radius(0 4px 4px 0);
}
.tabs-right .tabs > li > a:hover {
- border-color: #eee #eee #eee #ddd;
+ border-color: @grayLighter @grayLighter @grayLighter #ddd;
}
.tabs-right .tabs .active > a,
.tabs-right .tabs .active > a:hover {
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index a0d54a8865..7ad8a7b164 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -24,9 +24,9 @@ body {
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
.fluid-container {
position: relative;
- min-width: 940px;
- padding-left: 20px;
- padding-right: 20px;
+ min-width: @siteWidth;
+ padding-left: @gridGutterWidth;
+ padding-right: @gridGutterWidth;
.clearfix();
}
@@ -35,17 +35,17 @@ body {
width: @fluidSidebarWidth;
margin: 0 20px 18px;
}
-.sidebar-left { padding-left: @fluidSidebarWidth + 40; }
-.sidebar-right { padding-right: @fluidSidebarWidth + 40; }
+.sidebar-left { padding-left: @fluidSidebarWidth + @gridGutterWidth * 2; }
+.sidebar-right { padding-right: @fluidSidebarWidth + @gridGutterWidth * 2; }
// Float the sidebars accordingly
.sidebar-left .fluid-sidebar {
float: left;
- margin-left: (@fluidSidebarWidth + 20) * -1;
+ margin-left: (@fluidSidebarWidth + @gridGutterWidth) * -1;
}
.sidebar-right .fluid-sidebar {
float: right;
- margin-right: (@fluidSidebarWidth + 20) * -1;
+ margin-right: (@fluidSidebarWidth + @gridGutterWidth) * -1;
}
// The main content area
diff --git a/lib/tables.less b/lib/tables.less
index 5dad3e896f..14e4ea44a3 100644
--- a/lib/tables.less
+++ b/lib/tables.less
@@ -144,7 +144,7 @@ table {
margin-top: 7px;
border-width: 0 4px 4px;
border-style: solid;
- border-color: #000 transparent;
+ border-color: @black transparent;
visibility: hidden;
}
}
@@ -174,7 +174,7 @@ table {
border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
- border-top: 4px solid #000;
+ border-top: 4px solid @black;
visibility:visible;
.box-shadow(none); //can't add boxshadow to downward facing arrow :(
.opacity(60);
diff --git a/lib/tooltip.less b/lib/tooltip.less
index b21c6bb7a5..5111a193f0 100644
--- a/lib/tooltip.less
+++ b/lib/tooltip.less
@@ -22,7 +22,7 @@
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
- color: white;
+ color: @white;
text-align: center;
text-decoration: none;
background-color: @black;
diff --git a/lib/type.less b/lib/type.less
index 707d2215de..a94a4956ed 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -119,7 +119,7 @@ hr {
margin: @baseLineHeight 0;
border: 0;
border-top: 1px solid #e5e5e5;
- border-bottom: 1px solid #fff;
+ border-bottom: 1px solid @white;
}
// Emphasis
@@ -148,7 +148,7 @@ abbr {
blockquote {
padding-left: 15px;
margin-bottom: @baseLineHeight;
- border-left: 5px solid #eee;
+ border-left: 5px solid @grayLighter;
p {
margin-bottom: 0;
#font > .shorthand(16px,300,@baseLineHeight * 1.25);
@@ -168,7 +168,7 @@ blockquote {
padding-left: 0;
padding-right: 15px;
border-left: 0;
- border-right: 5px solid #eee;
+ border-right: 5px solid @grayLighter;
p,
small {
text-align: right;
diff --git a/lib/variables.less b/lib/variables.less
index 807a9ea0d5..0a67521dfc 100644
--- a/lib/variables.less
+++ b/lib/variables.less
@@ -13,6 +13,7 @@
// Grays
@black: #000;
+@grayDarker: #222;
@grayDark: #333;
@gray: #555;
@grayLight: #999;
@@ -65,7 +66,7 @@
// Navbar
@navBarHeight: 40px;
-@navbarBackground: #222;
-@navbarBackgroundHighlight: #333;
+@navbarBackground: @grayDarker;
+@navbarBackgroundHighlight: @grayDark;