diff --git a/_includes/footer.html b/_includes/footer.html index 7f9f8f103..3b0105bdd 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,3 +1,27 @@ + + + diff --git a/_includes/nav-main.html b/_includes/nav-main.html index 5e8faeac3..a216164c2 100644 --- a/_includes/nav-main.html +++ b/_includes/nav-main.html @@ -27,6 +27,11 @@ Customize + diff --git a/_layouts/default.html b/_layouts/default.html index 5863008dd..f35d6935c 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -21,6 +21,9 @@
+
+ {{ content }} +
-
- {{ content }} -
- - - {% include footer.html %} diff --git a/_layouts/home.html b/_layouts/home.html index ec472e7a5..96e399d20 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -13,33 +13,6 @@ {{ content }} - - {% include footer.html %} diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css index e495d4744..3f03db9cf 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 000000000..4afe8f5d8 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 000000000..68e1bbb49 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 000000000..7a2bbf54c Binary files /dev/null and b/docs-assets/img/sass-less.png differ diff --git a/index.html b/index.html index e495b700c..e3726e7a0 100644 --- a/index.html +++ b/index.html @@ -6,12 +6,79 @@ base_url: "./"
- B + B

Bootstrap

-

Bootstrap is a sleek and powerful mobile first front-end framework for faster and easier web development.

+

The most popular front-end framework for building on the web.

Download Bootstrap Download source

+ {% include ads.html %}
+ + +
+
+

Designed for everyone, everywhere.

+

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.

+ +
+ +
+
+ Sass and Less support +

Preprocesors

+

In addition to vanilla CSS, Bootstrap includes support for the two most popular CSS preprocessors, Less and Sass.

+
+
+ Responsive across devices +

One framework, every device.

+

Bootstrap easily and efficiently scales your project from phones to tablets to desktops with a single CSS file.

+
+
+ Components +

Comprehensive docs

+

With Bootstrap, you get extensive and beautiful documentation with hundreds of live examples, code snippets, and more.

+
+
+ +
+ +

Bootstrap is an open source project, hosted and maintained on GitHub.

+ View the GitHub project +
+
+ +
+
+

Built with Bootstrap.

+

Millions of amazing sites across the web are being built with Bootstrap. Get started with your own with our growing collection of examples or by exploring some of our favorites from the Expo.

+ +
+ +
+
+ +

Coinbase

+
+
+ +

Localcrime

+
+
+ +

Fortrabbit

+
+
+ +

Sentry

+
+
+ +
+ +

Head to the Bootstrap Expo for dozens of inspiring projects built on Bootstrap.

+ Explore the showcase +
+