mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-25 13:55:47 +01:00
Apply #18369 to hosted docs
This commit is contained in:
Chris Rebert
parent
a59d7c3050
commit
7ef42d81e2
@ -1,12 +1,12 @@
|
||||
<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content="IE=edge"> <meta name=viewport content="width=device-width,initial-scale=1"> <meta name=description content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development."> <meta name=keywords content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development"> <meta name=author content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <title> Getting started · Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel=apple-touch-icon href=/apple-touch-icon.png> <link rel=icon href=/favicon.ico> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview");</script></head><body> <a id=skippy class="sr-only sr-only-focusable" href=#content><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href="http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/" class="v4-tease">Aww yeah, Bootstrap 4 is coming!</a> <header class="navbar navbar-static-top bs-docs-nav" id=top role=banner> <div class=container> <div class=navbar-header> <button class="navbar-toggle collapsed" type=button data-toggle=collapse data-target=#bs-navbar aria-controls=bs-navbar aria-expanded=false> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav id=bs-navbar class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class=active> <a href="../getting-started/">Getting started</a> </li> <li> <a href="../css/">CSS</a> </li> <li> <a href="../components/">Components</a> </li> <li> <a href="../javascript/">JavaScript</a> </li> <li> <a href="../customize/">Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Themes")">Themes</a></li> <li><a href=http://expo.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Expo")">Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Blog")">Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Getting started</h1> <p>An overview of Bootstrap, how to download and use, basic templates and examples, and more.</p> <div id=carbonads-container><div class=carbonad><div id=azcarbon></div><script>var z=document.createElement("script");z.async=!0,z.src="http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s);</script></div></div></div></div><div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 id=download class=page-header>Download</h1> <p class=lead>Bootstrap (currently v3.3.6) 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> <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> <p> <a href=https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip class="btn btn-lg btn-outline" onclick="ga("send","event","Getting started","Download","Download compiled")">Download Bootstrap</a> </p> </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=#grunt>some setup.</a></strong></p> <p> <a href=https://github.com/twbs/bootstrap/archive/v3.3.6.zip class="btn btn-lg btn-outline" onclick="ga("send","event","Getting started","Download","Download source")">Download source</a> </p> </div> <div class=col-sm-4> <h3 id=download-sass>Sass</h3> <p><a href=https://github.com/twbs/bootstrap-sass>Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p> <p> <a href=https://github.com/twbs/bootstrap-sass/archive/v3.3.6.tar.gz class="btn btn-lg btn-outline" onclick="ga("send","event","Getting started","Download","Download Sass")">Download Sass</a> </p> </div> </div> <h2 id=download-cdn>Bootstrap CDN</h2> <p>The folks over at <a href="https://www.maxcdn.com/">MaxCDN</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <a href="https://www.bootstrapcdn.com/">Bootstrap CDN</a> links.</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=c><!-- Latest compiled and minified CSS --></span>
|
||||
<span class=nt><link</span> <span class=na>rel=</span><span class=s>"stylesheet"</span> <span class=na>href=</span><span class=s>"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"</span> <span class=na>integrity=</span><span class=s>"sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="</span> <span class=na>crossorigin=</span><span class=s>"anonymous"</span><span class=nt>></span>
|
||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel=apple-touch-icon href=/apple-touch-icon.png> <link rel=icon href=/favicon.ico> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview");</script></head><body> <a id=skippy class="sr-only sr-only-focusable" href=#content><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <header class="navbar navbar-static-top bs-docs-nav" id=top role=banner> <div class=container> <div class=navbar-header> <button class="navbar-toggle collapsed" type=button data-toggle=collapse data-target=#bs-navbar aria-controls=bs-navbar aria-expanded=false> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav id=bs-navbar class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class=active> <a href="../getting-started/">Getting started</a> </li> <li> <a href="../css/">CSS</a> </li> <li> <a href="../components/">Components</a> </li> <li> <a href="../javascript/">JavaScript</a> </li> <li> <a href="../customize/">Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://expo.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Expo")">Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick="ga("send","event","Navbar","Community links","Blog")">Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Getting started</h1> <p>An overview of Bootstrap, how to download and use, basic templates and examples, and more.</p> <div id=carbonads-container><div class=carbonad><div id=azcarbon></div><script>var z=document.createElement("script");z.async=!0,z.src="http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s);</script></div></div></div></div><div class="container bs-docs-container"> <div class=row> <div class=col-md-9 role=main> <div class=bs-docs-section> <h1 id=download class=page-header>Download</h1> <p class=lead>Bootstrap (currently v3.3.6) 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> <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> <p> <a href=https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip class="btn btn-lg btn-outline" onclick="ga("send","event","Getting started","Download","Download compiled")">Download Bootstrap</a> </p> </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=#grunt>some setup.</a></strong></p> <p> <a href=https://github.com/twbs/bootstrap/archive/v3.3.6.zip class="btn btn-lg btn-outline" onclick="ga("send","event","Getting started","Download","Download source")">Download source</a> </p> </div> <div class=col-sm-4> <h3 id=download-sass>Sass</h3> <p><a href=https://github.com/twbs/bootstrap-sass>Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p> <p> <a href=https://github.com/twbs/bootstrap-sass/archive/v3.3.6.tar.gz class="btn btn-lg btn-outline" onclick="ga("send","event","Getting started","Download","Download Sass")">Download Sass</a> </p> </div> </div> <h2 id=download-cdn>Bootstrap CDN</h2> <p>The folks over at <a href="https://www.maxcdn.com/">MaxCDN</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <a href="https://www.bootstrapcdn.com/">Bootstrap CDN</a> links.</p> <figure class=highlight><pre><code class=language-html data-lang=html><span class=c><!-- Latest compiled and minified CSS --></span>
|
||||
<span class=nt><link</span> <span class=na>rel=</span><span class=s>"stylesheet"</span> <span class=na>href=</span><span class=s>"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"</span> <span class=na>integrity=</span><span class=s>"sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"</span> <span class=na>crossorigin=</span><span class=s>"anonymous"</span><span class=nt>></span>
|
||||
|
||||
<span class=c><!-- Optional theme --></span>
|
||||
<span class=nt><link</span> <span class=na>rel=</span><span class=s>"stylesheet"</span> <span class=na>href=</span><span class=s>"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"</span> <span class=na>integrity=</span><span class=s>"sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX"</span> <span class=na>crossorigin=</span><span class=s>"anonymous"</span><span class=nt>></span>
|
||||
<span class=nt><link</span> <span class=na>rel=</span><span class=s>"stylesheet"</span> <span class=na>href=</span><span class=s>"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"</span> <span class=na>integrity=</span><span class=s>"sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"</span> <span class=na>crossorigin=</span><span class=s>"anonymous"</span><span class=nt>></span>
|
||||
|
||||
<span class=c><!-- Latest compiled and minified JavaScript --></span>
|
||||
<span class=nt><script </span><span class=na>src=</span><span class=s>"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"</span> <span class=na>integrity=</span><span class=s>"sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ=="</span> <span class=na>crossorigin=</span><span class=s>"anonymous"</span><span class=nt>></script></span></code></pre></figure> <h2 id=download-bower>Install with Bower</h2> <p>You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href=http://bower.io>Bower</a>:</p> <figure class=highlight><pre><code class=language-bash data-lang=bash><span class=gp>$ </span>bower install bootstrap</code></pre></figure> <h2 id=download-npm>Install with npm</h2> <p>You can also install Bootstrap using <a href=https://www.npmjs.com>npm</a>:</p> <figure class=highlight><pre><code class=language-bash data-lang=bash><span class=gp>$ </span>npm install bootstrap</code></pre></figure> <p><code>require('bootstrap')</code> will load all of Bootstrap's jQuery plugins onto the jQuery object. The <code>bootstrap</code> module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the <code>/js/*.js</code> files under the package's top-level directory.</p> <p>Bootstrap's <code>package.json</code> contains some additional metadata under the following keys:</p> <ul> <li><code>less</code> - path to Bootstrap's main <a href=http://lesscss.org>Less</a> source file</li> <li><code>style</code> - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)</li> </ul> <h2 id=download-composer>Install with Composer</h2> <p>You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href=https://getcomposer.org>Composer</a>:</p> <figure class=highlight><pre><code class=language-bash data-lang=bash><span class=gp>$ </span>composer require twbs/bootstrap</code></pre></figure> <h2 id=download-autoprefixer>Autoprefixer required for Less/Sass</h2> <p>Bootstrap uses <a href=https://github.com/postcss/autoprefixer>Autoprefixer</a> to deal with <a href=http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm>CSS vendor prefixes</a>. If you're compiling Bootstrap from its Less/Sass source and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this because Autoprefixer is already integrated into our Gruntfile.</p> </div> <div class=bs-docs-section> <h1 id=whats-included class=page-header>What's included</h1> <p class=lead>Bootstrap is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p> <div class="bs-callout bs-callout-warning" id=jquery-required> <h4>jQuery required</h4> <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href=#template>starter template</a>. <a href=https://github.com/twbs/bootstrap/blob/v3.3.6/bower.json>Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p> </div> <h2 id=whats-included-precompiled>Precompiled Bootstrap</h2> <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:</p> <figure class=highlight><pre><code class=language-bash data-lang=bash>bootstrap/
|
||||
<span class=nt><script </span><span class=na>src=</span><span class=s>"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"</span> <span class=na>integrity=</span><span class=s>"sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"</span> <span class=na>crossorigin=</span><span class=s>"anonymous"</span><span class=nt>></script></span></code></pre></figure> <h2 id=download-bower>Install with Bower</h2> <p>You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href=http://bower.io>Bower</a>:</p> <figure class=highlight><pre><code class=language-bash data-lang=bash><span class=gp>$ </span>bower install bootstrap</code></pre></figure> <h2 id=download-npm>Install with npm</h2> <p>You can also install Bootstrap using <a href=https://www.npmjs.com>npm</a>:</p> <figure class=highlight><pre><code class=language-bash data-lang=bash><span class=gp>$ </span>npm install bootstrap</code></pre></figure> <p><code>require('bootstrap')</code> will load all of Bootstrap's jQuery plugins onto the jQuery object. The <code>bootstrap</code> module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the <code>/js/*.js</code> files under the package's top-level directory.</p> <p>Bootstrap's <code>package.json</code> contains some additional metadata under the following keys:</p> <ul> <li><code>less</code> - path to Bootstrap's main <a href=http://lesscss.org>Less</a> source file</li> <li><code>style</code> - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)</li> </ul> <h2 id=download-composer>Install with Composer</h2> <p>You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href=https://getcomposer.org>Composer</a>:</p> <figure class=highlight><pre><code class=language-bash data-lang=bash><span class=gp>$ </span>composer require twbs/bootstrap</code></pre></figure> <h2 id=download-autoprefixer>Autoprefixer required for Less/Sass</h2> <p>Bootstrap uses <a href=https://github.com/postcss/autoprefixer>Autoprefixer</a> to deal with <a href=http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm>CSS vendor prefixes</a>. If you're compiling Bootstrap from its Less/Sass source and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this because Autoprefixer is already integrated into our Gruntfile.</p> </div> <div class=bs-docs-section> <h1 id=whats-included class=page-header>What's included</h1> <p class=lead>Bootstrap is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p> <div class="bs-callout bs-callout-warning" id=jquery-required> <h4>jQuery required</h4> <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href=#template>starter template</a>. <a href=https://github.com/twbs/bootstrap/blob/v3.3.6/bower.json>Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p> </div> <h2 id=whats-included-precompiled>Precompiled Bootstrap</h2> <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:</p> <figure class=highlight><pre><code class=language-bash data-lang=bash>bootstrap/
|
||||
├── css/
|
||||
│ ├── bootstrap.css
|
||||
│ ├── bootstrap.css.map
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user