1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 13:13:03 +02:00

Fixes #12610: Better and more consistent prefixing of docs CSS with .bs-docs-

This commit is contained in:
Mark Otto
2014-02-08 23:24:16 -08:00
parent 769339ed18
commit 0d49920e0d
6 changed files with 93 additions and 93 deletions

View File

@@ -1,13 +1,13 @@
<!-- Footer <!-- Footer
================================================== --> ================================================== -->
<footer class="bs-footer" role="contentinfo"> <footer class="bs-docs-footer" role="contentinfo">
<div class="container"> <div class="container">
{% include social-buttons.html %} {% 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>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>Maintained by the <a href="https://github.com/twbs?tab=members">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p> <p>Maintained by the <a href="https://github.com/twbs?tab=members">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
<p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="footer-links muted"> <ul class="bs-docs-footer-links muted">
<li>Currently v{{ site.current_version }}</li> <li>Currently v{{ site.current_version }}</li>
<li>&middot;</li> <li>&middot;</li>
<li><a href="{{ site.repo }}">GitHub</a></li> <li><a href="{{ site.repo }}">GitHub</a></li>

View File

@@ -1,5 +1,5 @@
<div class="bs-social"> <div class="bs-docs-social">
<ul class="bs-social-buttons"> <ul class="bs-docs-social-buttons">
<li> <li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=bootstrap&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe> <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=bootstrap&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe>
</li> </li>

View File

@@ -11,7 +11,7 @@
{% include nav-main.html %} {% include nav-main.html %}
<!-- Docs page layout --> <!-- Docs page layout -->
<div class="bs-header" id="content"> <div class="bs-docs-header" id="content">
<div class="container"> <div class="container">
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
<p>{{ page.lead }}</p> <p>{{ page.lead }}</p>
@@ -26,8 +26,8 @@
{{ content }} {{ content }}
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<div class="bs-sidebar hidden-print" role="complementary"> <div class="bs-docs-sidebar hidden-print" role="complementary">
<ul class="nav bs-sidenav"> <ul class="nav bs-docs-sidenav">
{% if page.slug == "getting-started" %} {% if page.slug == "getting-started" %}
{% include nav-getting-started.html %} {% include nav-getting-started.html %}
{% elsif page.slug == "css" %} {% elsif page.slug == "css" %}

View File

@@ -81,7 +81,7 @@ body {
} }
/* Bootstrap "B" icon */ /* Bootstrap "B" icon */
.bs-booticon { .bs-docs-booticon {
display: block; display: block;
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
@@ -90,23 +90,23 @@ body {
cursor: default; cursor: default;
text-align: center; text-align: center;
} }
.bs-booticon-sm { .bs-docs-booticon-sm {
width: 30px; width: 30px;
height: 30px; height: 30px;
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
} }
.bs-booticon-lg { .bs-docs-booticon-lg {
width: 144px; width: 144px;
height: 144px; height: 144px;
font-size: 108px; font-size: 108px;
line-height: 140px; line-height: 140px;
} }
.bs-booticon-inverse { .bs-docs-booticon-inverse {
color: #563d7c; color: #563d7c;
background-color: #fff; background-color: #fff;
} }
.bs-booticon-outline { .bs-docs-booticon-outline {
background-color: transparent; background-color: transparent;
border: 1px solid #cdbfe3; border: 1px solid #cdbfe3;
} }
@@ -156,7 +156,7 @@ body {
* Separated section of content at the bottom of all pages, save the homepage. * Separated section of content at the bottom of all pages, save the homepage.
*/ */
.bs-footer { .bs-docs-footer {
padding-top: 40px; padding-top: 40px;
padding-bottom: 40px; padding-bottom: 40px;
margin-top: 100px; margin-top: 100px;
@@ -164,21 +164,21 @@ body {
text-align: center; text-align: center;
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
} }
.footer-links { .bs-docs-footer-links {
margin-top: 20px; margin-top: 20px;
padding-left: 0; padding-left: 0;
color: #999; color: #999;
} }
.footer-links li { .bs-docs-footer-links li {
display: inline; display: inline;
padding: 0 2px; padding: 0 2px;
} }
.footer-links li:first-child { .bs-docs-footer-links li:first-child {
padding-left: 0; padding-left: 0;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.bs-footer p { .bs-docs-footer p {
margin-bottom: 0; margin-bottom: 0;
} }
} }
@@ -190,25 +190,25 @@ body {
* Twitter and GitHub social action buttons (for homepage and footer). * Twitter and GitHub social action buttons (for homepage and footer).
*/ */
.bs-social { .bs-docs-social {
margin-bottom: 20px; margin-bottom: 20px;
text-align: center; text-align: center;
} }
.bs-social-buttons { .bs-docs-social-buttons {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
padding-left: 0; padding-left: 0;
list-style: none; list-style: none;
} }
.bs-social-buttons li { .bs-docs-social-buttons li {
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
padding: 5px 8px; padding: 5px 8px;
} }
.bs-social-buttons .twitter-follow-button { .bs-docs-social-buttons .twitter-follow-button {
width: 225px !important; width: 225px !important;
} }
.bs-social-buttons .twitter-share-button { .bs-docs-social-buttons .twitter-share-button {
width: 98px !important; width: 98px !important;
} }
/* Style the GitHub buttons via CSS instead of inline attributes */ /* Style the GitHub buttons via CSS instead of inline attributes */
@@ -225,8 +225,8 @@ body {
*/ */
/* Share masthead with page headers */ /* Share masthead with page headers */
.bs-masthead, .bs-docs-masthead,
.bs-header { .bs-docs-header {
position: relative; position: relative;
padding: 30px 15px; padding: 30px 15px;
color: #cdbfe3; color: #cdbfe3;
@@ -240,46 +240,46 @@ body {
} }
/* Masthead (headings and download button) */ /* Masthead (headings and download button) */
.bs-masthead .bs-booticon { .bs-docs-masthead .bs-docs-booticon {
margin: 0 auto 30px; margin: 0 auto 30px;
} }
.bs-masthead h1 { .bs-docs-masthead h1 {
font-weight: 300; font-weight: 300;
line-height: 1; line-height: 1;
color: #fff; color: #fff;
} }
.bs-masthead .lead { .bs-docs-masthead .lead {
margin: 0 auto 30px; margin: 0 auto 30px;
font-size: 20px; font-size: 20px;
color: #fff; color: #fff;
} }
.bs-masthead .btn { .bs-docs-masthead .btn {
width: 100%; width: 100%;
padding: 15px 30px; padding: 15px 30px;
font-size: 20px; font-size: 20px;
} }
@media (min-width: 480px) { @media (min-width: 480px) {
.bs-masthead .btn { .bs-docs-masthead .btn {
width: auto; width: auto;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.bs-masthead { .bs-docs-masthead {
padding-top: 80px; padding-top: 80px;
padding-bottom: 80px; padding-bottom: 80px;
} }
.bs-masthead h1 { .bs-docs-masthead h1 {
font-size: 60px; font-size: 60px;
} }
.bs-masthead .lead { .bs-docs-masthead .lead {
font-size: 24px; font-size: 24px;
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.bs-masthead .lead { .bs-docs-masthead .lead {
width: 80%; width: 80%;
font-size: 30px; font-size: 30px;
} }
@@ -293,39 +293,39 @@ body {
*/ */
/* Page headers */ /* Page headers */
.bs-header { .bs-docs-header {
margin-bottom: 40px; margin-bottom: 40px;
font-size: 20px; font-size: 20px;
} }
.bs-header h1 { .bs-docs-header h1 {
margin-top: 0; margin-top: 0;
color: #fff; color: #fff;
} }
.bs-header p { .bs-docs-header p {
margin-bottom: 0; margin-bottom: 0;
font-weight: 300; font-weight: 300;
line-height: 1.4; line-height: 1.4;
} }
.bs-header .container { .bs-docs-header .container {
position: relative; position: relative;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.bs-header { .bs-docs-header {
padding-top: 60px; padding-top: 60px;
padding-bottom: 60px; padding-bottom: 60px;
font-size: 24px; font-size: 24px;
text-align: left; text-align: left;
} }
.bs-header h1 { .bs-docs-header h1 {
font-size: 60px; font-size: 60px;
line-height: 1; line-height: 1;
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.bs-header h1, .bs-docs-header h1,
.bs-header p { .bs-docs-header p {
margin-right: 380px; margin-right: 380px;
} }
} }
@@ -385,7 +385,7 @@ body {
border-radius: 4px; border-radius: 4px;
border-width: 1px !important; border-width: 1px !important;
} }
.bs-masthead .carbonad { .bs-docs-masthead .carbonad {
margin: 50px auto 0 !important; margin: 50px auto 0 !important;
} }
} }
@@ -406,7 +406,7 @@ body {
padding: 15px !important; padding: 15px !important;
width: 330px !important; width: 330px !important;
} }
.bs-masthead .carbonad { .bs-docs-masthead .carbonad {
position: static; position: static;
} }
} }
@@ -418,7 +418,7 @@ body {
* Reasons to use Bootstrap, entries from the Expo, and more. * Reasons to use Bootstrap, entries from the Expo, and more.
*/ */
.bs-featurette { .bs-docs-featurette {
padding-top: 40px; padding-top: 40px;
padding-bottom: 40px; padding-bottom: 40px;
font-size: 16px; font-size: 16px;
@@ -428,12 +428,12 @@ body {
background-color: #fff; background-color: #fff;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
} }
.bs-featurette + .bs-footer { .bs-docs-featurette + .bs-docs-footer {
margin-top: 0; margin-top: 0;
border-top: 0; border-top: 0;
} }
.bs-featurette-title { .bs-docs-featurette-title {
font-size: 30px; font-size: 30px;
font-weight: normal; font-weight: normal;
color: #333; color: #333;
@@ -443,63 +443,63 @@ body {
width: 100px; width: 100px;
margin: 40px auto; margin: 40px auto;
} }
.bs-featurette h3 { .bs-docs-featurette h3 {
font-weight: normal; font-weight: normal;
color: #333; color: #333;
margin-bottom: 5px; margin-bottom: 5px;
} }
.bs-featurette-img { .bs-docs-featurette-img {
display: block; display: block;
margin-bottom: 20px; margin-bottom: 20px;
color: #333; color: #333;
} }
.bs-featurette-img:hover { .bs-docs-featurette-img:hover {
text-decoration: none; text-decoration: none;
color: #428bca; color: #428bca;
} }
.bs-featurette-img img { .bs-docs-featurette-img img {
display: block; display: block;
margin-bottom: 15px; margin-bottom: 15px;
} }
/* Featured sites */ /* Featured sites */
.bs-featured-sites { .bs-docs-featured-sites {
margin-left: -1px; margin-left: -1px;
margin-right: -1px; margin-right: -1px;
} }
.bs-featured-sites .col-sm-3 { .bs-docs-featured-sites .col-sm-3 {
padding-left: 1px; padding-left: 1px;
padding-right: 1px; padding-right: 1px;
} }
@media (min-width: 480px) { @media (min-width: 480px) {
.bs-featurette .img-responsive { .bs-docs-featurette .img-responsive {
margin-top: 30px; margin-top: 30px;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.bs-featurette { .bs-docs-featurette {
padding-top: 100px; padding-top: 100px;
padding-bottom: 100px; padding-bottom: 100px;
} }
.bs-featurette-title { .bs-docs-featurette-title {
font-size: 40px; font-size: 40px;
} }
.bs-featurette .lead { .bs-docs-featurette .lead {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 80%; max-width: 80%;
} }
.bs-featured-sites .col-sm-3:first-child img { .bs-docs-featured-sites .col-sm-3:first-child img {
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
} }
.bs-featured-sites .col-sm-3:last-child img { .bs-docs-featured-sites .col-sm-3:last-child img {
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
.bs-featurette .img-responsive { .bs-docs-featurette .img-responsive {
margin-top: 0; margin-top: 0;
} }
} }
@@ -513,40 +513,40 @@ body {
*/ */
/* By default it's not affixed in mobile views, so undo that */ /* By default it's not affixed in mobile views, so undo that */
.bs-sidebar.affix { .bs-docs-sidebar.affix {
position: static; position: static;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.bs-sidebar { .bs-docs-sidebar {
padding-left: 20px; padding-left: 20px;
} }
} }
/* First level of nav */ /* First level of nav */
.bs-sidenav { .bs-docs-sidenav {
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
/* All levels of nav */ /* All levels of nav */
.bs-sidebar .nav > li > a { .bs-docs-sidebar .nav > li > a {
display: block; display: block;
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
color: #999; color: #999;
padding: 4px 20px; padding: 4px 20px;
} }
.bs-sidebar .nav > li > a:hover, .bs-docs-sidebar .nav > li > a:hover,
.bs-sidebar .nav > li > a:focus { .bs-docs-sidebar .nav > li > a:focus {
padding-left: 19px; padding-left: 19px;
color: #563d7c; color: #563d7c;
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
border-left: 1px solid #563d7c; border-left: 1px solid #563d7c;
} }
.bs-sidebar .nav > .active > a, .bs-docs-sidebar .nav > .active > a,
.bs-sidebar .nav > .active:hover > a, .bs-docs-sidebar .nav > .active:hover > a,
.bs-sidebar .nav > .active:focus > a { .bs-docs-sidebar .nav > .active:focus > a {
padding-left: 18px; padding-left: 18px;
font-weight: bold; font-weight: bold;
color: #563d7c; color: #563d7c;
@@ -555,24 +555,24 @@ body {
} }
/* Nav: second level (shown on .active) */ /* Nav: second level (shown on .active) */
.bs-sidebar .nav .nav { .bs-docs-sidebar .nav .nav {
display: none; /* Hide by default, but at >768px, show it */ display: none; /* Hide by default, but at >768px, show it */
padding-bottom: 10px; padding-bottom: 10px;
} }
.bs-sidebar .nav .nav > li > a { .bs-docs-sidebar .nav .nav > li > a {
padding-top: 1px; padding-top: 1px;
padding-bottom: 1px; padding-bottom: 1px;
padding-left: 30px; padding-left: 30px;
font-size: 12px; font-size: 12px;
font-weight: normal; font-weight: normal;
} }
.bs-sidebar .nav .nav > li > a:hover, .bs-docs-sidebar .nav .nav > li > a:hover,
.bs-sidebar .nav .nav > li > a:focus { .bs-docs-sidebar .nav .nav > li > a:focus {
padding-left: 29px; padding-left: 29px;
} }
.bs-sidebar .nav .nav > .active > a, .bs-docs-sidebar .nav .nav > .active > a,
.bs-sidebar .nav .nav > .active:hover > a, .bs-docs-sidebar .nav .nav > .active:hover > a,
.bs-sidebar .nav .nav > .active:focus > a { .bs-docs-sidebar .nav .nav > .active:focus > a {
font-weight: 500; font-weight: 500;
padding-left: 28px; padding-left: 28px;
} }
@@ -600,31 +600,31 @@ body {
/* Show and affix the side nav when space allows it */ /* Show and affix the side nav when space allows it */
@media (min-width: 992px) { @media (min-width: 992px) {
.bs-sidebar .nav > .active > ul { .bs-docs-sidebar .nav > .active > ul {
display: block; display: block;
} }
/* Widen the fixed sidebar */ /* Widen the fixed sidebar */
.bs-sidebar.affix, .bs-docs-sidebar.affix,
.bs-sidebar.affix-bottom { .bs-docs-sidebar.affix-bottom {
width: 213px; width: 213px;
} }
.bs-sidebar.affix { .bs-docs-sidebar.affix {
position: fixed; /* Undo the static from mobile first approach */ position: fixed; /* Undo the static from mobile first approach */
top: 20px; top: 20px;
} }
.bs-sidebar.affix-bottom { .bs-docs-sidebar.affix-bottom {
position: absolute; /* Undo the static from mobile first approach */ position: absolute; /* Undo the static from mobile first approach */
} }
.bs-sidebar.affix-bottom .bs-sidenav, .bs-docs-sidebar.affix-bottom .bs-docs-sidenav,
.bs-sidebar.affix .bs-sidenav { .bs-docs-sidebar.affix .bs-docs-sidenav {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
/* Widen the fixed sidebar again */ /* Widen the fixed sidebar again */
.bs-sidebar.affix-bottom, .bs-docs-sidebar.affix-bottom,
.bs-sidebar.affix { .bs-docs-sidebar.affix {
width: 263px; width: 263px;
} }
} }
@@ -1355,7 +1355,7 @@ h1[id] {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.bs-brand-item .bs-booticon { .bs-brand-item .bs-docs-booticon {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }

File diff suppressed because one or more lines are too long

View File

@@ -3,9 +3,9 @@ layout: home
title: Bootstrap title: Bootstrap
--- ---
<main class="bs-masthead" id="content" role="main"> <main class="bs-docs-masthead" id="content" role="main">
<div class="container"> <div class="container">
<span class="bs-booticon bs-booticon-lg bs-booticon-outline">B</span> <span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">B</span>
<!-- <h1>Bootstrap</h1> --> <!-- <h1>Bootstrap</h1> -->
<p class="lead">The most popular front-end framework for developing responsive, mobile first projects on the web.</p> <p class="lead">The most popular front-end framework for developing responsive, mobile first projects on the web.</p>
<p class="lead"> <p class="lead">
@@ -15,9 +15,9 @@ title: Bootstrap
</div> </div>
</main> </main>
<div class="bs-featurette"> <div class="bs-docs-featurette">
<div class="container"> <div class="container">
<h2 class="bs-featurette-title">Designed for everyone, everywhere.</h2> <h2 class="bs-docs-featurette-title">Designed for everyone, everywhere.</h2>
<p class="lead">Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p> <p class="lead">Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
<hr class="half-rule"> <hr class="half-rule">
@@ -47,14 +47,14 @@ title: Bootstrap
</div> </div>
</div> </div>
<div class="bs-featurette"> <div class="bs-docs-featurette">
<div class="container"> <div class="container">
<h2 class="bs-featurette-title">Built with Bootstrap.</h2> <h2 class="bs-docs-featurette-title">Built with Bootstrap.</h2>
<p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="../getting-started/#examples">collection of examples</a> or by exploring some of our favorites.</p> <p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="../getting-started/#examples">collection of examples</a> or by exploring some of our favorites.</p>
<hr class="half-rule"> <hr class="half-rule">
<div class="row bs-featured-sites"> <div class="row bs-docs-featured-sites">
{% for showcase in site.data.showcase %} {% for showcase in site.data.showcase %}
<div class="col-sm-3"> <div class="col-sm-3">
<a href="{{ showcase.expo_url }}" target="_blank" title="{{ showcase.name }}"> <a href="{{ showcase.expo_url }}" target="_blank" title="{{ showcase.name }}">