0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-17 14:54:30 +01:00

docs tweaks for responsive

This commit is contained in:
Mark Otto 2015-08-19 00:07:59 -07:00
parent 624723f4c3
commit 980d8ea2d8
6 changed files with 34 additions and 18 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -4,7 +4,7 @@
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
color: #555; color: #555;
// text-align: center; text-align: center;
background-color: #fff; background-color: #fff;
border-top: 1px solid #eee; border-top: 1px solid #eee;
@ -12,6 +12,10 @@
text-align: left; text-align: left;
} }
@include media-breakpoint-up(sm) {
text-align: left;
}
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
.col-sm-6:first-child { .col-sm-6:first-child {
padding-right: ($grid-gutter-width * 1.5); padding-right: ($grid-gutter-width * 1.5);
@ -29,13 +33,18 @@
color: #333; color: #333;
+ .lead { + .lead {
font-size: 1.5rem; font-size: 1rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
} }
.half-rule { .half-rule {
width: 6rem; width: 6rem;
margin: 2.5rem 0; margin: 2.5rem auto;
@include media-breakpoint-up(sm) {
margin-right: 0;
margin-left: 0;
}
} }
.bd-featurette h4 { .bd-featurette h4 {
margin-top: 1rem; margin-top: 1rem;
@ -69,11 +78,13 @@
} }
.bd-featurette-title { .bd-featurette-title {
font-size: 2.5rem; font-size: 2.5rem;
+ .lead {
font-size: 1.5rem;
}
} }
.bd-featurette .lead { .bd-featurette .lead {
max-width: 80%; max-width: 80%;
// margin-right: auto;
// margin-left: auto;
} }
.bd-featurette .img-responsive { .bd-featurette .img-responsive {
margin-top: 0; margin-top: 0;

@ -1,6 +1,6 @@
.bd-masthead { .bd-masthead {
position: relative; position: relative;
padding: ($grid-gutter-width / 2); padding: 3rem ($grid-gutter-width / 2) 2rem;
color: $bd-purple-light; color: $bd-purple-light;
text-align: center; text-align: center;
background: -webkit-linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%)); background: -webkit-linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
@ -21,7 +21,7 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: 2rem; margin-bottom: 2rem;
font-size: 1rem; font-size: 1.25rem;
color: #fff; color: #fff;
} }

@ -1,5 +1,5 @@
.bd-pageheader { .bd-pageheader {
padding: 2rem .75rem; padding: 2rem ($grid-gutter-width / 2);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
color: $bd-purple-light; color: $bd-purple-light;
text-align: center; text-align: center;
@ -17,7 +17,8 @@
p { p {
margin-bottom: 0; margin-bottom: 0;
font-size: 1.5rem; font-size: 1.25rem;
font-weight: 300;
} }
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
@ -35,6 +36,10 @@
h1 { h1 {
font-size: 4rem; font-size: 4rem;
} }
p {
font-size: 1.5rem;
}
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {

@ -21,14 +21,14 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
<p class="lead">Quickly include Bootstrap's CSS and JS into any project. Use your favorite package manager, download the source, or use the Bootstrap CDN.</p> <p class="lead">Quickly include Bootstrap's CSS and JS into any project. Use your favorite package manager, download the source, or use the Bootstrap CDN.</p>
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6 m-b-lg">
<h4>Managed dependencies</h4> <h4>Managed dependencies</h4>
<p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our Gruntfile and readme.</p> <p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our Gruntfile and readme.</p>
<p> <p>
<a class="btn btn-bs btn-outline" href="{{ site.baseurl }}/getting-started/download/#package-managers">View install methods</a> <a class="btn btn-bs btn-outline" href="{{ site.baseurl }}/getting-started/download/#package-managers">View install methods</a>
</p> </p>
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6 m-b-lg">
<h4>Bootstrap CDN</h4> <h4>Bootstrap CDN</h4>
<p>When you just need to include Bootstrap's compiled CSS and JS, use the Bootstrap CDN, free from the Max CDN folks.</p> <p>When you just need to include Bootstrap's compiled CSS and JS, use the Bootstrap CDN, free from the Max CDN folks.</p>
{% comment %} {% comment %}
@ -41,7 +41,7 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
</div> </div>
</div> </div>
<hr class="half-rule"> <hr class="half-rule m-t-0">
<p><strong>Looking for something simpler?</strong> Customized builds of Bootstrap's CSS and JS are also available.</p> <p><strong>Looking for something simpler?</strong> Customized builds of Bootstrap's CSS and JS are also available.</p>
<a href="{{ site.baseurl }}/getting-started/download/#custom-builds" class="btn btn-bs btn-outline">More download options</a> <a href="{{ site.baseurl }}/getting-started/download/#custom-builds" class="btn btn-bs btn-outline">More download options</a>
@ -54,24 +54,24 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
<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>
<div class="row"> <div class="row">
<div class="col-sm-4"> <div class="col-sm-4 m-b-lg">
<img src="assets/img/sass-less.png" alt="Sass support" class="img-responsive"> <img src="assets/img/sass-less.png" alt="Sass support" class="img-responsive">
<h4>Preprocessors</h4> <h4>Preprocessors</h4>
<p>Bootstrap ships with vanilla CSS, but its source code utilizes <a href="../css/#sass">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p> <p>Bootstrap ships with vanilla CSS, but its source code utilizes <a href="../css/#sass">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4 m-b-lg">
<img src="assets/img/devices.png" alt="Responsive across devices" class="img-responsive"> <img src="assets/img/devices.png" alt="Responsive across devices" class="img-responsive">
<h4>One framework, every device.</h4> <h4>One framework, every device.</h4>
<p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p> <p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4 m-b-lg">
<img src="assets/img/components.png" alt="Components" class="img-responsive"> <img src="assets/img/components.png" alt="Components" class="img-responsive">
<h4>Full of features</h4> <h4>Full of features</h4>
<p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p> <p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
</div> </div>
</div> </div>
<hr class="half-rule"> <hr class="half-rule m-t-0">
<p><strong>Bootstrap is open source!</strong> It's hosted, developed, and maintained on GitHub by folks like you.</p> <p><strong>Bootstrap is open source!</strong> It's hosted, developed, and maintained on GitHub by folks like you.</p>
<a href="{{ site.repo }}" class="btn btn-bs btn-outline">View the GitHub project</a> <a href="{{ site.repo }}" class="btn btn-bs btn-outline">View the GitHub project</a>