mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-05 17:24:20 +01:00
ad518e2097
* docs(theming): apply utilities where possible * Update docs-sidebar.html Co-authored-by: XhmikosR <xhmikosr@gmail.com>
55 lines
3.3 KiB
HTML
55 lines
3.3 KiB
HTML
{{ "<!-- 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 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-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 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 }}/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>
|