mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-03 15:24:19 +01:00
aaf03bdc9e
* 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
104 lines
5.9 KiB
HTML
104 lines
5.9 KiB
HTML
{{ "<!-- Icons by Bytesize https://github.com/danklammer/bytesize-icons -->" | safeHTML }}
|
||
|
||
<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="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" "" }}
|
||
</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>
|