0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00

Update v5 homepage to match v4.5's changes

This commit is contained in:
Mark Otto 2020-05-31 05:00:08 +03:00 committed by XhmikosR
parent e084588517
commit 6ca54573a9
19 changed files with 151 additions and 97 deletions

View File

@ -4,14 +4,15 @@
.btn-bd-primary { .btn-bd-primary {
font-weight: 600; font-weight: 600;
color: $bd-purple-bright; color: $white;
background-color: $bd-purple-bright;
border-color: $bd-purple-bright; border-color: $bd-purple-bright;
&:hover, &:hover,
&:active { &:active {
color: $white; color: $white;
background-color: $bd-purple-bright; background-color: darken($bd-purple-bright, 10%);
border-color: $bd-purple-bright; border-color: darken($bd-purple-bright, 10%);
} }
&:focus { &:focus {

View File

@ -68,3 +68,7 @@
.bd-text-purple-bright { .bd-text-purple-bright {
color: $bd-purple-bright; color: $bd-purple-bright;
} }
.bd-bg-purple-bright {
background-color: $bd-purple-bright;
}

View File

@ -1,6 +1,10 @@
.bd-masthead { .bd-masthead {
padding: 3rem 0; padding: 3rem 0;
background-image: linear-gradient(45deg, #fafafa, #f5f5f5); background: linear-gradient(165deg, lighten($bd-purple-light, 16%) 50%, $white 50%);
@include media-breakpoint-up(sm) {
padding: 5rem 0;
}
h1 { h1 {
@include font-size(4rem); @include font-size(4rem);
@ -15,40 +19,24 @@
padding: .8rem 2rem; padding: .8rem 2rem;
font-weight: 600; font-weight: 600;
} }
.lead {
@include media-breakpoint-up(sm) { @include font-size(1.5rem);
padding: 5rem 0; font-weight: 400;
color: $gray-700;
} }
} }
.lead-lg {
@include font-size(1.5rem);
}
.home-icon {
width: 6rem;
height: 6rem;
@include border-radius(25%);
box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
}
.home-icon-purple {
background-image: linear-gradient(180deg, $pink, $purple);
}
.home-icon-blue {
background-image: linear-gradient(180deg, $teal, $blue);
}
.home-icon-yellow {
background-image: linear-gradient(180deg, $yellow, $orange);
}
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
.mw-md-75 { max-width: 75%; } .mw-md-75 { max-width: 75%; }
} }
.half-rule { .masthead-followup-icon {
width: 6rem; padding: .75rem;
margin: 2rem 0; background-image: linear-gradient(to bottom right, rgba(255, 255, 255, .2), rgba(255, 255, 255, .01));
@include border-radius(.75rem);
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .1);
}
.masthead-followup-svg {
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .125));
} }

View File

