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 7f589de4c..6a240c4d4 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 2fa9921ac..19b8081e1 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 e9724ba8c..253469f88 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 e53dce7af..5da34a525 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 a9399ef63..1a18d44b6 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 08054713c..40b4d7e87 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 94bc65241..8064490f7 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 432ab3cbd..4db77af4f 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 a0d54a886..7ad8a7b16 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 5dad3e896..14e4ea44a 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 b21c6bb7a..5111a193f 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 707d2215d..a94a4956e 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 807a9ea0d..0a67521df 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;