diff --git a/_includes/footer.html b/_includes/footer.html index 7f9f8f103b..3b0105bdd4 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 5e8faeac3f..a216164c2d 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 5863008dd2..f35d6935c0 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 ec472e7a54..96e399d20d 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 e495d47446..3f03db9cf0 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 0000000000..4afe8f5d8e 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 0000000000..68e1bbb49f 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 0000000000..7a2bbf54c4 Binary files /dev/null and b/docs-assets/img/sass-less.png differ diff --git a/index.html b/index.html index e495b700c9..e3726e7a06 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 +
+