@ -13,8 +13,10 @@
<h1 class="bd-title mt-0">{{ .Title | markdownify }}</h1> <h1 class="bd-title mt-0">{{ .Title | markdownify }}</h1>
<p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p> <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
{{ if eq .Title "Examples" }} {{ if eq .Title "Examples" }}
<a href="{{ .Site.Params.download.source }}" class="btn btn-lg btn-bd-primary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a> <div class="d-flex flex-column flex-sm-row">
<a href="{{ .Site.Params.download.dist_examples }}" class="btn btn-lg btn-bd-primary mt-3 mt-sm-0 ml-sm-3 ml-md-5" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">Download Examples</a> <a href="{{ .Site.Params.download.dist_examples }}" class="btn btn-lg btn-bd-primary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">Download examples</a>
<a href="{{ .Site.Params.download.source }}" class="btn btn-lg btn-outline-secondary mt-3 mt-sm-0 ml-sm-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
</div>
{{ end }} {{ end }}
{{ partial "ads" . }} {{ partial "ads" . }}
</div> </div>
@ -23,6 +25,26 @@
<main class="bd-content order-1 py-5" id="content"> <main class="bd-content order-1 py-5" id="content">
<div class="container"> <div class="container">
{{ .Content }} {{ .Content }}
{{ if eq .Title "Examples" }}
<hr class="my-5">
<div class="container">
<div class="text-center">
<div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
{{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
</div>
<h2 class="display-6 font-weight-normal">Go further with Bootstrap Themes</h2>
<p class="col-md-10 col-lg-8 mx-auto lead">
Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. Theyre built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
</p>
<a href="{{ .Site.Params.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
</div>
<img class="d-block img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage.png,
/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage@2x.png 2x"
src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage.png"
alt="Bootstrap Themes" width="1150" height="320" loading="lazy">
</div>
{{ end }}
</div> </div>
</main> </main>

View File

@ -1,54 +1,87 @@
{{ "<!-- Icons by Bytesize https://github.com/danklammer/bytesize-icons -->" | safeHTML }} <div class="container masthead-followup px-4 px-md-3">
<div class="row mb-5 pb-md-4 align-items-center">
<div class="col-md-5">
<div class="masthead-followup-icon d-inline-block mb-2 text-white bg-success">
{{ partial "icons/code.svg" (dict "width" "32" "height" "32") }}
</div>
<h2 class="display-5 font-weight-normal">Installation</h2>
<p class="lead font-weight-normal">
Install Bootstraps source Sass and JavaScript files via npm, Composer, or Meteor.
</p>
<p>Package managed installs dont include documentation or our full build scripts. You can also <a href="https://github.com/twbs/bootstrap-npm-starter">use our npm template repo</a> to quickly generate a Bootstrap project via npm.</p>
<a class="btn btn-lg btn-outline-primary mb-3" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Read installation docs</a>
</div>
<div class="col-md-7 pl-md-5">
{{ highlight "npm install bootstrap" "sh" "" }}
{{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }}
</div>
</div>
<div class="container py-3 my-3 py-md-5 my-md-5 text-center"> <div class="row mb-5 pb-md-4 align-items-center">
<div class="home-icon home-icon-blue text-white p-4 mx-auto mb-3"> <div class="col-md-5">
{{ partial "icons/import.svg" (dict "width" "48" "height" "48") }} <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-primary">
</div> {{ partial "icons/cloud-fill.svg" (dict "width" "32" "height" "32") }}
<h2 class="display-4">Installation</h2> </div>
<p class="lead lead-lg mw-md-75 mx-auto"> <h2 class="display-5 font-weight-normal">BootstrapCDN</h2>
Include Bootstraps source Sass and JavaScript files via npm, Composer, or Meteor. Package managed installs dont include documentation, but do include our build system and readme. <p class="lead font-weight-normal">
</p> When you only need to include Bootstraps compiled CSS or JS, you can use <a href="https://www.bootstrapcdn.com/">BootstrapCDN</a>.
<a class="btn btn-lg btn-outline-primary mb-4" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Read installation docs</a> </p>
<div class="text-left mx-md-5 px-md-5"> <p>
{{ highlight "npm install bootstrap" "sh" "" }} See it in action with our simple <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#starter-template">starter template</a>, or <a href="/docs/{{ .Site.Params.docs_version }}/examples/">browse the examples</a> to jumpstart your next project.
{{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }} </p>
</div> <a class="btn btn-lg btn-outline-primary mb-3" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/">Explore the docs</a>
</div> </div>
<div class="col-md-7 pl-md-5">
<div class="container py-3 my-3 py-md-5 my-md-5 text-center"> {{ highlight (printf (`<!-- CSS only -->
<div class="home-icon home-icon-purple text-white p-4 mx-auto mb-3"> <link rel="stylesheet" href="%s" integrity=%q crossorigin="anonymous">`) .Site.Params.cdn.css (.Site.Params.cdn.css_hash | safeHTMLAttr)) "html" "" }}
{{ partial "icons/download.svg" (dict "width" "48" "height" "48") }} {{ highlight (printf (`<!-- JavaScript and dependencies -->
</div>
<h2 class="display-4">BootstrapCDN</h2>
<p class="lead lead-lg mw-md-75 mx-auto">
Use the <a href="https://www.bootstrapcdn.com/">BootstrapCDN</a> to deliver fast, cached, and compiled versions of Bootstraps CSS and JavaScript. No jQuery is required, but don't forget to include Popper.js for some components.
</p>
<a class="btn btn-lg btn-outline-primary mb-4" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/">Explore the docs</a>
<div class="text-left mx-md-5 px-md-5">
<h3 class="h5">CSS only</h3>
{{ highlight (printf (`<link rel="stylesheet" href="%s" integrity=%q crossorigin="anonymous">`) .Site.Params.cdn.css (.Site.Params.cdn.css_hash | safeHTMLAttr)) "html" "" }}
<h3 class="h5">JS and Popper.js</h3>
{{ highlight (printf (`<script src="%s" integrity=%q crossorigin="anonymous"></script>
<script src="%s" integrity=%q crossorigin="anonymous"></script> <script src="%s" integrity=%q crossorigin="anonymous"></script>
`) .Site.Params.cdn.popper (.Site.Params.cdn.popper_hash | safeHTMLAttr) .Site.Params.cdn.js (.Site.Params.cdn.js_hash | safeHTMLAttr)) "html" "" }} <script src="%s" integrity=%q crossorigin="anonymous"></script>
`) .Site.Params.cdn.popper (.Site.Params.cdn.popper_hash | safeHTMLAttr) .Site.Params.cdn.js (.Site.Params.cdn.js_hash | safeHTMLAttr)) "html" "" }}
</div>
</div> </div>
</div>
<div class="container py-3 my-3 py-md-5 my-md-5 text-center"> <div class="row mb-5 pb-md-4 align-items-center">
<div class="home-icon home-icon-yellow text-white p-4 mx-auto mb-3"> <div class="col-md-5">
{{ partial "icons/lightning.svg" (dict "width" "48" "height" "48") }} <div class="masthead-followup-icon d-inline-block mb-2 text-white bd-bg-purple-bright">
{{ partial "icons/circle-square.svg" (dict "width" "32" "height" "32") }}
</div>
<h2 class="display-5 font-weight-normal">Bootstrap Icons</h2>
<p class="lead font-weight-normal">
For the first time ever, Bootstrap has its own open source SVG icon library, designed to work best with our components and documentation.
</p>
<p>
Bootstrap Icons are designed to work best with Bootstrap components, but theyll work in any project. Theyre SVGs, so they scale quickly and easily, can be implemented in several ways, and can be styled with CSS.
</p>
<a href="{{ .Site.Params.icons }}" class="btn btn-lg btn-outline-primary mb-3">Get Bootstrap Icons</a>
</div>
<div class="col-md-7 pl-md-5">
<img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png,
/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons@2x.png 2x"
src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png"
alt="Bootstrap Icons" width="966" height="600" loading="lazy">
</div>
</div> </div>
<h2 class="display-4">Official Themes</h2>
<p class="lead lead-lg mw-md-75 mx-auto"> <div class="row mb-5 pb-md-4 align-items-center">
Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins, docs, and build tools. <div class="col-md-5">
</p> <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
<a class="btn btn-lg btn-outline-primary mb-4" href="{{ .Site.Params.themes }}">Browse themes</a> {{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
<div class="mx-5 border-bottom"> </div>
<img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png, <h2 class="display-5 font-weight-normal">Official Themes</h2>
/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes@2x.png 2x" <p class="lead font-weight-normal">
src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png" Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>.
alt="Bootstrap Themes" </p>
width="500" height="200" <p>
loading="lazy"> Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
</p>
<a href="{{ .Site.Params.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
</div>
<div class="col-md-7 pl-md-5">
<img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png,
/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"
src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png"
alt="Bootstrap Icons" width="700" height="500" loading="lazy">
</div>
</div> </div>
</div> </div>

View File

@ -1,23 +1,19 @@
<main class="bd-masthead mb-3 mb-md-5 border-bottom" id="content"> <main class="bd-masthead mb-3 mb-md-5" id="content">
<div class="container"> <div class="container px-4 px-md-3">
<div class="row"> <div class="row">
<div class="col-6 mx-auto col-md-4 order-md-2 col-lg-5"> <div class="col-6 mx-auto col-md-4 order-md-2 col-lg-5">
{{ partial "icons/bootstrap-stack.svg" (dict "class" "img-fluid mb-3 mb-md-0" "width" "512" "height" "430") }} {{ partial "icons/bootstrap-stack.svg" (dict "class" "img-fluid mb-3 mb-md-0" "width" "512" "height" "430") }}
</div> </div>
<div class="col-md-8 order-md-1 col-lg-6 text-center text-md-left"> <div class="col-md-8 order-md-1 col-lg-7 text-center text-md-left">
<h1 class="mb-3 bd-text-purple-bright">Bootstrap</h1> <h1 class="mb-3">Build fast, responsive sites with Bootstrap</h1>
<p class="lead lead-lg"> <p class="lead mb-4">
Build responsive, mobile-first projects for the web with the worlds most popular open source front-end component library. Quickly design and customize responsive mobile-first sites with Bootstrap, the worlds most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
</p>
<p class="mb-4">
Quickly prototype your ideas, spin up internal tools, or build your entire production app or site with powerful features and customization like Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
</p> </p>
<div class="d-flex flex-column flex-md-row"> <div class="d-flex flex-column flex-md-row">
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" class="btn btn-lg btn-bd-primary w-100 mb-3 mr-md-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a> <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" class="btn btn-lg btn-bd-primary mb-3 mr-md-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="btn btn-lg btn-outline-secondary w-100 mb-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ .Site.Params.current_version }}');">Download</a> <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="btn btn-lg btn-outline-secondary mb-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ .Site.Params.current_version }}');">Download</a>
</div> </div>
<hr class="half-rule">
<p class="text-muted mb-0"> <p class="text-muted mb-0">
Currently <strong>v{{ .Site.Params.current_version }}</strong> Currently <strong>v{{ .Site.Params.current_version }}</strong>
<span class="px-1">&middot;</span> <span class="px-1">&middot;</span>

View File

@ -0,0 +1,4 @@
<svg{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} focusable="false" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M0 6a6 6 0 1112 0A6 6 0 010 6z"/>
<path d="M12.93 5h1.57a.5.5 0 01.5.5v9a.5.5 0 01-.5.5h-9a.5.5 0 01-.5-.5v-1.57a6.953 6.953 0 01-1-.22v1.79A1.5 1.5 0 005.5 16h9a1.5 1.5 0 001.5-1.5v-9A1.5 1.5 0 0014.5 4h-1.79c.097.324.17.658.22 1z"/>
</svg>

After

Width:  |  Height:  |  Size: 483 B

View File

@ -0,0 +1,3 @@
<svg{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} focusable="false" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3.5 13a3.5 3.5 0 11.59-6.95 5.002 5.002 0 119.804 1.98A2.5 2.5 0 0113.5 13h-10z" clip-rule="evenodd"/>
</svg>

After

Width:  |  Height:  |  Size: 370 B

View File

@ -0,0 +1,3 @@
<svg{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} focusable="false" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.854 4.146a.5.5 0 010 .708L2.707 8l3.147 3.146a.5.5 0 01-.708.708l-3.5-3.5a.5.5 0 010-.708l3.5-3.5a.5.5 0 01.708 0zm4.292 0a.5.5 0 000 .708L13.293 8l-3.147 3.146a.5.5 0 00.708.708l3.5-3.5a.5.5 0 000-.708l-3.5-3.5a.5.5 0 00-.708 0z" clip-rule="evenodd"/>
</svg>

After

Width:  |  Height:  |  Size: 522 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }} fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 32 32"><title>{{ with .title }}{{ . }}{{ else }}Download{{ end }}</title><path d="M9 22c-9 1-8-10 0-9C6 2 23 2 22 10c10-3 10 13 1 12m-12 4l5 4 5-4m-5-10v14"/></svg>

Before

Width:  |  Height:  |  Size: 462 B

View File

@ -0,0 +1,3 @@
<svg{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} focusable="false" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 16a6 6 0 006-6c0-1.655-1.122-2.904-2.432-4.362C10.254 4.176 8.75 2.503 8 0c0 0-6 5.686-6 10a6 6 0 006 6zM6.646 4.646c-.376.377-1.272 1.489-2.093 3.13l.894.448c.78-1.559 1.616-2.58 1.907-2.87l-.708-.708z" clip-rule="evenodd"/>
</svg>

After

Width:  |  Height:  |  Size: 495 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }} fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 32 32"><title>{{ with .title }}{{ . }}{{ else }}Import{{ end }}</title><path d="M28 22v8H4v-8M16 4v20m-8-8l8 8 8-8"/></svg>

Before

Width:  |  Height:  |  Size: 421 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }} fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 32 32"><title>{{ with .title }}{{ . }}{{ else }}Lightning{{ end }}</title><path d="M18 13l8-11L8 13l6 6-8 11 18-11z"/></svg>

Before

Width:  |  Height:  |  Size: 422 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 151 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 239 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 79 KiB

After

Width:  |  Height:  |  Size: 272 KiB