Skip to content

B
bootstrap
Commit 0e8baab3 authored by Mark Otto's avatar Mark Otto
Browse files
Options

more homepage and sidenav overhaul

parent 98980b0f
Hide whitespace changes
Inline Side-by-side
Showing with 219 additions and 129 deletions
_includes/footer.html
View file @ 0e8baab3
<!-- 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>&middot;</li>
<li><a href="{{ page.base_url }}2.3.2/">v2.3.2 docs</a></li>
<li>&middot;</li>
<li><a href="{{ page.base_url }}about/">About</a></li>
<li>&middot;</li>
<li><a href="{{ site.blog }}">Blog</a></li>
<li>&middot;</li>
<li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
<li>&middot;</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 -->
......
_includes/nav-main.html
View file @ 0e8baab3
......@@ -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>
_layouts/default.html
View file @ 0e8baab3
......@@ -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>&middot;</li>
<li><a href="{{ page.base_url }}2.3.2/">v2.3.2 docs</a></li>
<li>&middot;</li>
<li><a href="{{ page.base_url }}about/">About</a></li>
<li>&middot;</li>
<li><a href="{{ site.blog }}">Blog</a></li>
<li>&middot;</li>
<li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
<li>&middot;</li>
<li><a href="{{ site.repo }}/releases">Releases</a></li>
</ul>
</div>
</footer>
<!-- JS and analytics only. -->
{% include footer.html %}
......
_layouts/home.html
View file @ 0e8baab3
......@@ -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 %}
......
docs-assets/css/docs.css
View file @ 0e8baab3
......@@ -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 */
......
index.html
View file @ 0e8baab3
......@@ -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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment