current_version: 3.0.3
repo: https://github.com/twbs/bootstrap
- download_source: https://github.com/twbs/bootstrap/archive/v3.0.3.zip
- download_dist: https://github.com/twbs/bootstrap/releases/download/v3.0.3/bootstrap-3.0.3-dist.zip
- download_sass: https://github.com/twbs/bootstrap-sass/archive/v3.0.3.0.tar.gz
+ download:
+ source: https://github.com/twbs/bootstrap/archive/v3.0.3.zip
+ dist: https://github.com/twbs/bootstrap/releases/download/v3.0.3/bootstrap-3.0.3-dist.zip
++ sass: https://github.com/twbs/bootstrap-sass/archive/v3.0.3.0.tar.gz
blog: http://blog.getbootstrap.com
expo: http://expo.getbootstrap.com
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
- <script src="{{ page.base_url }}dist/js/bootstrap.min.js"></script>
-
- <script src="{{ page.base_url }}docs-assets/js/holder.js"></script>
- <script src="{{ page.base_url }}docs-assets/js/zeroclipboard.min.js"></script>
-
- <script src="{{ page.base_url }}docs-assets/js/application.js"></script>
+ <script src="dist/js/bootstrap.min.js"></script>
-
+ <script src="assets/js/holder.js"></script>
-
+ <script src="assets/js/application.js"></script>
{% if page.slug == "customize" %}
- <script src="{{ page.base_url }}docs-assets/js/raw-files.js"></script>
- <script src="{{ page.base_url }}docs-assets/js/customize.js"></script>
+ <script src="assets/js/raw-files.js"></script>
+ <script src="assets/js/customize.js"></script>
{% endif %}
{% comment %}
</div>
- <!-- Footer
- ================================================== -->
- <footer class="bs-footer" role="contentinfo">
- <div class="container">
- {% include social-buttons.html %}
-
- <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
- <p>Maintained by the <a href="https://github.com/twbs?tab=members">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
- <p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
- <ul class="footer-links">
- <li>Currently v{{ site.current_version }}</li>
- <li class="muted">·</li>
- <li><a href="{{ site.baseurl }}2.3.2/">Bootstrap 2.3.2 docs</a></li>
- <li class="muted">·</li>
- <li><a href="{{ site.blog }}">Blog</a></li>
- <li class="muted">·</li>
- <li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
- <li class="muted">·</li>
- <li><a href="{{ site.repo }}/releases">Releases</a></li>
- </ul>
- </div>
- </footer>
-
<!-- JS and analytics only. -->
{% include footer.html %}
--
</body>
</html>
<!-- Page content of course! -->
{{ content }}
- <footer class="container" role="contentinfo">
- {% include ads.html %}
-
- {% include social-buttons.html %}
-
- <ul class="bs-masthead-links">
- <li class="current-version">
- Currently v{{ site.current_version }}
- </li>
- <li>
- <a href="{{ site.baseurl }}2.3.2/">Bootstrap 2.3.2 docs</a>
- </li>
- <li>
- <a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
- </li>
- <li>
- <a href="{{ site.baseurl }}getting-started/#examples" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
- </li>
- <li>
- <a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Expo</a>
- </li>
- <li>
- <a href="{{ site.blog }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Blog']);">Blog</a>
- </li>
- </ul>
- </footer>
-
<!-- JS and analytics only. -->
{% include footer.html %}
--
</body>
</html>
</div>
<p class="lead">Bootstrap's CSS is built on Less, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Those looking to use the source Less files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.</p>
- <p>Grid variables and mixins are covered <a href="{{ page.base_url }}css/#grid-less">within the Grid system section</a>.</p>
+ <p>Grid variables and mixins are covered <a href="{{ site.baseurl }}css/#grid-less">within the Grid system section</a>.</p>
+ <h2 id="less-bootstrap">Compiling Bootstrap</h2>
+ <p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source LESS files. To compile the LESS files, <a href="https://github.com/twbs/bootstrap#compiling-css-and-javascript">visit the README</a> for how to setup your development environment to run the necessary commands.</p>
+ <p>Third party compilation tools may work with Bootstrap, but they are not supported by our core team.</p>
+
<h2 id="less-variables">Variables</h2>
- <p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <a href="{{ page.base_url }}customize/#less-variables-section">the Customizer</a>.</p>
+ <p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <a href="{{ site.baseurl }}customize/#less-variables-section">the Customizer</a>.</p>
<h3 id="less-variables-colors">Colors</h3>
<p>Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.</p>
</div>
<p class="lead">Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
- <h3 id="download-compiled">Compiled CSS, JS, and fonts</h3>
- <p>The fastest way to get Bootstrap is to download the precompiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source code files are included.</p>
- <p><a class="btn btn-lg btn-primary" href="{{ site.download.dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);" role="button">Download Bootstrap</a></p>
-
- <h3 id="download-additional">Additional downloads</h3>
- <div class="bs-docs-dl-options">
- <h4>
- <a href="{{ site.download.source }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download source code</a>
- </h4>
- <p>Get the latest Bootstrap LESS and JavaScript source code by downloading it directly from GitHub.</p>
- <h4>
- <a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'GitHub project']);">Clone or fork via GitHub</a>
- </h4>
- <p>Visit us on GitHub to clone or fork the Bootstrap project.</p>
- <h4>
- Install with <a href="http://bower.io">Bower</a>
- </h4>
- <p>Install and manage Bootstrap's styles, JavaScript, and documentation using <a href="http://bower.io">Bower</a>.</p>
- {% highlight bash %}$ bower install bootstrap{% endhighlight %}
+ <div class="row bs-downloads">
+ <div class="col-sm-4">
+ <h3 id="download-bootstrap">Bootstrap</h3>
+ <p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
- <a href="{{ site.download_dist }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a>
++ <a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a>
+ </div>
+ <div class="col-sm-4">
+ <h3 id="download-source">Source code</h3>
+ <p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href="{{ site.repo }}#compiling-css-and-javascript">some setup.</a></strong></p>
- <a href="{{ site.download_source }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download source</a>
++ <a href="{{ site.download.source }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download source</a>
+ </div>
+ <div class="col-sm-4">
+ <h3 id="download-sass">Sass</h3>
+ <p><a href="{{ site.sass }}">Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p>
- <a href="{{ site.download_sass }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download Sass']);">Download Sass</a>
++ <a href="{{ site.download.sass }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download Sass']);">Download Sass</a>
+ </div>
</div>
<h3 id="download-cdn">Bootstrap CDN</h3>
<p>The folks over at <a href="http://www.maxcdn.com/">MaxCDN</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links.</p>
{% highlight html %}
<!-- Latest compiled and minified CSS -->
- <link rel="stylesheet" href="{{ site.cdn_css }}">
+ <link rel="stylesheet" href="{{ site.cdn.css }}">
<!-- Optional theme -->
- <link rel="stylesheet" href="{{ site.cdn_theme_css }}">
+ <link rel="stylesheet" href="{{ site.cdn.css_theme }}">
<!-- Latest compiled and minified JavaScript -->
- <script src="{{ site.cdn_js }}"></script>
+ <script src="{{ site.cdn.js }}"></script>
{% endhighlight %}
- <div class="bs-callout bs-callout-warning" id="callout-less-compilation">
- <h4>Compiling Bootstrap's LESS files</h4>
- <p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support <a href="http://twitter.github.io/recess/">Recess</a>, which is Twitter's CSS hinter based on <a href="http://lesscss.org">less.js</a>.</p>
- </div>
+ <h3 id="download-bower">Install with Bower</h3>
+ <p>Install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href="http://bower.io">Bower</a>.</p>
+ {% highlight bash %}$ bower install bootstrap{% endhighlight %}
</div>
<main class="bs-masthead" id="content" role="main">
<div class="container">
+ <span class="bs-booticon bs-booticon-lg">B</span>
<h1>Bootstrap</h1>
- <p class="lead">Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
- <p>
- <a href="{{ site.download.dist }}" class="btn btn-outline-inverse btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}']);">Download Bootstrap</a>
- <a href="{{ site.download.source }}" class="btn btn-outline-inverse btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version source }}']);">Download source</a>
+ <p class="lead">The most popular front-end framework for designing and building on the web.</p>
- <p class="lead"><a href="{{ page.base_url }}getting-started#download" class="btn btn-outline btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}']);">Download Bootstrap</a></p>
++ <p class="lead">
++ <a href="getting-started#download" class="btn btn-outline btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}']);">Download Bootstrap</a>
+ </p>
+ {% include ads.html %}
</div>
</main>
+
+
+<div class="bs-featurette">
+ <div class="container">
+ <h2 class="bs-featurette-title">Designed for everyone, everywhere.</h2>
+ <p class="lead">Bootstrap is a responsive and mobile first framework for faster and easier web development. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
+
+ <hr class="half-rule">
+
+ <div class="row">
+ <div class="col-sm-4">
+ <img src="docs-assets/img/sass-less.png" alt="Sass and Less support" class="img-responsive">
+ <h3>Preprocesors</h3>
+ <p>In addition to vanilla CSS, Bootstrap includes support for the two most popular CSS preprocessors, <a href="{{ page.base_url }}css#using-less">Less</a> and <a href="{{ page.base_url }}css#using-sass">Sass</a>.</p>
+ </div>
+ <div class="col-sm-4">
+ <img src="docs-assets/img/devices.png" alt="Responsive across devices" class="img-responsive">
+ <h3>One framework, every device.</h3>
+ <p>Bootstrap easily and efficiently scales your project from phones to tablets to desktops with a single CSS file.</p>
+ </div>
+ <div class="col-sm-4">
+ <img src="docs-assets/img/components.png" alt="Components" class="img-responsive">
+ <h3>Comprehensive docs</h3>
+ <p>With Bootstrap, you get extensive and beautiful documentation with hundreds of live examples, code snippets, and more.</p>
+ </div>
+ </div>
+
+ <hr class="half-rule">
+
+ <p class="lead">Bootstrap is an open source project, hosted and maintained on GitHub.</p>
+ <a href="{{ site.repo }}" class="btn btn-outline btn-lg">View the GitHub project</a>
+ </div>
+</div>
+
+<div class="bs-featurette">
+ <div class="container">
+ <h2 class="bs-featurette-title">Built with Bootstrap.</h2>
+ <p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="{{ site.url }}/getting-started/#examples">collection of examples</a> or by exploring some of our favorites from <a href="{{ site.expo }}">the Expo</a>.</p>
+
+ <hr class="half-rule">
+
+ <div class="row bs-featured-sites">
+ <div class="col-sm-3">
+ <a href="http://expo.getbootstrap.com/" class="bs-featurette-img">
+ <img src="http://expo.getbootstrap.com/screenshots/coinbase.jpg" alt="" class="img-responsive">
+ </a>
+ </div>
+ <div class="col-sm-3">
+ <a href="http://expo.getbootstrap.com/" class="bs-featurette-img">
+ <img src="http://expo.getbootstrap.com/screenshots/localcrime.jpg" alt="" class="img-responsive">
+ </a>
+ </div>
+ <div class="col-sm-3">
+ <a href="http://expo.getbootstrap.com/" class="bs-featurette-img">
+ <img src="http://expo.getbootstrap.com/screenshots/fortrabbit.jpg" alt="" class="img-responsive">
+ </a>
+ </div>
+ <div class="col-sm-3">
+ <a href="http://expo.getbootstrap.com/" class="bs-featurette-img">
+ <img src="http://expo.getbootstrap.com/screenshots/sentry.jpg" alt="" class="img-responsive">
+ </a>
+ </div>
+ </div>
+
+ <hr class="half-rule">
+
+ <p class="lead">Head to the Bootstrap Expo for dozens of inspiring projects built on Bootstrap.</p>
+ <a href="{{ site.expo }}" class="btn btn-outline btn-lg">Explore the showcase</a>
+ </div>
+</div>
projects / thirdparty / bootstrap.git / commitdiff
