mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 00:59:51 +02:00
Code Issues Releases Wiki Activity

v5: Forms update (#28450)

Browse Source 
* Initial spike of consolidated form checks

* Stub out forms rearrangement

- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS

* Move input group Sass file to forms subdir

* Start to split and move the docs around

* Simpler imports

* Copyediting

* delete overview file

* Remove commented out code

* remove the custom-forms import

* rewrite flex-check as form-check, replace all custom properties

* Remove old forms doc

* stub out new subpage link section

* update migration guide

* Update nav, forms overview in page nav, and descriptions

* fix check bg position

* fix margin-top calculation

* rename .custom-select to .form-select

* Update validation styles for new checks

* add some vertical margin, fix inline checks

* fix docs examples

* better way to do this contents stuff, redo the toc while i'm at it

* page restyle for docs while here

* un-callout that, edit text

* redo padding on toc

* fix toc

* start to cleanup checks docs

* Rewrite Markdown tables into HTML

* Redesign tables, redo their docs

* Replace Open Iconic icons with custom Bootstrap icons

* Redesign the docs navbar, add a subheader, redo the sidebar

* Redesign docs homepage a bit

* Simplify table style overrides for docs tables

* Simplify docs typography for page titles and reading line length

* Stub out icons page

* Part of sidebar update, remove migration from nav.yml

* Move toc CSS to separate partial

* Change appearance of overview page

* fix sidebar arrow direction

* Add footer to docs layout

* Update descriptions

* Drop the .form-group class for margin utilities

* Remove lingering form-group-margin-bottom var

* improve footer spacing

* add headings to range page

* uncomment form range css

* Rename .custom-range to .form-range

* Drop unused docs var

* Uncomment the comment

* Remove unused variable

* Fix radio image sizing

* Reboot update: reset horizontal ul and ol padding

* de-dupe IDs

* tweak toc styles

* nvm, fix dropdown versions stuff

* remove sidebar nav toggle for now

* broken html

* fix more broken html, move css

* scss linting

* comment out broken helper docs

* scope styles

* scope styles

* Fixes #25540 and fixes #26407 for v5 only

* Update sidebar once more

* Match new sidenav order

* fix syntax error

* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696

* rename back

* fix size and alignment

* rename that back too
This commit is contained in:
Mark Otto
2019-07-12 16:52:33 -05:00
committed by GitHub
parent 50f97710eb
commit aaf03bdc9e
66 changed files with 3162 additions and 2918 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
site/layouts/_default/docs.html
View File

@@ -8,27 +8,59 @@
{{ partial "docs-navbar" . }}
<div class="container-fluid">
<nav class="bd-subnavbar pt-2 pb-3 pb-md-2 mb-4">
<div class="container d-flex align-items-md-center flex-column flex-md-row">
<div class="d-flex align-items-center mb-2 mb-md-0 mr-md-auto">
<a class="link-dark" href="/" onclick="ga('send', 'event', 'Subnav', 'click', 'Bootstrap');">Bootstrap</a>
{{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
<a class="link-dark" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Subnav', 'click', 'Documentation');">Documentation</a>
{{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
{{ partial "docs-versions" . }}
</div>
<form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="{{ .Site.Params.docs_version }}">
</form>
</div>
</nav>
<div class="container">
<div class="row flex-xl-nowrap">
<div class="col-md-3 col-xl-2 bd-sidebar">
<div class="col-md-3 bd-sidebar">
{{ partial "docs-sidebar" . }}
</div>
{{ if (eq .Page.Params.toc true) }}
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
{{ .TableOfContents }}
</nav>
{{ end }}
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<main class="col-md-9 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
<p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
{{ partial "ads" . }}
{{ if .Page.Params.sections }}
<div class="row my-5">
{{ range .Page.Params.sections }}
<div class="col-md-6 mb-4">
<a class="d-block text-decoration-none" href="../{{ urlize .title }}/">
<strong class="d-block h5 mb-0">{{ .title }}</strong>
<span class="text-secondary">{{ .description }}</span>
</a>
</div>
{{ end }}
</div>
{{ end }}
{{ if (eq .Page.Params.toc true) }}
<strong class="d-block h3 mt-5 mb-3">On this page</strong>
<nav class="bd-toc mb-5" aria-label="Secondary navigation">
{{ .TableOfContents }}
</nav>
{{ end }}
{{ .Content }}
</main>
</div>
</div>
{{ partial "footer" . }}
{{ partial "scripts" . }}
</body>
</html>

25
site/layouts/_default/single.html
View File

@@ -8,8 +8,23 @@
{{ partial "docs-navbar" . }}
<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
<div class="pt-md-3 pb-md-4">
<nav class="bd-subnavbar pt-2 pb-3 pb-md-2 mb-4">
<div class="container d-flex align-items-md-center flex-column flex-md-row">
<div class="d-flex align-items-center mb-2 mb-md-0 mr-md-auto">
<a class="link-dark" href="/" onclick="ga('send', 'event', 'Subnav', 'click', 'Bootstrap');">Bootstrap</a>
{{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
<a class="link-dark" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Subnav', 'click', 'Documentation');">Documentation</a>
{{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
{{ partial "docs-versions" . }}
{{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
<span class="text-muted">Examples</span>
</div>
{{ partial "docs-search" . }}
</div>
</nav>
<header class="d-flex flex-column flex-md-row align-items-md-center p-5 border-bottom">
<div class="container pt-md-1 pb-md-4">
<h1 class="bd-title mt-0">{{ .Title | markdownify }}</h1>
<p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
{{ if eq .Title "Examples" }}
@@ -19,8 +34,10 @@
{{ partial "ads" . }}
</header>
<main class="bd-content p-5" id="content" role="main">
{{ .Content }}
<main class="bd-content py-5" id="content" role="main">
<div class="container">
{{ .Content }}
</div>
</main>
{{ partial "footer" . }}

24
site/layouts/partials/docs-navbar.html
View File

@@ -1,6 +1,7 @@
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<div class="container" style="padding: 0 15px;">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
{{ partial "icons/bootstrap.svg" (dict "class" "d-block" "width" "36" "height" "36") }}
{{ partial "icons/bootstrap-logo-solid.svg" (dict "class" "d-block" "width" "32" "height" "32") }}
</a>
<div class="navbar-nav-scroll">
@@ -9,7 +10,7 @@
<a class="nav-link{{ if .IsHome }} active{{ end }}" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
</li>
<li class="nav-item">
<a class="nav-link{{ if eq .Page.Layout "docs" }} active{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
<a class="nav-link{{ if eq .Page.Layout "docs" }} active{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
</li>
<li class="nav-item">
<a class="nav-link{{ if eq .Page.Title "Examples" }} active{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
@@ -27,24 +28,6 @@
</div>
<ul class="navbar-nav ml-md-auto">
<li class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-expanded="false">
v{{ .Site.Params.docs_version }}
</a>
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
<a class="dropdown-item active" href="/docs/{{ .Site.Params.docs_version }}/">Latest (4.3.x)</a>
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/docs/versions/">All versions</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="{{ .Site.Params.repo }}" target="_blank" rel="noopener" aria-label="GitHub">
{{ partial "icons/github.svg" (dict "class" "navbar-nav-svg" "width" "36" "height" "36") }}
@@ -68,4 +51,5 @@
</ul>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Download</a>
</div>
</header>

3
site/layouts/partials/docs-search.html Normal file
View File

@@ -0,0 +1,3 @@
<form role="search" class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search v{{ .Site.Params.docs_version }} docs..." aria-label="Search for..." autocomplete="off" data-docs-version="{{ .Site.Params.docs_version }}">
</form>

31
site/layouts/partials/docs-sidebar.html
View File

@@ -1,14 +1,8 @@
<form role="search" class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="{{ .Site.Params.docs_version }}">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
{{ partial "icons/menu.svg" (dict "width" "30" "height" "30") }}
</button>
</form>
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation">
<nav class="collapse bd-links pb-3" id="bd-docs-nav" aria-label="Main navigation">
{{- $url := split .Permalink "/" -}}
{{- $page_slug := index $url (sub (len $url) 2) -}}
<ul class="list-unstyled">
{{- range $group := .Site.Data.nav -}}
{{- $link := $group.title -}}
{{- $link_slug := $link | urlize -}}
@@ -21,13 +15,14 @@
{{- $group_slug := $group.title | urlize -}}
{{- $active_group := eq $.Page.Params.group $group_slug }}
<div class="bd-toc-item{{ if $active_group }} active{{ end }}">
<a class="bd-toc-link" href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/{{ if $group.pages }}{{ $link_slug }}/{{ end }}">
{{- $group.title -}}
<li class="bd-sidenav-group my-1{{ if $active_group }} active{{ end }} js-sidenav-group">
<a class="d-inline-flex align-items-center bd-sidenav-group-link" href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/{{ if $group.pages }}{{ $link_slug }}/{{ end }}">
<svg class="bd-sidenav-group-link-icon" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke="currentColor" stroke-width="2" d="M5 14l6-6-6-6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
<div>{{- $group.title -}}</div>
</a>
{{- if and $active_group $group.pages }}
<ul class="nav bd-sidenav">
{{- if $group.pages }}
<ul class="nav bd-sidenav mb-2">
{{- range $doc := $group.pages -}}
{{- $doc_slug := $doc.title | urlize }}
<li{{ if and $active_group (eq $page_slug $doc_slug) }} class="active bd-sidenav-active"{{ end }}>
@@ -38,6 +33,12 @@
{{- end }}
</ul>
{{- end }}
</div>
{{- end }}
</li>
{{- end }}
<li class="my-3 mx-4 border-top"></li>
<li class="bd-sidenav-group pl-3">
<a class="d-inline-flex bd-sidenav-group-link" href="/migration">Migration</a>
</li>
</ul>
</nav>

19
site/layouts/partials/docs-versions.html Normal file
View File

@@ -0,0 +1,19 @@
<div class="dropdown">
<button class="btn btn-link dropdown-toggle p-0 link-dark" id="bd-versions" data-toggle="dropdown" aria-expanded="false">
v{{ .Site.Params.docs_version }}
</button>
<div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
<a class="dropdown-item active" href="/docs/{{ .Site.Params.docs_version }}/">Latest (5.0.x)</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/docs/{{ .Site.Params.docs_version }}/">v4.3.1</a>
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/docs/versions/">All versions</a>
</div>
</div>

4
site/layouts/partials/footer.html
View File

@@ -1,5 +1,5 @@
<footer class="bd-footer text-muted">
<div class="container-fluid p-3 p-md-5">
<footer class="bd-footer p-3 p-md-5 mt-5 text-muted">
<div class="container">
<ul class="bd-footer-links">
<li><a href="{{ .Site.Params.repo }}">GitHub</a></li>
<li><a href="https://twitter.com/{{ .Site.Params.twitter }}">Twitter</a></li>

127
site/layouts/partials/home/masthead-followup.html
View File

@@ -1,46 +1,103 @@
<div class="masthead-followup row m-0 border border-white">
<div class="col-md-4 p-3 p-md-5 bg-light border border-white">
{{ "<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->" | safeHTML }}
{{ partial "icons/import.svg" (dict "class" "text-primary mb-2" "width" "32" "height" "32") }}
<h3>Installation</h3>
<p>Include Bootstrap’s source Sass and JavaScript files via npm, Composer or Meteor. Package managed installs don’t include documentation, but do include our build system and readme.</p>
{{ "<!-- Icons by Bytesize https://github.com/danklammer/bytesize-icons -->" | safeHTML }}
{{ highlight "npm install bootstrap" "sh" "" }}
{{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }}
<hr class="half-rule">
<a class="btn btn-outline-primary" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Read installation docs</a>
<div class="container py-5 my-5 text-center">
<div class="home-icon home-icon-blue mx-auto mb-3">
{{ partial "icons/import.svg" (dict "width" "3rem" "height" "3rem") }}
</div>
<h2 class="display-4">Installation</h2>
<p class="lead lead-lg mw-md-75 mx-auto">
Include Bootstrap’s source Sass and JavaScript files via npm, Composer, or Meteor. Package managed installs don’t include documentation, but do include our build system and readme.
</p>
<a class="btn btn-lg btn-outline-primary mb-4" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Read installation docs</a>
<div class="text-left mx-md-5 px-md-5">
{{ highlight "npm install bootstrap" "sh" "" }}
{{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }}
</div>
</div>
<div class="col-md-4 p-3 p-md-5 bg-light border border-white">
{{ "<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->" | safeHTML }}
{{ partial "icons/download.svg" (dict "class" "text-primary mb-2" "width" "32" "height" "32") }}
<h3>BootstrapCDN</h3>
<p>When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.bootstrapcdn.com/">BootstrapCDN</a>.</p>
<div class="container py-5 my-5 text-center">
<div class="home-icon home-icon-purple mx-auto mb-3">
{{ partial "icons/download.svg" (dict "width" "3rem" "height" "3rem") }}
</div>
<h2 class="display-4">BootstrapCDN</h2>
<p class="lead lead-lg mw-md-75 mx-auto">
Use the <a href="https://bootstrapcdn.com/">BootstrapCDN</a> to deliver fast, cached, and compiled versions of Bootstrap’s 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 }}/layout/overview/">Explore the docs</a>
<div class="text-left mx-md-5 px-md-5">
<h5>CSS only</h5>
{{ highlight (printf (`<link rel="stylesheet" href="%s" integrity="%s" crossorigin="anonymous">`) .Site.Params.cdn.css .Site.Params.cdn.css_hash) "html" "" }}
<h5>JS and Popper.js</h5>
{{ highlight (printf (`<script src="%s" integrity="%s" crossorigin="anonymous"></script>
<script src="%s" integrity="%s" crossorigin="anonymous"></script>
`) .Site.Params.cdn.popper .Site.Params.cdn.popper_hash .Site.Params.cdn.js .Site.Params.cdn.js_hash) "html" "" }}
<hr class="half-rule">
<a class="btn btn-outline-primary" href="/docs/{{ .Site.Params.docs_version }}/layout/overview/">Explore the docs</a>
</div>
<div class="col-md-4 p-3 p-md-5 bg-light border border-white">
{{ "<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->" | safeHTML }}
{{ partial "icons/lightning.svg" (dict "class" "text-primary mb-2" "width" "32" "height" "32") }}
<h3>Official Themes</h3>
<p>
Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins, docs, and build tools.
</p>
<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 Themes" width="500" height="200">
<hr class="half-rule">
<a href="{{ .Site.Params.themes }}/" class="btn btn-outline-primary">Browse themes</a>
</div>
</div>
<div class="container py-5 my-5 text-center">
<div class="home-icon home-icon-yellow mx-auto mb-3">
{{ partial "icons/lightning.svg" (dict "width" "3rem" "height" "3rem") }}
</div>
<h2 class="display-4">Official Themes</h2>
<p class="lead lead-lg mw-md-75 mx-auto">
Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins, docs, and build tools.
</p>
<a class="btn btn-lg btn-outline-primary mb-4" href="{{ .Site.Params.themes }}/">Browse themes</a>
<div class="mx-5 border-bottom">
<img class="img-fluid mt-3 mx-auto" src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes@2x.png" alt="Bootstrap Themes" width="600">
</div>
</div>
<div class="masthead-followup container d-none">
<div class="row py-5 mb-5">
<div class="col-md-5">
{{ "<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->" | safeHTML }}
{{ partial "icons/import.svg" (dict "class" "text-primary mb-2" "width" "32" "height" "32") }}
<h3>Installation</h3>
<p>Include Bootstrap’s source Sass and JavaScript files via npm, Composer, or Meteor. Package managed installs don’t include documentation, but do include our build system and readme.</p>
<hr class="half-rule">
<a class="btn btn-outline-primary" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Read installation docs</a>
</div>
<div class="col-md-6 offset-md-1">
{{ highlight "npm install bootstrap" "sh" "" }}
{{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }}
</div>
</div>
<div class="row pb-5 mb-5">
<div class="col-md-6">
{{ "<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->" | safeHTML }}
{{ partial "icons/download.svg" (dict "class" "text-primary mb-2" "width" "32" "height" "32") }}
<h3>BootstrapCDN</h3>
<p>Use the <a href="https://bootstrapcdn.com/">BootstrapCDN</a> to deliver fast, cached, and compiled versions of Bootstrap’s CSS and JavaScript. No jQuery is required, but don't forget to include Popper.js for some components.</p>
<hr class="half-rule">
<a class="btn btn-outline-primary" href="/docs/{{ .Site.Params.docs_version }}/layout/overview/">Explore the docs</a>
</div>
<div class="col-md-6">
<h5>CSS only</h5>
{{ highlight (printf (`<link rel="stylesheet" href="%s" integrity="%s" crossorigin="anonymous">`) .Site.Params.cdn.css .Site.Params.cdn.css_hash) "html" "" }}
<h5>JS and Popper.js</h5>
{{ highlight (printf (`<script src="%s" integrity="%s" crossorigin="anonymous"></script>
<script src="%s" integrity="%s" crossorigin="anonymous"></script>
`) .Site.Params.cdn.popper .Site.Params.cdn.popper_hash .Site.Params.cdn.js .Site.Params.cdn.js_hash) "html" "" }}
</div>
</div>
<div class="row pb-5 mb-5">
<div class="col-md-6">
{{ "<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->" | safeHTML }}
{{ partial "icons/lightning.svg" (dict "class" "text-primary mb-2" "width" "32" "height" "32") }}
<h3>Official Themes</h3>
<p>
Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins, docs, and build tools.
</p>
<hr class="half-rule">
<a href="{{ .Site.Params.themes }}/" class="btn btn-outline-primary">Browse themes</a>
</div>
<div class="col-md-6">
<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 Themes" width="500" height="200">
</div>
</div>
</div>

32
site/layouts/partials/home/masthead.html
View File

@@ -1,27 +1,27 @@
<main class="bd-masthead" id="content" role="main">
<main class="bd-masthead mb-5 border-bottom" id="content" role="main">
<div class="container">
<div class="row align-items-center">
<div class="col-6 mx-auto col-md-6 order-md-2">
<div class="row align-items-start">
<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") }}
</div>
<div class="col-md-6 order-md-1 text-center text-md-left pr-md-5">
<div class="col-md-7 order-md-1 col-lg-6 text-center text-md-left">
<h1 class="mb-3 bd-text-purple-bright">Bootstrap</h1>
<p class="lead">
Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
<p class="lead lead-lg">
Build responsive, mobile-first projects for the web with the world’s most popular open source front-end component library.
</p>
<p class="lead mb-4">
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built with VanillaJS.
<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>
<div class="row mx-n2">
<div class="col-md px-2">
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" class="btn btn-lg btn-bd-primary w-100 mb-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
</div>
<div class="col-md px-2">
<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>
</div>
<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/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>
</div>
<hr class="half-rule">
<p class="text-muted mb-0">
Currently v{{ .Site.Params.current_version }}
Currently <strong>v{{ .Site.Params.current_version }}</strong>
<span class="px-1">&middot;</span>
<a href="" class="text-muted">Previous releases</a>
</p>
</div>
</div>

1
site/layouts/partials/icons/booticon-chevron-right.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 16 16" role="img"><path stroke="currentColor" stroke-width="2" d="M5 14l6-6-6-6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 349 B

1
site/layouts/partials/icons/bootstrap-logo-solid.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 64 64" role="img"><title>{{ with .title }}{{ . }}{{ else }}Bootstrap{{ end }}</title><path d="M16 0h32c8.837 0 16 7.163 16 16v32c0 8.837-7.163 16-16 16H16C7.163 64 0 56.837 0 48V16C0 7.163 7.163 0 16 0zm18.14 49c7.22 0 11.555-3.633 11.555-9.586 0-4.406-3.047-7.664-7.617-8.133v-.398c3.328-.563 5.93-3.727 5.93-7.266 0-5.203-3.82-8.437-10.172-8.437H20.242V49h13.899zm-8.648-29.367h7.125c3.89 0 6.164 1.828 6.164 4.945 0 3.211-2.414 4.922-7.054 4.922h-6.235v-9.867zm0 24.914V33.648h7.29c4.945 0 7.546 1.852 7.546 5.391 0 3.586-2.508 5.508-7.242 5.508h-7.594z" fill="currentColor" fill-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 787 B