0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-04 16:24:22 +01:00
Bootstrap/site/layouts/partials/home/get-started.html

59 lines
4.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.

<div class="col-lg-7 mx-auto pb-3 mb-3 mb-md-5 text-md-center">
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-violet-rgb);">
<svg class="bi fs-1"><use xlink:href="#code"></use></svg>
</div>
<h2 class="display-5 mb-3 fw-semibold lh-sm">Get started any way you&nbsp;want</h2>
<p class="lead fw-normal">
Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.
</p>
<p class="d-flex justify-content-md-start justify-content-md-center lead fw-normal">
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="icon-link icon-link-hover fw-semibold ps-md-4">
Read installation docs
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
</a>
</p>
</div>
<section class="row g-3 g-md-5 mb-5 pb-5 justify-content-center">
<div class="col-lg-6 py-lg-4 pe-lg-5">
<svg class="bi mb-2 fs-2 text-body-secondary"><use xlink:href="#box-seam"></use></svg>
<h3 class="fw-semibold">Install via package manager</h3>
<p class="pe-lg-5">
Install Bootstraps source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package managed installs dont include documentation or our full build scripts. You can also <a href="https://github.com/twbs/examples/">use any demo from our Examples repo</a> to quickly jumpstart Bootstrap projects.
</p>
{{ highlight (printf ("npm install bootstrap@%s") .Site.Params.current_version) "sh" "" }}
{{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }}
<p>
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Read our installation docs</a> for more info and additional package managers.
</p>
</div>
<div class="col-lg-6 py-lg-4 ps-lg-5 border-lg-start">
<svg class="bi mb-2 fs-2 text-body-secondary"><use xlink:href="#globe2"></use></svg>
<h3 class="fw-semibold">Include via CDN</h3>
<p class="pe-lg-5">
When you only need to include Bootstraps compiled CSS or JS, you can use <a href="https://www.jsdelivr.com/package/npm/bootstrap">jsDelivr</a>. See it in action with our simple <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#quick-start">quick start</a>, or <a href="/docs/{{ .Site.Params.docs_version }}/examples/">browse the examples</a> to jumpstart your next project. You can also choose to include Popper and our JS <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#separate">separately</a>.
</p>
{{ highlight (printf (`<link href="%s" rel="stylesheet" integrity=%q crossorigin="anonymous">`) .Site.Params.cdn.css (.Site.Params.cdn.css_hash | safeHTMLAttr)) "html" "" }}
{{ highlight (printf (`<script src="%s" integrity=%q crossorigin="anonymous"></script>`) .Site.Params.cdn.js_bundle (.Site.Params.cdn.js_bundle_hash | safeHTMLAttr)) "html" "" }}
</div>
<div class="col-md-8 mx-auto text-center">
<h4 class="fw-semibold">Read our getting started guides</h4>
<p>Get a jump on including Bootstrap's source files in a new project with our official guides.</p>
<div class="d-flex flex-wrap align-items-center justify-content-center gap-4 mt-4">
<a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/webpack">
<img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/webpack.svg" alt="" width="72" height="72" loading="lazy">
<span class="text-body-secondary">Webpack</span>
</a>
<a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/parcel">
<img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/parcel.png" alt="" width="72" height="72" loading="lazy">
<span class="text-body-secondary">Parcel</span>
</a>
<a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/vite">
<img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/vite.svg" alt="" width="72" height="72" loading="lazy">
<span class="text-body-secondary">Vite</span>
</a>
</div>
</div>
</section>