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 7f589de4..6a240c4d 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 2fa9921a..19b8081e 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 e9724ba8..253469f8 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 e53dce7a..5da34a52 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 a9399ef6..1a18d44b 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 08054713..40b4d7e8 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 94bc6524..8064490f 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 432ab3cb..4db77af4 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 a0d54a88..7ad8a7b1 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 5dad3e89..14e4ea44 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 b21c6bb7..5111a193 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 707d2215..a94a4956 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 807a9ea0..0a67521d 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;