redo button styles
- rename .btn-bs to .btn-bd-purple - abstract yellow masthead button into .btn-bd-yellow and use it the new docs navbar
This commit is contained in:
Mark Otto
parent
43fac7418e
commit
39a258ddfe
|
|
@ -61,5 +61,5 @@
|
|||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-outline-secondary d-none d-md-inline-block mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
|
||||
<a class="btn btn-bd-yellow d-none d-md-inline-block mb-3 mb-md-0 ml-md-3" href="{{ site.download.source }}">Download</a>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,28 @@
|
|||
//
|
||||
// Custom buttons for the docs.
|
||||
|
||||
.btn-bs {
|
||||
.btn-bd-purple {
|
||||
font-weight: 500;
|
||||
color: $bd-purple-bright;
|
||||
border-color: $bd-purple-bright;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: #fff;
|
||||
background-color: $bd-purple-bright;
|
||||
border-color: $bd-purple-bright;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-bd-yellow {
|
||||
font-weight: 500;
|
||||
color: $bd-yellow;
|
||||
border-color: $bd-yellow;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $bd-graphite;
|
||||
background-color: $bd-yellow;
|
||||
border-color: $bd-yellow;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,15 +36,6 @@
|
|||
padding: 1rem 2rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
color: $bd-yellow;
|
||||
border-color: $bd-yellow;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $bd-graphite;
|
||||
background-color: $bd-yellow;
|
||||
border-color: $bd-yellow;
|
||||
}
|
||||
}
|
||||
|
||||
.carbonad {
|
||||
|
|
|
|||
|
|
@ -12,12 +12,12 @@ toc: true
|
|||
|
||||
**Current version:** v{{ site.current_version}}
|
||||
|
||||
<a href="{{ site.download.dist }}" class="btn btn-lg btn-bs" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download Bootstrap</a>
|
||||
<a href="{{ site.download.dist }}" class="btn btn-lg " onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download Bootstrap</a>
|
||||
|
||||
## Source files
|
||||
**Want to compile Bootstrap with your project's asset pipeline?** Choose this option to download our source Sass, JavaScript, and documentation files. Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes), and [some setup]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/build-tools/#tooling-setup).
|
||||
|
||||
<a href="{{ site.download.source }}" class="btn btn-bs" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
|
||||
<a href="{{ site.download.source }}" class="btn btn-bd-purple" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
|
||||
|
||||
## Bootstrap CDN
|
||||
|
||||
|
|
|
|||
12
index.html
12
index.html
|
|
@ -7,7 +7,7 @@ layout: home
|
|||
{% include icons/bootstrap.svg class="mb-3" width="128" height="128" %}
|
||||
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.</p>
|
||||
<p class="lead">
|
||||
<a href="{{ site.baseurl }}/getting-started/download/" class="btn btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download Bootstrap</a>
|
||||
<a href="{{ site.baseurl }}/getting-started/download/" class="btn btn-lg btn-bd-yellow" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download Bootstrap</a>
|
||||
</p>
|
||||
<p class="version">Currently v{{ site.current_version }}</p>
|
||||
{% include ads.html %}
|
||||
|
|
@ -24,7 +24,7 @@ layout: home
|
|||
<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 build system and readme.</p>
|
||||
<p>
|
||||
<a class="btn btn-bs" href="{{ site.baseurl }}/getting-started/download/#package-managers">View install methods</a>
|
||||
<a class="btn btn-bd-purple" href="{{ site.baseurl }}/getting-started/download/#package-managers">View install methods</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-sm-6 mb-3">
|
||||
|
|
@ -42,7 +42,7 @@ layout: home
|
|||
<hr class="half-rule mt-0">
|
||||
|
||||
<p><strong>Looking for something else?</strong> Compiled builds of Bootstrap's CSS and JS are also available.</p>
|
||||
<a href="{{ site.baseurl }}/getting-started/download/" class="btn btn-bs">More download options</a>
|
||||
<a href="{{ site.baseurl }}/getting-started/download/" class="btn btn-bd-purple">More download options</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -72,7 +72,7 @@ layout: home
|
|||
<hr class="half-rule mt-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">View the GitHub project</a>
|
||||
<a href="{{ site.repo }}" class="btn btn-bd-purple">View the GitHub project</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -84,7 +84,7 @@ layout: home
|
|||
</p>
|
||||
|
||||
<p class="lead">
|
||||
<a href="{{ site.themes }}" class="btn btn-bs">Browse themes</a>
|
||||
<a href="{{ site.themes }}" class="btn btn-bd-purple">Browse themes</a>
|
||||
</p>
|
||||
|
||||
<img class="img-fluid mx-auto" src="{{ site.baseurl }}/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388">
|
||||
|
|
@ -109,6 +109,6 @@ layout: home
|
|||
<hr class="half-rule">
|
||||
|
||||
<p>We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p>
|
||||
<a href="{{ site.expo }}" class="btn btn-bs">Explore the Expo</a>
|
||||
<a href="{{ site.expo }}" class="btn btn-bd-purple">Explore the Expo</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue