mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-20 20:00:36 +03:00
v4: Update homepage, examples, and general docs styles
- Refreshes the look and feel of the homepage with fresh colors, new content, and simplified styles. - Updates docs button styles - Replaces bytesize icons with Bootstrap icons - Adds themes callout to examples page
This commit is contained in:
Mark Otto
+88
-52
@@ -5,24 +5,17 @@ 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">
|
||||
<div class="col-6 mx-auto col-md-4 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 world’s most popular front-end component library.
|
||||
</p>
|
||||
<div class="col-md-8 order-md-1 text-center text-md-left pr-md-5">
|
||||
<h1 class="mb-3">Build fast, responsive sites with Bootstrap</h1>
|
||||
<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.
|
||||
Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
|
||||
</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 class="d-flex flex-column flex-md-row">
|
||||
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/" class="btn btn-lg btn-bd-primary mb-3 mr-md-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
|
||||
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/" class="btn btn-lg btn-outline-secondary mb-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download</a>
|
||||
</div>
|
||||
<p class="text-muted mb-0">
|
||||
Currently v{{ site.current_version }}
|
||||
@@ -33,57 +26,100 @@ layout: home
|
||||
</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 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>
|
||||
|
||||
<div class="masthead-followup">
|
||||
<div class="container">
|
||||
<div class="row mb-5 pb-md-4 align-items-center">
|
||||
<div class="col-md-5">
|
||||
<div class="masthead-followup-icon d-inline-block mb-2 text-white bg-success">
|
||||
{% include icons/code.svg width="32" height="32" class="masthead-followup-svg" %}
|
||||
</div>
|
||||
<h2>Installation</h2>
|
||||
<p class="lead font-weight-normal">
|
||||
Install Bootstrap’s source Sass and JavaScript files via npm, Composer, or Meteor.
|
||||
</p>
|
||||
<p>Package managed installs don’t include documentation, but do include our build system and readme. You can also <a href="https://github.com/twbs/bootstrap-npm-starter">use our npm template repo</a> to quickly generate a Bootstrap project via npm.</p>
|
||||
<a class="btn btn-lg btn-outline-primary mb-3" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/">Read installation docs</a>
|
||||
</div>
|
||||
<div class="col-md-7 pl-md-5">
|
||||
{% highlight sh %}
|
||||
# Via npm
|
||||
npm install bootstrap
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight sh %}
|
||||
# Via gem
|
||||
gem install bootstrap -v {{ site.current_ruby_version }}
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 Bootstrap’s compiled CSS or JS, you can use <a href="https://www.bootstrapcdn.com/">BootstrapCDN</a>.</p>
|
||||
|
||||
<h5>CSS only</h5>
|
||||
<div class="row mb-5 pb-md-4 align-items-center">
|
||||
<div class="col-md-5">
|
||||
<div class="masthead-followup-icon d-inline-block mb-2 text-white bg-primary">
|
||||
{% include icons/cloud-fill.svg width="32" height="32" class="masthead-followup-svg" %}
|
||||
</div>
|
||||
<h2>BootstrapCDN</h2>
|
||||
<p class="lead font-weight-normal">
|
||||
When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.bootstrapcdn.com/">BootstrapCDN</a>.
|
||||
</p>
|
||||
<p>
|
||||
See it in action with our simple <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/#starter-template">starter template</a>, or <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/">browse the examples</a> to jumpstart your next project.
|
||||
</p>
|
||||
<a class="btn btn-lg btn-outline-primary mb-3" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/layout/overview/">Explore the docs</a>
|
||||
</div>
|
||||
<div class="col-md-7 pl-md-5">
|
||||
{% highlight html %}
|
||||
<!-- CSS only -->
|
||||
<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
|
||||
{% endhighlight %}
|
||||
|
||||
<h5>JS, Popper.js, and jQuery</h5>
|
||||
{% highlight html %}
|
||||
<!-- JS, Popper.js, and jQuery -->
|
||||
<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>
|
||||
</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 class="row mb-5 pb-md-4 align-items-center">
|
||||
<div class="col-md-5">
|
||||
<div class="masthead-followup-icon d-inline-block mb-2 text-white bd-bg-purple-bright">
|
||||
{% include icons/circle-square.svg width="32" height="32" class="masthead-followup-svg" %}
|
||||
</div>
|
||||
<h2>Bootstrap Icons</h2>
|
||||
<p class="lead font-weight-normal">
|
||||
For the first time ever, Bootstrap has its own open source SVG icon library, designed to work best with our components and documentation.
|
||||
</p>
|
||||
<p>
|
||||
Bootstrap Icons are designed to work best with Bootstrap components, but they’ll work in any project. They’re SVGs, so they scale quickly and easily, can be implmented in several ways, and can be styled with CSS.
|
||||
</p>
|
||||
<a href="{{ site.icons }}" class="btn btn-lg btn-outline-primary mb-3">Get Bootstrap Icons</a>
|
||||
</div>
|
||||
<div class="col-md-7 pl-md-5">
|
||||
<img class="img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons.png,
|
||||
{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons@2x.png 2x"
|
||||
src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons.png"
|
||||
alt="Bootstrap Icons" width="966" height="600">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-5 pb-md-4 align-items-center">
|
||||
<div class="col-md-5">
|
||||
<div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
|
||||
{% include icons/droplet-fill.svg width="32" height="32" class="masthead-followup-svg" %}
|
||||
</div>
|
||||
<h2>Official Themes</h2>
|
||||
<p class="lead font-weight-normal">
|
||||
Take Bootstrap to the next level with premium themes from the <a href="{{ site.themes }}">official Bootstrap Themes marketplace</a>.
|
||||
</p>
|
||||
<p>
|
||||
Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
|
||||
</p>
|
||||
<a href="{{ site.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
|
||||
</div>
|
||||
<div class="col-md-7 pl-md-5">
|
||||
<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="700" height="500">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user