rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

docs tweaks for responsive

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/css/docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/css/docs.min.css.map
View File

File diff suppressed because one or more lines are too long

21
docs/assets/scss/_featurettes.scss
View File

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

4
docs/assets/scss/_masthead.scss
View File

@ -1,6 +1,6 @@
.bd-masthead {
position: relative;
padding: ($grid-gutter-width / 2);
padding: 3rem ($grid-gutter-width / 2) 2rem;
color: $bd-purple-light;
text-align: center;
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-right: auto;
margin-bottom: 2rem;
font-size: 1rem;
font-size: 1.25rem;
color: #fff;
}

9
docs/assets/scss/_page-header.scss
View File

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

14
docs/index.html
View File

@ -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>
<div class="row">
<div class="col-sm-6">
<div class="col-sm-6 m-b-lg">
<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>
<a class="btn btn-bs btn-outline" href="{{ site.baseurl }}/getting-started/download/#package-managers">View install methods</a>
</p>
</div>
<div class="col-sm-6">
<div class="col-sm-6 m-b-lg">
<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>
{% comment %}
@ -41,7 +41,7 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
</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>
<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>
<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">
<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>
</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">
<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>
</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">
<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>
</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>
<a href="{{ site.repo }}" class="btn btn-bs btn-outline">View the GitHub project</a>