mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-30 22:52:24 +01:00
First pass at cleaning up About pages and brand assets
This commit is contained in:
Mark Otto
XhmikosR
parent
42a0f8f007
commit
eb23b98fb5
@ -4,17 +4,17 @@
|
||||
|
||||
// Logo series wrapper
|
||||
.bd-brand-logos {
|
||||
color: $bd-purple;
|
||||
color: $bd-purple-bright;
|
||||
|
||||
.inverse {
|
||||
color: $white;
|
||||
background-color: $bd-purple;
|
||||
background-color: $bd-purple-bright;
|
||||
}
|
||||
}
|
||||
|
||||
// Individual items
|
||||
.bd-brand-item {
|
||||
padding: 4rem 1rem;
|
||||
// padding: 4rem 1rem;
|
||||
|
||||
+ .bd-brand-item {
|
||||
border-top: 1px solid $white;
|
||||
|
||||
@ -8,69 +8,52 @@ toc: true
|
||||
|
||||
Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's [Brand Assets](https://mailchimp.com/about/brand-assets/).
|
||||
|
||||
## Mark and logo
|
||||
## Logo
|
||||
|
||||
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.
|
||||
When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap's branding for your own open or closed source projects. **Do not use the Twitter name or logo** in association with Bootstrap.
|
||||
|
||||
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
|
||||
<div class="bd-brand-item w-100">
|
||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
|
||||
</div>
|
||||
<div class="bd-brand-item w-100 inverse">
|
||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
|
||||
<div class="bd-brand-item w-100">
|
||||
<span class="h1">Bootstrap</span>
|
||||
</div>
|
||||
<div class="bd-brand-item w-100 inverse">
|
||||
<span class="h1">Bootstrap</span>
|
||||
</div>
|
||||
<div class="bd-brand-item px-2 py-5 mb-3 bg-light rounded-lg">
|
||||
<img class="d-block mx-auto" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="512" height="408" loading="lazy">
|
||||
</div>
|
||||
|
||||
## Download mark
|
||||
Our logo mark is also available in black and white. All rules for our primary logo apply to these as well.
|
||||
|
||||
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 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 w-100" title="Download solid logo">
|
||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
|
||||
</a>
|
||||
<a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" download class="bd-brand-item w-100 inverse" title="Download outlined logo">
|
||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
|
||||
</a>
|
||||
<a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-punchout.svg" download class="bd-brand-item w-100 inverse" title="Download inverted logo">
|
||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
|
||||
</a>
|
||||
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded-lg overflow-hidden w-100 mb-3">
|
||||
<div class="bd-brand-item w-100 px-2 py-5">
|
||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-black.svg" alt="Bootstrap" width="128" height="102" loading="lazy">
|
||||
</div>
|
||||
<div class="bd-brand-item w-100 px-2 py-5 inverse">
|
||||
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" alt="Bootstrap" width="128" height="102" loading="lazy">
|
||||
</div>
|
||||
</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**.
|
||||
Bootstrap should always be referred to as just **Bootstrap**. No Twitter before it and no capital _s_.
|
||||
|
||||
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
|
||||
<div class="bd-brand-item w-100">
|
||||
<span class="h3">Bootstrap</span>
|
||||
<strong class="text-success">Right</strong>
|
||||
<div class="bd-brand-logos d-sm-flex text-center bg-light rounded-lg overflow-hidden w-100 mb-3">
|
||||
<div class="bd-brand-item w-100 p-3">
|
||||
<div class="h3">Bootstrap</div>
|
||||
<strong class="text-success">Correct</strong>
|
||||
</div>
|
||||
<div class="bd-brand-item w-100">
|
||||
<span class="h3 text-muted">BootStrap</span>
|
||||
<strong class="text-warning">Wrong</strong>
|
||||
<div class="bd-brand-item w-100 p-3">
|
||||
<div class="h3 text-muted">BootStrap</div>
|
||||
<strong class="text-danger">Incorrect</strong>
|
||||
</div>
|
||||
<div class="bd-brand-item w-100">
|
||||
<span class="h3 text-muted">Twitter Bootstrap</span>
|
||||
<strong class="text-warning">Wrong</strong>
|
||||
<div class="bd-brand-item w-100 p-3">
|
||||
<div class="h3 text-muted">Twitter Bootstrap</div>
|
||||
<strong class="text-danger">Incorrect</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Colors
|
||||
## Bootstrap projects
|
||||
|
||||
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.
|
||||
Official Bootstrap side projects use and extend our primary logo.
|
||||
|
||||
<div class="color-swatches d-flex">
|
||||
<div class="color-swatch bd-purple rounded mx-1"></div>
|
||||
<div class="color-swatch bd-purple-light rounded mx-1"></div>
|
||||
<div class="color-swatch bd-purple-lighter rounded mx-1"></div>
|
||||
<div class="color-swatch bd-gray rounded mx-1"></div>
|
||||
<div class="bd-brand-item px-2 py-5 mb-3 bg-light rounded-lg">
|
||||
<img class="d-block mx-auto" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-icons-logo.svg" alt="Bootstrap Icons" width="512" height="408" loading="lazy">
|
||||
</div>
|
||||
|
||||
<div class="bd-brand-item px-2 py-5 mb-3 bg-light rounded-lg">
|
||||
<img class="d-block mx-auto" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-npm-logo.svg" alt="Bootstrap Icons" width="512" height="408" loading="lazy">
|
||||
</div>
|
||||
|
||||
@ -22,6 +22,8 @@ Originally [released](https://blog.twitter.com/developer/en_us/a/2011/bootstrap-
|
||||
|
||||
With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS's flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers.
|
||||
|
||||
Our latest release, Bootstrap 5 (currently in development), focuses on improving v4's codebase with as few major breaking chanages as possible. We improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of our tooling.
|
||||
|
||||
## Get involved
|
||||
|
||||
Get involved with Bootstrap development by [opening an issue]({{< param repo >}}/issues/new) or submitting a pull request. Read our [contributing guidelines]({{< param repo >}}/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how we develop.
|
||||
|
||||
BIN
site/static/docs/5.0/assets/brand/bootstrap-logo-black.png
Normal file
BIN
site/static/docs/5.0/assets/brand/bootstrap-logo-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
@ -0,0 +1 @@
|
||||
<svg width="512" height="408" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M106.342 0c-29.214 0-50.827 25.58-49.86 53.32.927 26.647-.278 61.165-8.966 89.31C38.802 170.862 24.07 188.707 0 191v26c24.069 2.293 38.802 20.138 47.516 48.37 8.688 28.145 9.893 62.663 8.965 89.311C55.515 382.42 77.128 408 106.342 408h299.353c29.214 0 50.827-25.58 49.861-53.319-.928-26.648.277-61.166 8.964-89.311 8.715-28.232 23.411-46.077 47.48-48.37v-26c-24.069-2.293-38.765-20.138-47.48-48.37-8.687-28.145-9.892-62.663-8.964-89.31C456.522 25.58 434.909 0 405.695 0H106.342zm236.559 251.102c0 38.197-28.501 61.355-75.798 61.355h-87.202a2 2 0 0 1-2-2v-213a2 2 0 0 1 2-2h86.74c39.439 0 65.322 21.354 65.322 54.138 0 23.008-17.409 43.61-39.594 47.219v1.203c30.196 3.309 50.532 24.212 50.532 53.085zm-84.58-128.125h-45.91v64.814h38.669c29.888 0 46.373-12.03 46.373-33.535 0-20.151-14.174-31.279-39.132-31.279zm-45.91 90.53v71.431h47.605c31.12 0 47.605-12.482 47.605-35.941 0-23.46-16.947-35.49-49.608-35.49h-45.602z" fill="#000"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0H512V408H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
site/static/docs/5.0/assets/brand/bootstrap-logo-white.png
Normal file
BIN
site/static/docs/5.0/assets/brand/bootstrap-logo-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
@ -0,0 +1 @@
|
||||
<svg width="512" height="408" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M106.342 0c-29.214 0-50.827 25.58-49.86 53.32.927 26.647-.278 61.165-8.966 89.31C38.802 170.862 24.07 188.707 0 191v26c24.069 2.293 38.802 20.138 47.516 48.37 8.688 28.145 9.893 62.663 8.965 89.311C55.515 382.42 77.128 408 106.342 408h299.353c29.214 0 50.827-25.58 49.861-53.319-.928-26.648.277-61.166 8.964-89.311 8.715-28.232 23.411-46.077 47.48-48.37v-26c-24.069-2.293-38.765-20.138-47.48-48.37-8.687-28.145-9.892-62.663-8.964-89.31C456.522 25.58 434.909 0 405.695 0H106.342zm236.559 251.102c0 38.197-28.501 61.355-75.798 61.355h-87.202a2 2 0 0 1-2-2v-213a2 2 0 0 1 2-2h86.74c39.439 0 65.322 21.354 65.322 54.138 0 23.008-17.409 43.61-39.594 47.219v1.203c30.196 3.309 50.532 24.212 50.532 53.085zm-84.58-128.125h-45.91v64.814h38.669c29.888 0 46.373-12.03 46.373-33.535 0-20.151-14.174-31.279-39.132-31.279zm-45.91 90.53v71.431h47.605c31.12 0 47.605-12.482 47.605-35.941 0-23.46-16.947-35.49-49.608-35.49h-45.602z" fill="#fff"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0H512V408H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
site/static/docs/5.0/assets/brand/bootstrap-logo.png
Normal file
BIN
site/static/docs/5.0/assets/brand/bootstrap-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
1
site/static/docs/5.0/assets/brand/bootstrap-logo.svg
Normal file
1
site/static/docs/5.0/assets/brand/bootstrap-logo.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="512" height="408" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M56.481 53.32C55.515 25.58 77.128 0 106.342 0h299.353c29.214 0 50.827 25.58 49.861 53.32-.928 26.647.277 61.165 8.964 89.31 8.715 28.232 23.411 46.077 47.48 48.37v26c-24.069 2.293-38.765 20.138-47.48 48.37-8.687 28.145-9.892 62.663-8.964 89.311.966 27.739-20.647 53.319-49.861 53.319H106.342c-29.214 0-50.827-25.58-49.86-53.319.927-26.648-.278-61.166-8.966-89.311C38.802 237.138 24.07 219.293 0 217v-26c24.069-2.293 38.802-20.138 47.516-48.37 8.688-28.145 9.893-62.663 8.965-89.31z" fill="url(#paint0_linear)"/><path d="M267.103 312.457c47.297 0 75.798-23.158 75.798-61.355 0-28.873-20.336-49.776-50.532-53.085v-1.203c22.185-3.609 39.594-24.211 39.594-47.219 0-32.783-25.882-54.138-65.322-54.138h-88.74v217h89.202zm-54.692-189.48h45.911c24.958 0 39.131 11.128 39.131 31.279 0 21.505-16.484 33.535-46.372 33.535h-38.67v-64.814zm0 161.961v-71.431h45.602c32.661 0 49.608 12.03 49.608 35.49 0 23.459-16.484 35.941-47.605 35.941h-47.605z" fill="url(#paint1_linear)" filter="url(#filter0_d)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M291.369 198.914v-2.95l.84-.137c21.69-3.529 38.754-23.704 38.754-46.232 0-16.106-6.347-29.354-17.509-38.592-11.18-9.254-27.266-14.546-46.813-14.546h-87.74v215h88.202c23.498 0 42.199-5.753 55.006-16.131 12.78-10.356 19.792-25.397 19.792-44.224 0-28.305-19.892-48.831-49.641-52.091l-.891-.097zM177.901 312.457v-217h88.74c39.44 0 65.322 21.355 65.322 54.138 0 23.008-17.409 43.61-39.594 47.219v1.203c30.196 3.309 50.532 24.212 50.532 53.085 0 38.197-28.501 61.355-75.798 61.355h-89.202zm33.51-190.48h46.911c12.609 0 22.644 2.809 29.547 8.301 6.938 5.519 10.584 13.647 10.584 23.978 0 11.042-4.25 19.74-12.391 25.642-8.094 5.867-19.926 8.893-34.981 8.893h-39.67v-66.814zm0 163.961v-73.431h46.602c16.426 0 29.071 3.02 37.633 9.133 8.621 6.156 12.975 15.354 12.975 27.357 0 11.989-4.228 21.293-12.529 27.565-8.255 6.237-20.406 9.376-36.076 9.376h-48.605zm1-162.961v64.814h38.67c29.888 0 46.372-12.03 46.372-33.535 0-20.151-14.173-31.279-39.131-31.279h-45.911zm0 161.961h47.605c31.121 0 47.605-12.482 47.605-35.941 0-23.46-16.947-35.49-49.608-35.49h-45.602v71.431z" fill="#fff" filter="url(#filter1_d)"/></g><defs><filter id="filter0_d" x="161.901" y="83.457" width="197" height="249" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="8"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><filter id="filter1_d" x="161.901" y="83.457" width="197" height="249" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="8"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><linearGradient id="paint0_linear" x1="76.079" y1="10.798" x2="523.48" y2="365.945" gradientUnits="userSpaceOnUse"><stop stop-color="#9013FE"/><stop offset=".995" stop-color="#6610F2"/></linearGradient><linearGradient id="paint1_linear" x1="193.508" y1="109.74" x2="293.514" y2="278.872" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#F1E5FC"/></linearGradient><clipPath id="clip0"><path fill="#fff" d="M0 0H512V408H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
@ -1,5 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 180 612 612" role="img">
|
||||
<title>Bootstrap</title>
|
||||
<path d="M510 186c25.5 0 49.6 10 67.8 28.2S606 256.5 606 282v408c0 25.5-10 49.6-28.2 67.8S535.5 786 510 786H102c-25.5 0-49.6-10-67.8-28.2S6 715.5 6 690V282c0-25.5 10-49.6 28.2-67.8S76.5 186 102 186h408m0-6H102C45.9 180 0 225.9 0 282v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V282c0-56.1-45.9-102-102-102z"/>
|
||||
<path d="M166.3 313h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V313zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V619z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 939 B |
@ -1,5 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 180 612 612" role="img">
|
||||
<title>Bootstrap</title>
|
||||
<path d="M383.5 521.8c-10.5-9.5-25.2-14.2-44.2-14.2H228.8V619h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8-.1-17.6-5.3-31.2-15.8-40.6zm-15.3-72c10-8.5 15-20.8 15-36.8 0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.5h102c15 0 27.5-4.3 37.5-12.7z"/>
|
||||
<path d="M510 180H102C45.9 180 0 225.9 0 282v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V282c0-56.1-45.9-102-102-102zm-55.8 429.8c-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V313h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.3z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 773 B |
@ -1,5 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612" role="img">
|
||||
<title>Bootstrap</title>
|
||||
<path fill="#563d7c" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102v408z"/>
|
||||
<path fill="#fff" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V133zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 760 B |
Loading…
x
Reference in New Issue
Block a user