0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-05 17:24:20 +01:00
Bootstrap/site/layouts/partials/home/masthead-followup.html
Gaël Poupard ad518e2097
Apply utilities in docs styles (#30866)
* docs(theming): apply utilities where possible

* Update docs-sidebar.html

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-05-26 19:02:19 +03:00

55 lines
3.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{{ "<!-- Icons by Bytesize https://github.com/danklammer/bytesize-icons -->" | safeHTML }}
<div class="container py-3 my-3 py-md-5 my-md-5 text-center">
<div class="home-icon home-icon-blue text-white p-4 mx-auto mb-3">
{{ partial "icons/import.svg" (dict "width" "48" "height" "48") }}
</div>
<h2 class="display-4">Installation</h2>
<p class="lead lead-lg mw-md-75 mx-auto">
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>
<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-3 my-3 py-md-5 my-md-5 text-center">
<div class="home-icon home-icon-purple text-white p-4 mx-auto mb-3">
{{ partial "icons/download.svg" (dict "width" "48" "height" "48") }}
</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>
`) .Site.Params.cdn.popper (.Site.Params.cdn.popper_hash | safeHTMLAttr) .Site.Params.cdn.js (.Site.Params.cdn.js_hash | safeHTMLAttr)) "html" "" }}
</div>
</div>
<div class="container py-3 my-3 py-md-5 my-md-5 text-center">
<div class="home-icon home-icon-yellow text-white p-4 mx-auto mb-3">
{{ partial "icons/lightning.svg" (dict "width" "48" "height" "48") }}
</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" 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"
loading="lazy">
</div>
</div>