diff --git a/_includes/footer.html b/_includes/footer.html
index 7f9f8f103b0d754bf5e5a62c5fabe6b62b63240f..3b0105bdd468f8f194f0f64a152aaee6c862a720 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,3 +1,27 @@
+<!-- Footer
+================================================== -->
+<footer class="bs-footer" role="contentinfo">
+ <div class="container">
+ {% include social-buttons.html %}
+
+ <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
+ <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+ <ul class="footer-links muted">
+ <li>Currently v{{ site.current_version }}</li>
+ <li>·</li>
+ <li><a href="{{ page.base_url }}2.3.2/">v2.3.2 docs</a></li>
+ <li>·</li>
+ <li><a href="{{ page.base_url }}about/">About</a></li>
+ <li>·</li>
+ <li><a href="{{ site.blog }}">Blog</a></li>
+ <li>·</li>
+ <li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
+ <li>·</li>
+ <li><a href="{{ site.repo }}/releases">Releases</a></li>
+ </ul>
+ </div>
+</footer>
+
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
diff --git a/_includes/nav-main.html b/_includes/nav-main.html
index 5e8faeac3f7dd82b45e232caa83c53959bfd8179..a216164c2d6cbd05a956cb4b51cc2ed819ba3c79 100644
--- a/_includes/nav-main.html
+++ b/_includes/nav-main.html
@@ -27,6 +27,11 @@
<a href="{{ page.base_url }}customize">Customize</a>
</li>
</ul>
+ <ul class="nav navbar-nav navbar-right">
+ <li><a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'Expo']);">Expo</a></li>
+ <li><a href="{{ site.blog }}" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'Blog']);">Blog</a></li>
+ <li><a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'GitHub']);">GitHub</a></li>
+ </ul>
</nav>
</div>
</header>
diff --git a/_layouts/default.html b/_layouts/default.html
index 5863008dd2008a9624339c37ae6303f5f59ca73a..f35d6935c0ade29bbb22ff348fe77717b2829b01 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -21,6 +21,9 @@
<div class="container bs-docs-container">
<div class="row">
+ <div class="col-md-9" role="main">
+ {{ content }}
+ </div>
<div class="col-md-3">
<div class="bs-sidebar hidden-print" role="complementary">
<ul class="nav bs-sidenav">
@@ -40,37 +43,10 @@
</ul>
</div>
</div>
- <div class="col-md-9" role="main">
- {{ content }}
- </div>
</div>
</div>
- <!-- Footer
- ================================================== -->
- <footer class="bs-footer" role="contentinfo">
- <div class="container">
- {% include social-buttons.html %}
-
- <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
- <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
- <ul class="footer-links muted">
- <li>Currently v{{ site.current_version }}</li>
- <li>·</li>
- <li><a href="{{ page.base_url }}2.3.2/">v2.3.2 docs</a></li>
- <li>·</li>
- <li><a href="{{ page.base_url }}about/">About</a></li>
- <li>·</li>
- <li><a href="{{ site.blog }}">Blog</a></li>
- <li>·</li>
- <li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
- <li>·</li>
- <li><a href="{{ site.repo }}/releases">Releases</a></li>
- </ul>
- </div>
- </footer>
-
<!-- JS and analytics only. -->
{% include footer.html %}
diff --git a/_layouts/home.html b/_layouts/home.html
index ec472e7a54a876156cb3aaab1d763ad548366061..96e399d20dcadec8b2827da426e45b0fb68a83a4 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -13,33 +13,6 @@
<!-- Page content of course! -->
{{ content }}
- <footer class="container" role="contentinfo">
- {% include ads.html %}
-
- {% include social-buttons.html %}
-
- <ul class="bs-masthead-links">
- <li class="current-version">
- Currently v{{ site.current_version }}
- </li>
- <li>
- <a href="{{ page.base_url }}2.3.2/">v2.3.2 docs</a>
- </li>
- <li>
- <a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
- </li>
- <li>
- <a href="{{ page.base_url }}about/" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'About']);">About</a>
- </li>
- <li>
- <a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Expo</a>
- </li>
- <li>
- <a href="{{ site.blog }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Blog']);">Blog</a>
- </li>
- </ul>
- </footer>
-
<!-- JS and analytics only. -->
{% include footer.html %}
diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index e495d474461dbbad4e48aa2dea2cd22cff589fa0..3f03db9cf07c9eb2219d6ae8d6e09de9864f5fed 100644
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@@ -79,6 +79,29 @@ body {
border-color: #fff;
}
+/* Bootstrap "B" icon */
+.bs-booticon {
+ display: block;
+ font-weight: 500;
+ color: #fff;
+ background-color: #563d7c;
+ border-radius: 15%;
+ cursor: default;
+ text-align: center;
+}
+.bs-booticon-sm {
+ width: 30px;
+ height: 30px;
+ font-size: 20px;
+ line-height: 28px;
+}
+.bs-booticon-lg {
+ width: 144px;
+ height: 144px;
+ font-size: 108px;
+ line-height: 140px;
+}
+
/*
* Main navigation
@@ -88,7 +111,8 @@ body {
.bs-docs-nav {
background-color: #fff;
- border-color: #eee;
+ border-color: #e5e5e5;
+ box-shadow: 0 0 5px rgba(0,0,0,.05);
}
.bs-docs-nav .navbar-brand,
.bs-docs-nav .navbar-nav > li > a {
@@ -197,7 +221,6 @@ body {
*/
.bs-docs-home {
- padding-top: 120px;
background-color: #f9f9f9;
}
@@ -206,15 +229,20 @@ body {
position: relative;
padding: 30px 15px;
text-align: center;
+ border-bottom: 1px solid #e5e5e5;
+}
+.bs-masthead .bs-booticon {
+ margin: 0 auto 30px;
}
.bs-masthead h1 {
- display: none;
+ font-size: 60px;
+ font-weight: 300;
line-height: 1;
- color: #563d7c;
}
.bs-masthead .lead {
- font-size: 20px;
margin-bottom: 30px;
+ font-size: 20px;
+ color: #555;
}
.bs-masthead .btn-outline {
width: 100%;
@@ -226,47 +254,6 @@ body {
margin-top: 10px;
}
-.bs-booticon {
- display: block;
- margin: -40px auto 30px;
- width: 144px;
- height: 144px;
- font-size: 108px;
- font-weight: 500;
- color: #563d7c;
- line-height: 140px;
- border: 1px solid #563d7c;
- border-radius: 15%;
- cursor: default;
-}
-
-/* Links to project-level content like the repo, Expo, etc */
-.bs-masthead-links {
- margin-top: 20px;
- margin-bottom: 40px;
- padding-left: 0;
- list-style: none;
- text-align: center;
-}
-.bs-masthead-links li {
- display: inline-block;
- color: #777;
- padding: 0 10px;
-}
-
-.bs-masthead .popover {
- max-width: 260px;
- margin-top: -15px;
- border-radius: 9px;
- box-shadow: 0 4px 12px rgba(0,0,0,.25);
-}
-.bs-masthead .popover-content {
- padding: 15px;
- font-size: 16px;
- font-weight: 300;
- text-align: center;
-}
-
@media (min-width: 480px) {
.bs-masthead .btn-outline {
width: auto;
@@ -274,6 +261,10 @@ body {
}
@media (min-width: 768px) {
+ .bs-masthead {
+ padding-top: 80px;
+ padding-bottom: 80px;
+ }
.bs-masthead .lead {
font-size: 24px;
}
@@ -288,10 +279,6 @@ body {
.bs-masthead .btn-outline {
padding: 18px 24px;
}
- .bs-masthead-links {
- padding: 0;
- text-align: left;
- }
}
@@ -399,7 +386,7 @@ body {
border-width: 1px !important;
}
.bs-docs-home .carbonad {
- margin: 0 auto 40px !important;
+ margin: 0 auto !important;
}
}
@@ -408,7 +395,7 @@ body {
margin: 0 !important;
}
.bs-docs-home .carbonad {
- margin: 0 auto 40px !important;
+ margin: 0 auto !important;
}
}
@@ -425,17 +412,56 @@ body {
}
}
-@media (min-width: 768px) {
- .bs-docs-home .bs-social {
- margin-bottom: 10px;
- }
- .bs-docs-home .bs-masthead-links {
- margin-top: 10px;
- }
- .bs-docs-home .bs-social,
- .bs-docs-home .bs-masthead-links {
- text-align: center;
- }
+
+/*
+ * Homepage featurettes
+ *
+ * Reasons to use Bootstrap, entries from the Expo, and more.
+ */
+
+.bs-featurette {
+ padding-top: 100px;
+ padding-bottom: 100px;
+ font-size: 16px;
+ line-height: 1.5;
+ color: #555;
+ text-align: center;
+ background-color: #fff;
+ border-bottom: 1px solid #e5e5e5;
+}
+.bs-featurette + .bs-footer {
+ margin-top: 0;
+ border-top: 0;
+}
+
+.bs-featurette-title {
+ font-size: 40px;
+ font-weight: normal;
+ color: #333;
+ margin-bottom: 5px;
+}
+.bs-featurette .lead {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 80%;
+}
+
+.bs-featurette h3,
+.bs-featurette h4 {
+ color: #333;
+ font-weight: normal;
+}
+.bs-featurette h3 {
+ margin-bottom: 5px;
+}
+/*.bs-featurette h4 {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+*/
+.half-rule {
+ max-width: 100px;
+ margin: 40px auto;
}
@@ -450,49 +476,68 @@ body {
.bs-sidebar.affix {
position: static;
}
+@media (min-width: 768px) {
+ .bs-sidebar {
+ padding-left: 10px;
+ }
+}
/* First level of nav */
.bs-sidenav {
margin-top: 30px;
margin-bottom: 30px;
- padding-top: 10px;
- padding-bottom: 10px;
- text-shadow: 0 1px 0 #fff;
- background-color: #f7f5fa;
- border-radius: 5px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ border-left: 1px solid #eee;
}
/* All levels of nav */
.bs-sidebar .nav > li > a {
display: block;
- color: #716b7a;
+ font-weight: 500;
+ color: #999;
padding: 5px 20px;
+ margin-left: -1px;
}
.bs-sidebar .nav > li > a:hover,
.bs-sidebar .nav > li > a:focus {
+ padding-left: 19px;
+ color: #563d7c;
text-decoration: none;
- background-color: #e5e3e9;
- border-right: 1px solid #dbd8e0;
+ background-color: transparent;
+ border-left: 1px solid #563d7c;
}
.bs-sidebar .nav > .active > a,
.bs-sidebar .nav > .active:hover > a,
.bs-sidebar .nav > .active:focus > a {
+ padding-left: 18px;
font-weight: bold;
color: #563d7c;
background-color: transparent;
- border-right: 1px solid #563d7c;
+ border-left: 2px solid #563d7c;
}
/* Nav: second level (shown on .active) */
.bs-sidebar .nav .nav {
display: none; /* Hide by default, but at >768px, show it */
- margin-bottom: 8px;
+ padding-bottom: 10px;
}
.bs-sidebar .nav .nav > li > a {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 30px;
font-size: 90%;
+ font-weight: normal;
+}
+.bs-sidebar .nav .nav > li > a:hover,
+.bs-sidebar .nav .nav > li > a:focus {
+ padding-left: 29px;
+}
+.bs-sidebar .nav .nav > .active > a,
+.bs-sidebar .nav .nav > .active:hover > a,
+.bs-sidebar .nav .nav > .active:focus > a {
+ font-weight: 500;
+ padding-left: 28px;
}
/* Show and affix the side nav when space allows it */
diff --git a/docs-assets/img/components.png b/docs-assets/img/components.png
new file mode 100644
index 0000000000000000000000000000000000000000..4afe8f5d8e9d266aa95b56d85a641e6407aea3e5
Binary files /dev/null and b/docs-assets/img/components.png differ
diff --git a/docs-assets/img/devices.png b/docs-assets/img/devices.png
new file mode 100644
index 0000000000000000000000000000000000000000..68e1bbb49f5876a3bd355af5e70bae5374c063ad
Binary files /dev/null and b/docs-assets/img/devices.png differ
diff --git a/docs-assets/img/sass-less.png b/docs-assets/img/sass-less.png
new file mode 100644
index 0000000000000000000000000000000000000000..7a2bbf54c4a0d3a5c8e4ce248ab49d73e6584664
Binary files /dev/null and b/docs-assets/img/sass-less.png differ
diff --git a/index.html b/index.html
index e495b700c9ccf3ee80fa04c1b3589e781a6237a9..e3726e7a062676c77b58f8235c79476837bd47ee 100644
--- a/index.html
+++ b/index.html
@@ -6,12 +6,79 @@ base_url: "./"
<main class="bs-masthead" id="content" role="main">
<div class="container">
- <span class="bs-booticon">B</span>
+ <span class="bs-booticon bs-booticon-lg">B</span>
<h1>Bootstrap</h1>
- <p class="lead">Bootstrap is a sleek and powerful mobile first front-end framework for faster and easier web development.</p>
+ <p class="lead">The most popular front-end framework for building on the web.</p>
<p class="lead">
<a href="{{ site.download_dist }}" class="btn btn-outline btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}']);" data-content="Quickly get started with Bootstrap's precompiled CSS, JavaScript, and fonts.">Download Bootstrap</a>
<a href="{{ site.download_source }}" class="btn btn-outline btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version source }}']);" data-content="Download Bootstrap's LESS, JavaScript, font, and documentation source code.">Download source</a>
</p>
+ {% include ads.html %}
</div>
</main>
+
+
+<div class="bs-featurette">
+ <div class="container">
+ <h2 class="bs-featurette-title">Designed for everyone, everywhere.</h2>
+ <p class="lead">Bootstrap is a responsive and mobile first framework for faster and easier web development. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
+
+ <hr class="half-rule">
+
+ <div class="row">
+ <div class="col-sm-4">
+ <img src="docs-assets/img/sass-less.png" alt="Sass and Less support" class="img-responsive">
+ <h3>Preprocesors</h3>
+ <p>In addition to vanilla CSS, Bootstrap includes support for the two most popular CSS preprocessors, Less and Sass.</p>
+ </div>
+ <div class="col-sm-4">
+ <img src="docs-assets/img/devices.png" alt="Responsive across devices" class="img-responsive">
+ <h3>One framework, every device.</h3>
+ <p>Bootstrap easily and efficiently scales your project from phones to tablets to desktops with a single CSS file.</p>
+ </div>
+ <div class="col-sm-4">
+ <img src="docs-assets/img/components.png" alt="Components" class="img-responsive">
+ <h3>Comprehensive docs</h3>
+ <p>With Bootstrap, you get extensive and beautiful documentation with hundreds of live examples, code snippets, and more.</p>
+ </div>
+ </div>
+
+ <hr class="half-rule">
+
+ <p class="lead">Bootstrap is an open source project, hosted and maintained on GitHub.</p>
+ <a href="{{ site.repo }}" class="btn btn-outline btn-lg">View the GitHub project</a>
+ </div>
+</div>
+
+<div class="bs-featurette">
+ <div class="container">
+ <h2 class="bs-featurette-title">Built with Bootstrap.</h2>
+ <p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started with your own with our growing <a href="{{ site.url }}/getting-started/#examples">collection of examples</a> or by exploring some of our favorites from <a href="{{ site.expo }}">the Expo</a>.</p>
+
+ <hr class="half-rule">
+
+ <div class="row">
+ <div class="col-sm-3">
+ <img src="http://expo.getbootstrap.com/screenshots/coinbase.jpg" alt="" class="thumbnail">
+ <h4>Coinbase</h4>
+ </div>
+ <div class="col-sm-3">
+ <img src="http://expo.getbootstrap.com/screenshots/localcrime.jpg" alt="" class="thumbnail">
+ <h4>Localcrime</h4>
+ </div>
+ <div class="col-sm-3">
+ <img src="http://expo.getbootstrap.com/screenshots/fortrabbit.jpg" alt="" class="thumbnail">
+ <h4>Fortrabbit</h4>
+ </div>
+ <div class="col-sm-3">
+ <img src="http://expo.getbootstrap.com/screenshots/sentry.jpg" alt="" class="thumbnail">
+ <h4>Sentry</h4>
+ </div>
+ </div>
+
+ <hr class="half-rule">
+
+ <p class="lead">Head to the Bootstrap Expo for dozens of inspiring projects built on Bootstrap.</p>
+ <a href="{{ site.expo }}" class="btn btn-outline btn-lg">Explore the showcase</a>
+ </div>
+</div>