mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-29 06:49:06 +02:00
Merge branch 'v4-dev' into v4-docs-streamlined
This commit is contained in:
Mark Otto
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Accessibility
|
||||
description: Learn how Bootstrap supports common web standards for making sites that are accessibile to those using assistive technology.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
@@ -46,7 +47,7 @@ Note that this bug will also affect any other in-page links your site may be usi
|
||||
|
||||
When nesting headings (`<h1>` - `<h6>`), your primary document header should be an `<h1>`. Subsequent headings should make logical use of `<h2>` - `<h6>` such that screen readers can construct a table of contents for your pages.
|
||||
|
||||
Learn more at [HTML CodeSniffer](http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessability](http://accessibility.psu.edu/headings).
|
||||
Learn more at [HTML CodeSniffer](https://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessability](http://accessibility.psu.edu/headings).
|
||||
|
||||
## Additional resources
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Best practices
|
||||
description: Learn about some of the best practices we've gathered from years of working on and using Bootstrap.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Browsers and devices
|
||||
description: Learn which browsers and devices are supported by Bootstrap.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
@@ -171,7 +172,7 @@ See [this StackOverflow question](https://stackoverflow.com/questions/6771258/wh
|
||||
|
||||
## Internet Explorer 10 in Windows Phone 8
|
||||
|
||||
Internet Explorer 10 in Windows Phone 8 versions older than [Update 3 (a.k.a. GDR3)](http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx) doesn't differentiate **device width** from **viewport width** in `@-ms-viewport` at-rules, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you'll need to **include the following JavaScript to work around the bug**.
|
||||
Internet Explorer 10 in Windows Phone 8 versions older than [Update 3 (a.k.a. GDR3)](https://blogs.windows.com/buildingapps/2013/10/14/introducing-windows-phone-preview-for-developers/) doesn't differentiate **device width** from **viewport width** in `@-ms-viewport` at-rules, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you'll need to **include the following JavaScript to work around the bug**.
|
||||
|
||||
{% highlight js %}
|
||||
// Copyright 2014-2015 The Bootstrap Authors
|
||||
@@ -188,7 +189,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
For more information and usage guidelines, read [Windows Phone 8 and Device-Width](http://timkadlec.com/2013/01/windows-phone-8-and-device-width/).
|
||||
For more information and usage guidelines, read [Windows Phone 8 and Device-Width](https://timkadlec.com/2013/01/windows-phone-8-and-device-width/).
|
||||
|
||||
As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Build tools
|
||||
description: Details on how to use Bootstrap's included build tools to compile source code, run tests, and more.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
@@ -19,7 +20,7 @@ To use our Gruntfile and run our documentation locally, you'll need a copy of Bo
|
||||
When completed, you'll be able to run the various Grunt commands provided from the command line.
|
||||
|
||||
[install-ruby]: https://www.ruby-lang.org/en/documentation/installation/
|
||||
[gembundler]: http://bundler.io/
|
||||
[gembundler]: https://bundler.io/
|
||||
|
||||
## Using Grunt
|
||||
|
||||
@@ -29,7 +30,7 @@ Our Gruntfile includes the following commands and tasks:
|
||||
| --- | --- |
|
||||
| `grunt` | Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Uses [Sass](http://sass-lang.com/), [Autoprefixer][autoprefixer], and [UglifyJS](http://lisperator.net/uglifyjs/).** |
|
||||
| `grunt dist` | `grunt dist` creates the `/dist` directory with compiled files. **Uses [Sass](http://sass-lang.com/), [Autoprefixer][autoprefixer], and [UglifyJS](http://lisperator.net/uglifyjs/).** |
|
||||
| `grunt test` | Runs [scss-lint](https://github.com/brigade/scss-lint), [ESLint](http://eslint.org/) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI). |
|
||||
| `grunt test` | Runs [scss-lint](https://github.com/brigade/scss-lint), [ESLint](http://eslint.org/) and [QUnit](https://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI). |
|
||||
| `grunt docs` | Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via `jekyll serve`. |
|
||||
| `grunt watch` | This is a convenience method for watching just Sass files and automatically building them whenever you save. |
|
||||
|
||||
@@ -56,7 +57,7 @@ Running our documentation locally requires the use of Jekyll, a decently flexibl
|
||||
2. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
|
||||
3. Open <http://localhost:9001> in your browser, and voilà.
|
||||
|
||||
Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
|
||||
Learn more about using Jekyll by reading its [documentation](https://jekyllrb.com/docs/home/).
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Contents
|
||||
description: Learn about what's included in Bootstrap's precompiled and source code directories.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
@@ -12,7 +13,7 @@ Once downloaded, unzip the compressed folder and you'll see something like this:
|
||||
|
||||
<!-- NOTE: This info is intentionally duplicated in the README. Copy any changes made here over to the README too. -->
|
||||
|
||||
{% highlight bash %}
|
||||
{% highlight plaintext %}
|
||||
bootstrap/
|
||||
├── css/
|
||||
│ ├── bootstrap.css
|
||||
@@ -30,7 +31,7 @@ This is the most basic form of Bootstrap: precompiled files for quick drop-in us
|
||||
|
||||
The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:
|
||||
|
||||
{% highlight bash %}
|
||||
{% highlight plaintext %}
|
||||
bootstrap/
|
||||
├── dist/
|
||||
│ ├── css/
|
||||
|
||||
@@ -1,16 +1,32 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Download
|
||||
description: Download Bootstrap's compiled CSS and JavaScript, source code, or include it with your favorite package manager.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
**Bootstrap v{{ site.current_version}}** is available for download in several ways, including some of your favorite package managers. Choose from the options below to snag just what you need.
|
||||
|
||||
### Bootstrap CSS and JS
|
||||
|
||||
**Download Bootstrap's ready-to-use code to easily drop into your project.** Includes compiled and minified versions of all our CSS bundles (default, flexbox-enabled, grid only, or Reboot only) and JavaScript plugins. Doesn't include documentation or source files.
|
||||
|
||||
<a href="{{ site.download.dist }}" class="btn btn-lg btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download Bootstrap</a>
|
||||
|
||||
### Source files
|
||||
Download everything: source Sass, JavaScript, and documentation files. **Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes), and [some setup]({{ site.baseurl }}/getting-started/build-tools/#tooling-setup).**
|
||||
**Want to compile Bootstrap with your project's asset pipeline?** Choose this option to download our source Sass, JavaScript, and documentation files. Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes), and [some setup]({{ site.baseurl }}/getting-started/build-tools/#tooling-setup).
|
||||
|
||||
<a href="{{ site.download.source }}" class="btn btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
|
||||
|
||||
### Bootstrap CDN
|
||||
|
||||
Skip the download and use the Bootstrap CDN to deliver Bootstrap's compiled CSS and JS to your project.
|
||||
|
||||
{% highlight html %}
|
||||
<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
|
||||
<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
|
||||
{% endhighlight %}
|
||||
|
||||
## Package managers
|
||||
|
||||
Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), and [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes)** for a setup that matches our official compiled versions.
|
||||
@@ -24,7 +40,7 @@ Pull in Bootstrap's **source files** into nearly any project with some of the mo
|
||||
Install Bootstrap in your Node powered apps with [the npm package](https://www.npmjs.org/package/bootstrap):
|
||||
|
||||
{% highlight bash %}
|
||||
$ npm install bootstrap@{{ site.current_version }}
|
||||
npm install bootstrap@{{ site.current_version }}
|
||||
{% endhighlight %}
|
||||
|
||||
`require('bootstrap')` will load all of Bootstrap's jQuery plugins onto the jQuery object. The `bootstrap` module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the `/js/*.js` files under the package's top-level directory.
|
||||
@@ -36,7 +52,7 @@ Bootstrap's `package.json` contains some additional metadata under the following
|
||||
|
||||
### RubyGems
|
||||
|
||||
Install Bootstrap in your Ruby apps using [Bundler](http://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](http://bundler.io/gemfile.html):
|
||||
Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/gemfile.html):
|
||||
|
||||
{% highlight ruby %}
|
||||
gem 'bootstrap', '~> 4.0.0.alpha3'
|
||||
@@ -45,7 +61,7 @@ gem 'bootstrap', '~> 4.0.0.alpha3'
|
||||
Alternatively, if you're not using Bundler, you can install the gem by running this command:
|
||||
|
||||
{% highlight bash %}
|
||||
$ gem install bootstrap -v 4.0.0.alpha3
|
||||
gem install bootstrap -v 4.0.0.alpha3
|
||||
{% endhighlight %}
|
||||
|
||||
[See the gem's README](https://github.com/twbs/bootstrap-rubygem/blob/master/README.md) for further details.
|
||||
@@ -53,7 +69,7 @@ $ gem install bootstrap -v 4.0.0.alpha3
|
||||
### Meteor
|
||||
|
||||
{% highlight bash %}
|
||||
$ meteor add twbs:bootstrap@={{ site.current_version }}
|
||||
meteor add twbs:bootstrap@={{ site.current_version }}
|
||||
{% endhighlight %}
|
||||
|
||||
### Composer
|
||||
@@ -61,15 +77,15 @@ $ meteor add twbs:bootstrap@={{ site.current_version }}
|
||||
You can also install and manage Bootstrap's Sass and JavaScript using [Composer](https://getcomposer.org):
|
||||
|
||||
{% highlight bash %}
|
||||
$ composer require twbs/bootstrap:{{ site.current_version }}
|
||||
composer require twbs/bootstrap:{{ site.current_version }}
|
||||
{% endhighlight %}
|
||||
|
||||
### Bower
|
||||
|
||||
Install and manage Bootstrap's Sass and JavaScript using [Bower](http://bower.io).
|
||||
Install and manage Bootstrap's Sass and JavaScript using [Bower](https://bower.io).
|
||||
|
||||
{% highlight bash %}
|
||||
$ bower install bootstrap#v{{ site.current_version }}
|
||||
bower install bootstrap#v{{ site.current_version }}
|
||||
{% endhighlight %}
|
||||
|
||||
### NuGet
|
||||
@@ -77,32 +93,11 @@ $ bower install bootstrap#v{{ site.current_version }}
|
||||
If you develop in .NET, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org):
|
||||
|
||||
{% highlight powershell %}
|
||||
PM> Install-Package bootstrap -Pre
|
||||
PM> Install-Package bootstrap.sass -Pre
|
||||
Install-Package bootstrap -Pre
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight powershell %}
|
||||
Install-Package bootstrap.sass -Pre
|
||||
{% endhighlight %}
|
||||
|
||||
The `-Pre` is required until Bootstrap v4 has a stable release.
|
||||
|
||||
{% comment %}
|
||||
## Custom builds
|
||||
|
||||
Need only a part of Bootstrap's CSS or JS? Use one of the custom builds to snag just what you need.
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<h3>Reboot</h3>
|
||||
<p>Includes variables/mixins, Normalize, and Reboot. No JavaScript.</p>
|
||||
<a class="btn btn-bs btn-outline" href="#">Download</a>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h3>Grid only</h3>
|
||||
<p>Includes variables/mixins and our grid system. No JavaScript.</p>
|
||||
<a class="btn btn-bs btn-outline" href="#">Download</a>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h3>Flexbox</h3>
|
||||
<p>All of Bootstrap with flexbox enabled and <strong>lower browser support</strong>.</p>
|
||||
<a class="btn btn-bs btn-outline" href="#">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endcomment %}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Flexbox
|
||||
description: Learn how to enable flexbox support in Bootstrap 4 with the flick of a variable or the swap of a stylesheet.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
@@ -39,7 +40,7 @@ If you're familiar with modifying variables in Sass—or any other CSS preproces
|
||||
2. Change it from `false` to `true`.
|
||||
3. Recompile, and done!
|
||||
|
||||
Alternatively, if you don't need the source Sass files, you may swap the default Bootstrap compiled CSS with the compiled flexbox variation. [Head to the download page]({{ site.baseurl }}/getting-started/download) for more information.
|
||||
Alternatively, if you don't need the source Sass files, you may swap the default Bootstrap compiled CSS with the compiled flexbox variation. [Head to the download page]({{ site.baseurl }}/getting-started/download/) for more information.
|
||||
|
||||
## Browser support
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Introduction
|
||||
description: Get started with Bootstrap using the Bootstrap CDN and a template starter page.
|
||||
group: getting-started
|
||||
redirect_from: "/getting-started/"
|
||||
---
|
||||
@@ -18,7 +19,7 @@ Here's how to quickly get started with the Bootstrap CDN and a template starter
|
||||
|
||||
## Quick start
|
||||
|
||||
Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? [Head to the downloads page.]({{ site.baseurl }}/getting-started/download)
|
||||
Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? [Head to the downloads page.]({{ site.baseurl }}/getting-started/download/)
|
||||
|
||||
Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
|
||||
|
||||
@@ -41,7 +42,7 @@ And that's it—you're on your way to a fully Bootstrapped site. If you're at al
|
||||
Be sure to have your pages set up with the latest design and development standards. That means:
|
||||
|
||||
* Using an HTML5 doctype
|
||||
* Forcing Internet Explorer to use its latest rendering mode ([read more](http://stackoverflow.com/q/6771258))
|
||||
* Forcing Internet Explorer to use its latest rendering mode ([read more](https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do))
|
||||
* And, utilizing the viewport meta tag.
|
||||
|
||||
Put it all together and your pages should look like this:
|
||||
@@ -69,7 +70,7 @@ Put it all together and your pages should look like this:
|
||||
</html>
|
||||
{% endhighlight %}
|
||||
|
||||
That's all you need for overall page requirements. Visit the [Layout docs]({{ site.baseurl }}/layout/overview) or [our official examples]({{ site.baseurl }}/examples/) to start laying out your site's content and components.
|
||||
That's all you need for overall page requirements. Visit the [Layout docs]({{ site.baseurl }}/layout/overview/) or [our official examples]({{ site.baseurl }}/examples/) to start laying out your site's content and components.
|
||||
|
||||
## Important globals
|
||||
|
||||
@@ -116,7 +117,7 @@ Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box
|
||||
|
||||
### Normalize.css
|
||||
|
||||
For improved cross-browser rendering, we use [Normalize.css](http://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices. We further build on this with our own, slightly more opinionated styles with [Reboot]({{ site.baseurl }}/content/reboot/).
|
||||
For improved cross-browser rendering, we use [Normalize.css](https://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices. We further build on this with our own, slightly more opinionated styles with [Reboot]({{ site.baseurl }}/content/reboot/).
|
||||
|
||||
## Community
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: JavaScript
|
||||
description: Learn about Bootstrap's JavaScript—how to include it, our data and programmatic API options, and more.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Customization options
|
||||
description: Customize Bootstrap with Sass variables, easily toggling global preferences with a quick recompile.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user