}
.nav-collapse .nav > li > a:hover,
.nav-collapse .dropdown-menu a:hover {
- background-color: #222222;
+ background-color: #111111;
}
.nav-collapse.in .btn-group {
padding: 0;
float: none;
padding: 9px 15px;
margin: 9px 0;
- border-top: 1px solid #222222;
- border-bottom: 1px solid #222222;
+ border-top: 1px solid #111111;
+ border-bottom: 1px solid #111111;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
*zoom: 1;
- -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
- -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn:hover,
}
.btn-primary {
- background-color: #0074cc;
- *background-color: #0055cc;
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));
- background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
- background-image: -o-linear-gradient(top, #0088cc, #0055cc);
- background-image: linear-gradient(top, #0088cc, #0055cc);
- background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
+ background-color: #006dcc;
+ *background-color: #0044cc;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
+ background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
+ background-image: -o-linear-gradient(top, #0088cc, #0044cc);
+ background-image: linear-gradient(top, #0088cc, #0044cc);
+ background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-repeat: repeat-x;
- border-color: #0055cc #0055cc #003580;
+ border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
- filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0055cc', GradientType=0);
+ filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
- background-color: #0055cc;
- *background-color: #004ab3;
+ background-color: #0044cc;
+ *background-color: #003bb3;
}
.btn-primary:active,
.btn-primary.active {
- background-color: #004099 \9;
+ background-color: #003399 \9;
}
.btn-warning {
}
.btn-group.open .btn-primary.dropdown-toggle {
- background-color: #0055cc;
+ background-color: #0044cc;
}
.btn-group.open .btn-warning.dropdown-toggle {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
- background-color: #2c2c2c;
- background-image: -moz-linear-gradient(top, #333333, #222222);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
- background-image: -webkit-linear-gradient(top, #333333, #222222);
- background-image: -o-linear-gradient(top, #333333, #222222);
- background-image: linear-gradient(top, #333333, #222222);
+ background-color: #1b1b1b;
+ background-image: -moz-linear-gradient(top, #222222, #111111);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
+ background-image: -webkit-linear-gradient(top, #222222, #111111);
+ background-image: -o-linear-gradient(top, #222222, #111111);
+ background-image: linear-gradient(top, #222222, #111111);
background-repeat: repeat-x;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
- filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff333333', endColorstr='#ff222222', GradientType=0);
+ filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
font-weight: normal;
line-height: 1;
color: #ffffff;
- background-color: #626262;
- border: 1px solid #151515;
+ background-color: #515151;
+ border: 1px solid #040404;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
.navbar .nav .active > a:focus {
color: #ffffff;
text-decoration: none;
- background-color: #222222;
+ background-color: #111111;
}
.navbar .divider-vertical {
height: 40px;
margin: 0 9px;
overflow: hidden;
- background-color: #222222;
- border-right: 1px solid #333333;
+ background-color: #111111;
+ border-right: 1px solid #222222;
}
.navbar .nav.pull-right {
padding: 7px 10px;
margin-right: 5px;
margin-left: 5px;
- background-color: #1f1f1f;
- *background-color: #151515;
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#262626), to(#151515));
- background-image: -webkit-linear-gradient(top, #262626, #151515);
- background-image: -o-linear-gradient(top, #262626, #151515);
- background-image: linear-gradient(top, #262626, #151515);
- background-image: -moz-linear-gradient(top, #262626, #151515);
+ background-color: #0e0e0e;
+ *background-color: #040404;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404));
+ background-image: -webkit-linear-gradient(top, #151515, #040404);
+ background-image: -o-linear-gradient(top, #151515, #040404);
+ background-image: linear-gradient(top, #151515, #040404);
+ background-image: -moz-linear-gradient(top, #151515, #040404);
background-repeat: repeat-x;
- border-color: #151515 #151515 #000000;
+ border-color: #040404 #040404 #000000;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
- filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff262626', endColorstr='#ff151515', GradientType=0);
+ filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
.navbar .btn-navbar.active,
.navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] {
- background-color: #151515;
- *background-color: #080808;
+ background-color: #040404;
+ *background-color: #000000;
}
.navbar .btn-navbar:active,
.navbar-subnav .navbar-inner {
padding: 0;
- background-color: #f6f6f6;
- background-image: -moz-linear-gradient(top, #f9f9f9, #f1f1f1);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#f1f1f1));
- background-image: -webkit-linear-gradient(top, #f9f9f9, #f1f1f1);
- background-image: -o-linear-gradient(top, #f9f9f9, #f1f1f1);
- background-image: linear-gradient(top, #f9f9f9, #f1f1f1);
+ background-color: #f9f9f9;
+ background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f1f1f1));
+ background-image: -webkit-linear-gradient(top, #ffffff, #f1f1f1);
+ background-image: -o-linear-gradient(top, #ffffff, #f1f1f1);
+ background-image: linear-gradient(top, #ffffff, #f1f1f1);
background-repeat: repeat-x;
border: 1px solid #e5e5e5;
- filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff1f1f1', GradientType=0);
+ filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff1f1f1', GradientType=0);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
+.navbar-subnav .divider-vertical {
+ background-color: #f1f1f1;
+ border-right-color: #ffffff;
+}
+
.navbar-subnav .nav > li > a {
color: #0088cc;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
.navbar-subnav .nav > .active > a,
.navbar-subnav .nav > .active > a:hover {
color: #777;
- background-color: #e5e5e5;
+ background-color: #eee;
+ -webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5), 1px 0 0 rgba(255, 255, 255, 0.5);
+ -moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5), 1px 0 0 rgba(255, 255, 255, 0.5);
+ box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5), 1px 0 0 rgba(255, 255, 255, 0.5);
}
.navbar-subnav .nav li.dropdown .dropdown-toggle .caret,
/* Faded out hr */
hr.soften {
height: 1px;
- margin: 54px 0;
+ margin: 70px 0;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
/* Marketing section of Overview
-------------------------------------------------- */
-.marketing .row {
- margin-bottom: 9px;
+.marketing {
+ text-align: center;
}
.marketing h1 {
- margin: 40px 0 10px;
- font-size: 40px;
- font-weight: 300;
- text-align: center;
+ margin: 60px 0 10px;
+ font-size: 60px;
+ font-weight: 400;
+ line-height: 1;
+ letter-spacing: -1px;
}
.marketing h2 {
- font-weight: 300;
+ font-weight: 400;
+ letter-spacing: -1px;
}
.marketing p {
- margin: 5px 10px 15px 0;
-}
-.marketing .bs-icon {
- float: left;
- margin: 7px 10px 0 0;
- opacity: .8;
+ color: #555;
}
.marketing .marketing-byline {
- margin-bottom: 30px;
+ margin-bottom: 40px;
font-size: 20px;
font-weight: 300;
line-height: 25px;
color: #999;
- text-align: center;
+}
+.marketing img {
+ display: block;
+ margin: 0 auto 20px;
}
-------------------------------------------------- */
.footer {
- padding: 40px 0;
- margin-top: 49px;
+ padding: 70px 0;
+ margin-top: 70px;
border-top: 1px solid #e5e5e5;
}
.footer p {
/* Example sites showcase */
.example-sites {
- margin-left: 20px;
+ xmargin-left: 20px;
}
.example-sites img {
max-width: 100%;
-
-.navbar {
+.navbar-inner {
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
}
.jumbo {
padding: 100px 0;
- margin-top: -60px;
+ margin: -60px 0 60px;
background-color: #222;
color: #fff;
text-align: center;
- text-shadow: 0 1px 0 rgba(0,0,0,.1), 0 0 30px rgba(0,0,0,.075);
+ text-shadow: 0 1px 5px rgba(0,0,0,.25), 0 0 30px rgba(0,0,0,.075);
background: #c9cabc; /* Old browsers */
background: -moz-linear-gradient(-45deg, #c9cabc 0%, #68686d 100%); /* FF3.6+ */
background: linear-gradient(135deg, #c9cabc 0%,#68686d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', endColorstr='#68686d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+ background: #020031; /* Old browsers */
+ background: -moz-linear-gradient(45deg, #020031 0%, #803353 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#803353)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(45deg, #020031 0%,#803353 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(45deg, #020031 0%,#803353 100%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(45deg, #020031 0%,#803353 100%); /* IE10+ */
+ background: linear-gradient(45deg, #020031 0%,#803353 100%); /* W3C */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#803353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+
+ background: #020031; /* Old browsers */
+ background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* IE10+ */
+ background: linear-gradient(45deg, #020031 0%,#6d3353 100%); /* W3C */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+
xborder-bottom: 1px solid #68686d;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
}
.jumbo h1 {
font-size: 120px;
- font-weight: 200;
+ font-weight: ;
line-height: 1;
- margin: 0 0 5px;
+ margin: 0 0 10px;
letter-spacing: -2px;
}
.jumbo p {
line-height: 1.25;
}
.jumbo .btn {
- font-size: 20px;
+ font-size: 24px;
padding: 14px 24px;
- margin: 0 0 30px 0;
font-weight: 200;
- -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2);
- -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2);
- box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2);
+ border: 0;
+ -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
+ -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
+ box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
}
.jumbo .btn:active {
- -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25);
- -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25);
- box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25);
+ -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
+ -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
+ box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
+}
+.jumbo-links {
+ margin: 0;
+ list-style: none;
+}
+.jumbo-links li {
+ display: inline;
+ padding: 0 10px;
+ color: rgba(255,255,255,.25);
+}
+.jumbo-links a {
+ color: #fff;
+ color: rgba(255,255,255,.5);
}
+.jumbo-links a:hover {
+ color: #fff;
+}
+
@media (max-width: 480px) {
}
}
-
-
<div class="bs-docs-container">
<h1>Bootstrap</h1>
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
- <a href="assets/bootstrap.zip" class="btn btn-inverse btn-large">Download Bootstrap <small>(v2.1.0)</small></a>
+ <p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large">Download Bootstrap</a></p>
+ <ul class="jumbo-links">
+ <li><a href="#">Customize</a></li>
+ <li><a href="#">GitHub project</a></li>
+ <li>Version 2.1.0</li>
+ </ul>
</div>
</div>
</div>
</header>
-<hr class="soften">
-
<div class="marketing">
- <h1>Designed for everyone, everywhere.</h1>
+
+ <h1>Introducing Bootstrap.</h1>
<p class="marketing-byline">Need reasons to love Bootstrap? Look no further.</p>
- <div class="row">
- <div class="span5">
- <img class="bs-icon" src="assets/img/glyphicons/glyphicons_042_group.png">
- <h2>Built for and by nerds</h2>
- <p>We love building awesome products on the web just like you, so we made Bootstrap. No matter your skill level, use it as a complete kit or use to start something more complex.</p>
-
- <img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png">
- <h2>Cross-everything</h2>
- <p>Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.</p>
-
- <img class="bs-icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
- <h2>12-column grid</h2>
- <p>Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.</p>
-
- <img class="bs-icon" src="assets/img/glyphicons/glyphicons_214_resize_small.png">
- <h2>Responsive design</h2>
- <p>Beginning with Bootstrap 2, components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.</p>
+
+ <div class="row-fluid">
+ <div class="span4">
+ <img src="assets/img/bs-docs-twitter-github.png">
+ <h2>Built by nerds, for nerds.</h2>
+ <p>Built at Twitter by <a href="http://twitter.com/mdo">@mdo</a> and <a href="http://twitter.com/fat">@fat</a>, Bootstrap utilizes <a href="http://lesscss.org">LESS CSS</a>, is compiled via <a href="http://nodejs.org">Node</a>, and is managed through <a href="http://github.com">GitHub</a> to help nerds do awesome stuff on the web.</p>
</div>
- <div class="span5">
- <img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png">
+ <div class="span4">
+ <img src="assets/img/bs-docs-responsive-illustrations.png">
+ <h2>Designed for everyone.</h2>
+ <p>Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via <a href="./scaffolding.html#responsive">responsive CSS</a> as well.</p>
+ </div>
+ <div class="span4">
+ <img src="assets/img/bs-docs-bootstrap-features.png">
+ <h2>Packed with features.</h2>
+ <p>Utilize the 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">javascript plugins</a>, typography, form controls, and even a <a href="./download.html">web-based Customizer</a> to make Bootstrap your own.</p>
+ </div>
+ </div>
+
+<!-- <img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png">
<h2>Living, coded examples</h2>
<p>Bootstrap was designed first and foremost as a way to document not only the code of our components, but the visual and interaction design through live examples.</p>
<h2>Built on LESS</h2>
<p>Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.</p>
</div>
- </div><!--/row-->
+ </div>
+-->
<hr class="soften">
<h1>Built with Bootstrap.</h1>
<p class="marketing-byline">For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a> or <a href="./examples.html">browse the examples</a>.</p>
- <ul class="thumbnails example-sites">
- <li class="span3">
- <a class="thumbnail" href="http://soundready.fm/" target="_blank">
- <img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm">
- </a>
- </li>
- <li class="span3">
- <a class="thumbnail" href="http://kippt.com/" target="_blank">
- <img src="assets/img/example-sites/kippt.png" alt="Kippt">
- </a>
- </li>
- <li class="span3">
- <a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
- <img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
- </a>
- </li>
-<!-- <li class="span2">
- <a class="thumbnail" href="http://www.jshint.com/" target="_blank">
- <img src="assets/img/example-sites/jshint.png" alt="JS Hint">
- </a>
- </li>
- --> </ul>
+ <div class="row-fluid">
+ <ul class="thumbnails example-sites">
+ <li class="span3">
+ <a class="thumbnail" href="http://soundready.fm/" target="_blank">
+ <img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm">
+ </a>
+ </li>
+ <li class="span3">
+ <a class="thumbnail" href="http://kippt.com/" target="_blank">
+ <img src="assets/img/example-sites/kippt.png" alt="Kippt">
+ </a>
+ </li>
+ <li class="span3">
+ <a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
+ <img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
+ </a>
+ </li>
+ <li class="span3">
+ <a class="thumbnail" href="http://www.jshint.com/" target="_blank">
+ <img src="assets/img/example-sites/jshint.png" alt="JS Hint">
+ </a>
+ </li>
+ </ul>
+ </div>
</div><!-- /.marketing -->
<div class="bs-docs-container">
<h1>Bootstrap</h1>
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
- <a href="assets/bootstrap.zip" class="btn btn-inverse btn-large">{{_i}}Download Bootstrap <small>(v2.1.0)</small>{{/i}}</a>
+ <p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large">{{_i}}Download Bootstrap{{/i}}</a></p>
+ <ul class="jumbo-links">
+ <li><a href="#">Customize</a></li>
+ <li><a href="#">GitHub project</a></li>
+ <li>Version 2.1.0</li>
+ </ul>
</div>
</div>
</div>
</header>
-<hr class="soften">
-
<div class="marketing">
- <h1>{{_i}}Designed for everyone, everywhere.{{/i}}</h1>
- <p class="marketing-byline">{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}</p>
- <div class="row">
- <div class="span5">
- <img class="bs-icon" src="assets/img/glyphicons/glyphicons_042_group.png">
- <h2>{{_i}}Built for and by nerds{{/i}}</h2>
- <p>{{_i}}We love building awesome products on the web just like you, so we made Bootstrap. No matter your skill level, use it as a complete kit or use to start something more complex.{{/i}}</p>
-
- <img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png">
- <h2>{{_i}}Cross-everything{{/i}}</h2>
- <p>{{_i}}Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.{{/i}}</p>
- <img class="bs-icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
- <h2>{{_i}}12-column grid{{/i}}</h2>
- <p>{{_i}}Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.{{/i}}</p>
+ <h1>{{_i}}Introducing Bootstrap.{{/i}}</h1>
+ <p class="marketing-byline">{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}</p>
- <img class="bs-icon" src="assets/img/glyphicons/glyphicons_214_resize_small.png">
- <h2>{{_i}}Responsive design{{/i}}</h2>
- <p>{{_i}}Beginning with Bootstrap 2, components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.{{/i}}</p>
+ <div class="row-fluid">
+ <div class="span4">
+ <img src="assets/img/bs-docs-twitter-github.png">
+ <h2>{{_i}}Built by nerds, for nerds.{{/i}}</h2>
+ <p>{{_i}}Built at Twitter by <a href="http://twitter.com/mdo">@mdo</a> and <a href="http://twitter.com/fat">@fat</a>, Bootstrap utilizes <a href="http://lesscss.org">LESS CSS</a>, is compiled via <a href="http://nodejs.org">Node</a>, and is managed through <a href="http://github.com">GitHub</a> to help nerds do awesome stuff on the web.{{/i}}</p>
+ </div>
+ <div class="span4">
+ <img src="assets/img/bs-docs-responsive-illustrations.png">
+ <h2>{{_i}}Designed for everyone.{{/i}}</h2>
+ <p>{{_i}}Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via <a href="./scaffolding.html#responsive">responsive CSS</a> as well.{{/i}}</p>
</div>
- <div class="span5">
- <img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png">
+ <div class="span4">
+ <img src="assets/img/bs-docs-bootstrap-features.png">
+ <h2>{{_i}}Packed with features.{{/i}}</h2>
+ <p>{{_i}}Utilize the 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">javascript plugins</a>, typography, form controls, and even a <a href="./download.html">web-based Customizer</a> to make Bootstrap your own.{{/i}}</p>
+ </div>
+ </div>
+
+<!-- <img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png">
<h2>{{_i}}Living, coded examples{{/i}}</h2>
<p>{{_i}}Bootstrap was designed first and foremost as a way to document not only the code of our components, but the visual and interaction design through live examples.{{/i}}</p>
<h2>{{_i}}Built on LESS{{/i}}</h2>
<p>{{_i}}Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.{{/i}}</p>
</div>
- </div><!--/row-->
+ </div>
+-->
<hr class="soften">
<h1>{{_i}}Built with Bootstrap.{{/i}}</h1>
<p class="marketing-byline">{{_i}}For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a> or <a href="./examples.html">browse the examples</a>.{{/i}}</p>
- <ul class="thumbnails example-sites">
- <li class="span3">
- <a class="thumbnail" href="http://soundready.fm/" target="_blank">
- <img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm">
- </a>
- </li>
- <li class="span3">
- <a class="thumbnail" href="http://kippt.com/" target="_blank">
- <img src="assets/img/example-sites/kippt.png" alt="Kippt">
- </a>
- </li>
- <li class="span3">
- <a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
- <img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
- </a>
- </li>
-<!-- <li class="span2">
- <a class="thumbnail" href="http://www.jshint.com/" target="_blank">
- <img src="assets/img/example-sites/jshint.png" alt="JS Hint">
- </a>
- </li>
- --> </ul>
+ <div class="row-fluid">
+ <ul class="thumbnails example-sites">
+ <li class="span3">
+ <a class="thumbnail" href="http://soundready.fm/" target="_blank">
+ <img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm">
+ </a>
+ </li>
+ <li class="span3">
+ <a class="thumbnail" href="http://kippt.com/" target="_blank">
+ <img src="assets/img/example-sites/kippt.png" alt="Kippt">
+ </a>
+ </li>
+ <li class="span3">
+ <a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
+ <img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
+ </a>
+ </li>
+ <li class="span3">
+ <a class="thumbnail" href="http://www.jshint.com/" target="_blank">
+ <img src="assets/img/example-sites/jshint.png" alt="JS Hint">
+ </a>
+ </li>
+ </ul>
+ </div>
</div><!-- /.marketing -->
border-bottom-color: darken(@btnBorder, 10%);
.border-radius(4px);
.ie7-restore-left-whitespace(); // Give IE7 some love
- .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.05)");
+ .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.05)");
}
// Hover state
}
.navbar-subnav .navbar-inner {
padding: 0;
- #gradient > .vertical(#f9f9f9, #f1f1f1);
+ #gradient > .vertical(#ffffff, #f1f1f1);
.box-shadow(none);
border: 1px solid #e5e5e5;
}
+// Lighten vertical dividers
+.navbar-subnav .divider-vertical {
+ background-color: #f1f1f1;
+ border-right-color: #ffffff;
+}
+
+
// Change link colors back
.navbar-subnav .nav > li > a {
color: @linkColor;
.navbar-subnav .nav > .active > a,
.navbar-subnav .nav > .active > a:hover {
color: #777;
- background-color: #e5e5e5;
+ background-color: #eee;
+ -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
+ -moz-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
+ box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
}
// Dropdown carets
@btnBorder: #ccc;
@btnPrimaryBackground: @linkColor;
-@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%);
+@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@btnInfoBackground: #5bc0de;
@btnInfoBackgroundHighlight: #2f96b4;
// Navbar
// -------------------------
@navbarHeight: 40px;
-@navbarBackground: @grayDarker;
-@navbarBackgroundHighlight: @grayDark;
+@navbarBackground: #111;
+@navbarBackgroundHighlight: #222;
@navbarText: @grayLight;
@navbarLinkColor: @grayLight;
projects / thirdparty / bootstrap.git / commitdiff
