0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-12 00:08:59 +01:00
Bootstrap/site/index.html
2019-10-08 08:49:29 +03:00

90 lines
4.6 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.

---
layout: home
---
<main class="bd-masthead" id="content" role="main">
<div class="container">
<div class="row">
<div class="col-6 mx-auto col-md-6 order-md-2">
{% include icons/bootstrap-stack.svg width="512" height="430" class="img-fluid mb-3 mb-md-0" %}
</div>
<div class="col-md-6 order-md-1 text-center text-md-left pr-md-5">
<h1 class="mb-3 bd-text-purple-bright">Bootstrap</h1>
<p class="lead">
Build responsive, mobile-first projects on the web with the worlds most popular 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 on jQuery.
</p>
<div class="row mx-n2">
<div class="col-md px-2">
<a href="{{ site.baseurl }}/docs/{{ site.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="{{ site.baseurl }}/docs/{{ site.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.current_version }}');">Download</a>
</div>
</div>
<p class="text-muted mb-0">
Currently v{{ site.current_version }}
</p>
</div>
</div>
{% include ads.html %}
</div>
</main>
<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 -->
{% include icons/import.svg width="32" height="32" class="text-primary mb-2" %}
<h3>Installation</h3>
<p>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>
{% highlight sh %}
npm install bootstrap
{% endhighlight %}
{% highlight sh %}
gem install bootstrap -v {{ site.current_ruby_version }}
{% endhighlight %}
<hr class="half-rule">
<a class="btn btn-outline-primary" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/">Read installation 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 -->
{% include icons/download.svg width="32" height="32" class="text-primary mb-2" %}
<h3>BootstrapCDN</h3>
<p>When you only need to include Bootstraps compiled CSS or JS, you can use <a href="https://www.bootstrapcdn.com/">BootstrapCDN</a>.</p>
<h5>CSS only</h5>
{% highlight html %}
<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
{% endhighlight %}
<h5>JS, Popper.js, and jQuery</h5>
{% highlight html %}
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
<script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script>
<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
{% endhighlight %}
<hr class="half-rule">
<a class="btn btn-outline-primary" href="{{ site.baseurl }}/docs/{{ site.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 -->
{% include icons/lightning.svg width="32" height="32" class="text-primary mb-2" %}
<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="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png,
{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"
src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png" alt="Bootstrap Themes" width="500" height="200">
<hr class="half-rule">
<a href="{{ site.themes }}/" class="btn btn-outline-primary">Browse themes</a>
</div>
</div>