mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-01 01:21:49 +02:00
Code Issues Releases Wiki Activity

Docs tweaks

Browse Source 
- Simplify display headings example markup
- Simplify footer styles
- Remove z-indices hacks in the docs
- Remove redundant modal styling in docs
- Use `escape-svg()` to escape docs sidebar chevron
- Simplify sidebar chevron code
- Cleanup masthead css & fix column width between `md` & `lg`
- Easier to download logo's with the `download` attribute.
- Changed some color codes into variables
- Cleanup brands css
This commit is contained in:
Martijn Cuppens
2019-08-30 23:32:12 +03:00
committed by XhmikosR
parent d6945d5e8f
commit b6b96c174b
16 changed files with 43 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
site/content/docs/4.3/about/brand.md
View File

@@ -12,7 +12,7 @@ Have a need for Bootstrap's brand resources? Great! We have only a few guideline
Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Bootstrap**). It should always appear in San Francisco Display Semibold. **Do not use the Twitter bird** in association with Bootstrap.
<div class="bd-brand-logos">
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
<div class="bd-brand-item">
<img class="svg" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144">
</div>
@@ -20,7 +20,7 @@ Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Boo
<img class="svg" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144">
</div>
</div>
<div class="bd-brand-logos">
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
<div class="bd-brand-item">
<span class="h1">Bootstrap</span>
</div>
@@ -31,25 +31,25 @@ Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Boo
## Download mark
Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.
Download the Bootstrap mark in one of three styles, each available as an SVG file. **Click to download the logos**.
<div class="bd-brand-logos">
<div class="bd-brand-item">
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
<a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" download class="bd-brand-item" title="Download solid logo">
<img class="svg" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144">
</div>
<div class="bd-brand-item inverse">
</a>
<a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" download class="bd-brand-item inverse" title="Download outlined logo">
<img class="svg" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144">
</div>
<div class="bd-brand-item inverse">
</a>
<a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-punchout.svg" download class="bd-brand-item inverse" title="Download inverted logo">
<img class="svg" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144">
</div>
</a>
</div>
## Name
The project and framework should always be referred to as **Bootstrap**. No Twitter before it, no capital _s_, and no abbreviations except for one, a capital **B**.
<div class="bd-brand-logos">
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
<div class="bd-brand-item">
<span class="h3">Bootstrap</span>
<strong class="text-success">Right</strong>
@@ -68,11 +68,9 @@ The project and framework should always be referred to as **Bootstrap**. No Twit
Our docs and branding use a handful of primary colors to differentiate what *is* Bootstrap from what *is in* Bootstrap. In other words, if it's purple, it's representative of Bootstrap.
<div class="bd-brand">
<div class="color-swatches">
<div class="color-swatch bd-purple"></div>
<div class="color-swatch bd-purple-light"></div>
<div class="color-swatch bd-purple-lighter"></div>
<div class="color-swatch bd-gray"></div>
</div>
<div class="color-swatches">
<div class="color-swatch bd-purple"></div>
<div class="color-swatch bd-purple-light"></div>
<div class="color-swatch bd-purple-lighter"></div>
<div class="color-swatch bd-gray"></div>
</div>

22
site/content/docs/4.3/content/typography.md
View File

@@ -104,23 +104,11 @@ Use the included utility classes to recreate the small secondary heading text fr
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style. Keep in mind these headings are not responsive by default, but it's possible to enable [responsive font sizes](#responsive-font-sizes).
<div class="bd-example bd-example-type">
<table class="table">
<tbody>
<tr>
<td><span class="display-1">Display 1</span></td>
</tr>
<tr>
<td><span class="display-2">Display 2</span></td>
</tr>
<tr>
<td><span class="display-3">Display 3</span></td>
</tr>
<tr>
<td><span class="display-4">Display 4</span></td>
</tr>
</tbody>
</table>
<div class="bd-example">
<div class="display-1 pb-3 mb-3 border-bottom">Display 1</div>
<div class="display-2 pb-3 mb-3 border-bottom">Display 2</div>
<div class="display-3 pb-3 mb-3 border-bottom">Display 3</div>
<div class="display-4">Display 4</div>
</div>
{{< highlight html >}}