Merge branch 'v4-docs-streamlined' of https://github.com/twbs/bootstrap into v4-docs-streamlined

author: Mark Otto <[email protected]> 2017-05-30 08:46:33 -0700
committer: Mark Otto <[email protected]> 2017-05-30 08:46:33 -0700
commit: d4eb0d4e739477fc51421eed29906addfd998a04 (patch)
tree: 5ffe09c63ac4e522890fc7b2b87c0a47b0f1a971 /docs/getting-started
parent: 0c12ccbeb6fdf0dd3818f97260aa43c79108d377 (diff)
parent: f95cbc5950bf31995f33023014c47a61665ffacc (diff)
download: bootstrap-d4eb0d4e739477fc51421eed29906addfd998a04.tar.xz
bootstrap-d4eb0d4e739477fc51421eed29906addfd998a04.zip
9 files changed, 0 insertions, 757 deletions
diff --git a/docs/getting-started/accessibility.md b/docs/getting-started/accessibility.md
deleted file mode 100644
index c1fe73dc0..000000000
--- a/docs/getting-started/accessibility.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-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
----
-
-Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using <abbr title="Assistive Technology" class="initialism">AT</abbr>.
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
-## Component requirements
-
-Some common HTML elements are always in need for basic accessibility enhancements through `role`s and Aria attributes. Below is a list of some of the most frequently used ones.
-
-### Button groups
-
-In order for assistive technologies–such as screen readers–to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.
-
-In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct `role` attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
-
-## Skip navigation
-
-If your navigation contains many links and comes before the main content in the DOM, add a `Skip to main content` link before the navigation (for a simple explanation, see this [A11Y Project article on skip navigation links](http://a11yproject.com/posts/skip-nav-links/)). Using the `.sr-only` class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).
-
-{% callout danger %}
-Due to long-standing shortcomings/bugs in Internet Explorer (see this article on [in-page links and focus order](http://accessibleculture.org/articles/2010/05/in-page-links/)), you will need to make sure that the target of your skip link is at least programmatically focusable by adding `tabindex="-1"`.
-
-In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with `tabindex="-1"` when they are clicked with the mouse) with `#content:focus { outline: none; }`.
-
-Note that this bug will also affect any other in-page links your site may be using, rendering them useless for keyboard users. You may consider adding a similar stop-gap fix to all other named anchors / fragment identifiers that act as link targets.
-{% endcallout %}
-
-{% highlight html %}
-<body>
-  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
-  ...
-  <div class="container" id="content" tabindex="-1">
-    <!-- The main page content -->
-  </div>
-</body>
-{% endhighlight %}
-
-## Nested headings
-
-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](https://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessability](http://accessibility.psu.edu/headings/).
-
-## Additional resources
-
-- ["HTML Codesniffer" bookmarklet for identifying accessibility issues](https://github.com/squizlabs/HTML_CodeSniffer)
-- [The A11Y Project](http://a11yproject.com/)
-- [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
diff --git a/docs/getting-started/best-practices.md b/docs/getting-started/best-practices.md
deleted file mode 100644
index 0e4792513..000000000
--- a/docs/getting-started/best-practices.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-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
----
-
-We've designed and developed Bootstrap to work in a number of environments. Here are some of the best practices we've gathered from years of working on and using it ourselves.
-
-{% callout info %}
-**Heads up!** This copy is a work in progress.
-{% endcallout %}
-
-### General outline
-- Working with CSS
-- Working with Sass files
-- Building new CSS components
-- Working with flexbox
-- Ask in [Slack](https://bootstrap-slack.herokuapp.com/)
diff --git a/docs/getting-started/browsers-devices.md b/docs/getting-started/browsers-devices.md
deleted file mode 100644
index 5dee37dff..000000000
--- a/docs/getting-started/browsers-devices.md
+++ /dev/null
@@ -1,202 +0,0 @@
----
-layout: docs
-title: Browsers and devices
-description: Learn which browsers and devices are supported by Bootstrap.
-group: getting-started
----
-
-Bootstrap supports a wide variety of modern browsers and devices, and some older ones. See which exact ones below, as well as detailed information on known quirks and bugs.
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
-## Supported browsers
-
-Bootstrap supports the **latest, stable releases** of all major browsers and platforms. On Windows, **we support Internet Explorer 10-11 / Microsoft Edge**.
-
-Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform's web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.
-
-### Mobile devices
-
-Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported.
-
-<table class="table table-bordered table-striped table-responsive">
-  <thead>
-    <tr>
-      <td></td>
-      <th>Chrome</th>
-      <th>Firefox</th>
-      <th>Safari</th>
-      <th>Android Browser &amp; WebView</th>
-      <th>Microsoft Edge</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">Android</th>
-      <td class="text-success">Supported</td>
-      <td class="text-success">Supported</td>
-      <td class="text-muted">N/A</td>
-      <td class="text-success">Android v5.0+ supported</td>
-      <td class="text-muted">N/A</td>
-    </tr>
-    <tr>
-      <th scope="row">iOS</th>
-      <td class="text-success">Supported</td>
-      <td class="text-success">Supported</td>
-      <td class="text-success">Supported</td>
-      <td class="text-muted">N/A</td>
-      <td class="text-muted">N/A</td>
-    </tr>
-    <tr>
-      <th scope="row">Windows 10 Mobile</th>
-      <td class="text-muted">N/A</td>
-      <td class="text-muted">N/A</td>
-      <td class="text-muted">N/A</td>
-      <td class="text-muted">N/A</td>
-      <td class="text-success">Supported</td>
-    </tr>
-  </tbody>
-</table>
-
-### Desktop browsers
-
-Similarly, the latest versions of most desktop browsers are supported.
-
-<table class="table table-bordered table-striped table-responsive">
-  <thead>
-    <tr>
-      <td></td>
-      <th>Chrome</th>
-      <th>Firefox</th>
-      <th>Internet Explorer</th>
-      <th>Microsoft Edge</th>
-      <th>Opera</th>
-      <th>Safari</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">Mac</th>
-      <td class="text-success">Supported</td>
-      <td class="text-success">Supported</td>
-      <td class="text-muted">N/A</td>
-      <td class="text-muted">N/A</td>
-      <td class="text-success">Supported</td>
-      <td class="text-success">Supported</td>
-    </tr>
-    <tr>
-      <th scope="row">Windows</th>
-      <td class="text-success">Supported</td>
-      <td class="text-success">Supported</td>
-      <td class="text-success">Supported, IE10+</td>
-      <td class="text-success">Supported</td>
-      <td class="text-success">Supported</td>
-      <td class="text-danger">Not supported</td>
-    </tr>
-  </tbody>
-</table>
-
-For Firefox, in addition to the latest normal stable release, we also support the latest [Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/organizations/faq/) version of Firefox.
-
-Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 9, though they are not officially supported.
-
-For a list of some of the browser bugs that Bootstrap has to grapple with, see our [Wall of browser bugs]({{ site.baseurl }}/browser-bugs/).
-
-## Internet Explorer
-
-Internet Explorer 10+ is supported; IE9 and down is not. Please be aware that some CSS3 properties and HTML5 elements are not fully supported in IE10, or require prefixed properties for full functionality. Visit [Can I use...](http://caniuse.com/) for details on browser support of CSS3 and HTML5 features.
-
-**If you require IE8-9 support, use Bootstrap 3.** It's the most stable version of our code and is still supported by our team for critical bugfixes and documentation changes. However, no new features will be added to it.
-
-## Internet Explorer 10 in Windows Phone 8
-
-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-2017 The Bootstrap Authors
-// Copyright 2014-2017 Twitter, Inc.
-// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
-if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
-  var msViewportStyle = document.createElement('style')
-  msViewportStyle.appendChild(
-    document.createTextNode(
-      '@-ms-viewport{width:auto!important}'
-    )
-  )
-  document.head.appendChild(msViewportStyle)
-}
-{% endhighlight %}
-
-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.
-
-## Modals and dropdowns on mobile
-
-### Overflow and scrolling
-
-Support for `overflow: hidden;` on the `<body>` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `<body>` content will begin to scroll. See [Chrome bug #175502](https://bugs.chromium.org/p/chromium/issues/detail?id=175502) (fixed in Chrome v40) and [WebKit bug #153852](https://bugs.webkit.org/show_bug.cgi?id=153852).
-
-### iOS text fields and scrolling
-
-As of iOS 9.2, while a modal is open, if the initial touch of a scroll gesture is within the boundary of a textual `<input>` or a `<textarea>`, the `<body>` content underneath the modal will be scrolled instead of the modal itself. See [WebKit bug #153856](https://bugs.webkit.org/show_bug.cgi?id=153856).
-
-### Navbar Dropdowns
-
-The `.dropdown-backdrop` element isn't used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or [any other element which will fire a click event in iOS](https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile)).
-
-## Browser zooming
-
-Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.
-
-## Sticky `:hover`/`:focus` on mobile
-Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make `:hover` "sticky". In other words, `:hover` styles start applying after tapping an element and only stop applying after the user taps some other element. On mobile-first sites, this behavior is normally undesirable.
-
-Bootstrap includes a workaround for this, although it is disabled by default. By setting `$enable-hover-media-query` to `true` when compiling from Sass, Bootstrap will use [mq4-hover-shim](https://github.com/twbs/mq4-hover-shim) to disable `:hover` styles in browsers that emulate hovering, thus preventing sticky `:hover` styles. There are some caveats to this workaround; see the shim's documentation for details.
-
-## Printing
-
-Even in some modern browsers, printing can be quirky.
-
-As of Safari v8.0, use of the fixed-width `.container` class can cause Safari to use an unusually small font size when printing. See [issue #14868](https://github.com/twbs/bootstrap/issues/14868) and [WebKit bug #138192](https://bugs.webkit.org/show_bug.cgi?id=138192) for more details. One potential workaround is the following CSS:
-
-{% highlight css %}
-@media print {
-  .container {
-    width: auto;
-  }
-}
-{% endhighlight %}
-
-## Android stock browser
-
-Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.
-
-#### Select menu
-
-On `<select>` elements, the Android stock browser will not display the side controls if there is a `border-radius` and/or `border` applied. (See [this StackOverflow question](https://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with) for details.) Use the snippet of code below to remove the offending CSS and render the `<select>` as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.
-
-{% highlight html %}
-<script>
-$(function () {
-  var nua = navigator.userAgent
-  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
-  if (isAndroid) {
-    $('select.form-control').removeClass('form-control').css('width', '100%')
-  }
-})
-</script>
-{% endhighlight %}
-
-Want to see an example? [Check out this JS Bin demo.](http://jsbin.com/OyaqoDO/2)
-
-## Validators
-
-In order to provide the best possible experience to old and buggy browsers, Bootstrap uses [CSS browser hacks](http://browserhacks.com) in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.
-
-These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.
-
-Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for [a certain Firefox bug](https://bugzilla.mozilla.org/show_bug.cgi?id=654072).
diff --git a/docs/getting-started/build-tools.md b/docs/getting-started/build-tools.md
deleted file mode 100644
index 0d441d216..000000000
--- a/docs/getting-started/build-tools.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-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
----
-
-Bootstrap uses [Grunt](http://gruntjs.com) for its CSS and JavaScript build system and Jekyll for the written documentation. Our Gruntfile includes convenient methods for working with the framework, including compiling code, running tests, and more.
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
-## Tooling setup
-
-To use our Gruntfile and run our documentation locally, you'll need a copy of Bootstrap's source files, Node, and Grunt. Follow these steps and you should be ready to rock:
-
-1. [Download and install Node](https://nodejs.org/download/), which we use to manage our dependencies.
-2. Install the Grunt command line tools, `grunt-cli`, with `npm install -g grunt-cli`.
-3. Navigate to the root `/bootstrap` directory and run `npm install` to install our local dependencies listed in [package.json](https://github.com/twbs/bootstrap/blob/master/package.json).
-4. [Install Ruby][install-ruby], install [Bundler][gembundler] with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as Jekyll and plugins.
-  - **Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Jekyll up and running without problems.
-
-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]: https://bundler.io/
-
-## Using Grunt
-
-Our Gruntfile includes the following commands and tasks:
-
-| Task | Description |
-| --- | --- |
-| `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](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. |
-
-## Autoprefixer
-
-Bootstrap uses [Autoprefixer][autoprefixer] (included in our Gruntfile and build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
-
-We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [`/grunt/postcss.js`](https://github.com/twbs/bootstrap/blob/master/grunt/postcss.js) for details.
-
-## Local documentation
-
-Running our documentation locally requires the use of Jekyll, a decently flexible static site generator that provides us: basic includes, Markdown-based files, templates, and more. Here's how to get it started:
-
-1. Run through the [tooling setup](#tooling-setup) above to install Jekyll (the site builder) and other Ruby dependencies with `bundle install`.
-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](https://jekyllrb.com/docs/home/).
-
-## Troubleshooting
-
-Should you encounter problems with installing dependencies or running Grunt commands, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
-
-[autoprefixer]: https://github.com/postcss/autoprefixer
diff --git a/docs/getting-started/contents.md b/docs/getting-started/contents.md
deleted file mode 100644
index 682c2310c..000000000
--- a/docs/getting-started/contents.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-layout: docs
-title: Contents
-description: Learn about what's included in Bootstrap's precompiled and source code directories.
-group: getting-started
----
-
-Bootstrap can come in one of two forms, as precompiled or source code. Learn more about each flavor's contents and structure below. Remember, no matter the implementation flavor, **Bootstrap's JavaScript plugins require jQuery**.
-
-## Precompiled Bootstrap
-
-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 plaintext %}
-bootstrap/
-├── css/
-│   ├── bootstrap.css
-│   ├── bootstrap.css.map
-│   ├── bootstrap.min.css
-│   └── bootstrap.min.css.map
-└── js/
-    ├── bootstrap.js
-    └── bootstrap.min.js
-{% endhighlight %}
-
-This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
-
-## Bootstrap source code
-
-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 plaintext %}
-bootstrap/
-├── dist/
-│   ├── css/
-│   └── js/
-├── docs/
-│   └── examples/
-├── js/
-└── scss/
-{% endhighlight %}
-
-The `scss/` and `js/` are the source code for our CSS and JavaScript. The `dist/` folder includes everything listed in the precompiled download section above. The `docs/` folder includes the source code for our documentation, and `examples/` of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.
diff --git a/docs/getting-started/download.md b/docs/getting-started/download.md
deleted file mode 100644
index e953889f8..000000000
--- a/docs/getting-started/download.md
+++ /dev/null
@@ -1,98 +0,0 @@
----
-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.
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
-## 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, 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" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download Bootstrap</a>
-
-## Source files
-**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" 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.
-
-### npm
-
-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 }}
-{% 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.
-
-Bootstrap's `package.json` contains some additional metadata under the following keys:
-
-- `sass` - path to Bootstrap's main [Sass](http://sass-lang.com/) source file
-- `style` - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)
-
-### RubyGems
-
-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.alpha5'
-{% endhighlight %}
-
-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.alpha5
-{% endhighlight %}
-
-[See the gem's README](https://github.com/twbs/bootstrap-rubygem/blob/master/README.md) for further details.
-
-### Composer
-
-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 }}
-{% endhighlight %}
-
-### Bower
-
-Install and manage Bootstrap's Sass and JavaScript using [Bower](https://bower.io).
-
-{% highlight bash %}
-bower install bootstrap#v{{ site.current_version }}
-{% endhighlight %}
-
-### NuGet
-
-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 %}
-Install-Package bootstrap -Pre
-{% endhighlight %}
-
-{% highlight powershell %}
-Install-Package bootstrap.sass -Pre
-{% endhighlight %}
-
-The `-Pre` is required until Bootstrap v4 has a stable release.
diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md
deleted file mode 100644
index 39f5ba2d0..000000000
--- a/docs/getting-started/introduction.md
+++ /dev/null
@@ -1,126 +0,0 @@
----
-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/"
----
-
-Bootstrap is the world's most popular framework for building responsive, mobile-first sites and applications. Inside you'll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever.
-
-Here's how to quickly get started with the Bootstrap CDN and a template starter page.
-
-{% include ads.html %}
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
-## 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/)
-
-Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
-
-{% highlight html %}
-<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
-{% endhighlight %}
-
-Add our JavaScript plugins, jQuery, and Tether near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery and Tether first, as our code depends on them. While we use [jQuery's slim build](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/) in our docs, the full version is also supported.
-
-{% highlight html %}
-<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
-<script src="{{ site.cdn.tether }}" integrity="{{ site.cdn.tether_hash }}" crossorigin="anonymous"></script>
-<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
-{% endhighlight %}
-
-And that's it—you're on your way to a fully Bootstrapped site. If you're at all unsure about the general page structure, keep reading for an example page template.
-
-## Starter template
-
-Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:
-
-{% highlight html %}
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <!-- Required meta tags -->
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
-    <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
-  </head>
-  <body>
-    <h1>Hello, world!</h1>
-
-    <!-- jQuery first, then Tether, then Bootstrap JS. -->
-    <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
-    <script src="{{ site.cdn.tether }}" integrity="{{ site.cdn.tether_hash }}" crossorigin="anonymous"></script>
-    <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
-  </body>
-</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.
-
-## Important globals
-
-Bootstrap employs a handful of important global styles and settings that you'll need to be aware of when using it, all of which are almost exclusively geared towards the *normalization* of cross browser styles. Let's dive in.
-
-### HTML5 doctype
-
-Bootstrap requires the use of the HTML5 doctype. Without it, you'll see some funky incomplete styling, but including it shouldn't cause any considerable hiccups.
-
-{% highlight html %}
-<!DOCTYPE html>
-<html lang="en">
-  ...
-</html>
-{% endhighlight %}
-
-### Responsive meta tag
-
-Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, **add the responsive viewport meta tag** to your `<head>`.
-
-{% highlight html %}
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-{% endhighlight %}
-
-You can see an example of this in action in the [starter template](#starter-template).
-
-### Box-sizing
-
-For more straightforward sizing in CSS, we switch the global `box-sizing` value from `content-box` to `border-box`. This ensures `padding` does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.
-
-On the rare occasion you need to override it, use something like the following:
-
-{% highlight scss %}
-.selector-for-some-widget {
-  -webkit-box-sizing: content-box;
-     -moz-box-sizing: content-box;
-          box-sizing: content-box;
-}
-{% endhighlight %}
-
-With the above snippet, nested elements—including generated content via `:before` and `:after`—will all inherit the specified `box-sizing` for that `.selector-for-some-widget`.
-
-Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box-sizing/).
-
-### Normalize.css
-
-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
-
-Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.
-
-- Follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap).
-- Read and subscribe to [The Official Bootstrap Blog]({{ site.blog }}).
-- Join [the official Slack room]({{ site.slack }}).
-- Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel.
-- Implementation help may be found at Stack Overflow (tagged [`bootstrap-4`](https://stackoverflow.com/questions/tagged/bootstrap-4)).
-- Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability.
-
-You can also follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap) for the latest gossip and awesome music videos.
diff --git a/docs/getting-started/javascript.md b/docs/getting-started/javascript.md
deleted file mode 100644
index b6a38fb7a..000000000
--- a/docs/getting-started/javascript.md
+++ /dev/null
@@ -1,107 +0,0 @@
----
-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
----
-
-Bootstrap includes a handful of JavaScript to help bring some of our components to life. Learn more about how to include it, our data and programmatic API options, and more.
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
-## Individual or compiled
-
-Plugins can be included individually (using Bootstrap's individual `*.js` files), or all at once using `bootstrap.js` or the minified `bootstrap.min.js` (don't include both).
-
-## Dependencies
-
-Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included **before** the plugin files). [Consult our `bower.json`]({{ site.repo }}/blob/v{{ site.current_version }}/bower.json) to see which versions of jQuery are supported.
-
-## Data attributes
-
-Nearly all Bootstrap plugins can be enabled and configured through HTML alone with data attributes (our preferred way of using JavaScript functionality). Be sure to **only use one set of data attributes on a single element** (e.g., you cannot trigger a tooltip and modal from the same button.)
-
-However, in some situations it may be desirable to disable this functionality. To disable the data attribute API, unbind all events on the document namespaced with `data-api` like so:
-
-{% highlight js %}
-$(document).off('.data-api')
-{% endhighlight %}
-
-Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:
-
-{% highlight js %}
-$(document).off('.alert.data-api')
-{% endhighlight %}
-
-## Programmatic API
-
-We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.
-
-{% highlight js %}
-$('.btn.danger').button('toggle').addClass('fat')
-{% endhighlight %}
-
-All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):
-
-{% highlight js %}
-$('#myModal').modal()                      // initialized with defaults
-$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
-$('#myModal').modal('show')                // initializes and invokes show immediately
-{% endhighlight %}
-
-Each plugin also exposes its raw constructor on a `Constructor` property: `$.fn.popover.Constructor`. If you'd like to get a particular plugin instance, retrieve it directly from an element: `$('[rel="popover"]').data('popover')`.
-
-### Default settings
-You can change the default settings for a plugin by modifying the plugin's `Constructor.DEFAULTS` object:
-
-{% highlight js %}
-$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false
-{% endhighlight %}
-
-## No conflict
-
-Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call `.noConflict` on the plugin you wish to revert the value of.
-
-{% highlight js %}
-var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
-$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality
-{% endhighlight %}
-
-## Events
-
-Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. `show`) is triggered at the start of an event, and its past participle form (ex. `shown`) is triggered on the completion of an action.
-
-All infinitive events provide [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) functionality. This provides the ability to stop the execution of an action before it starts.
-
-{% highlight js %}
-$('#myModal').on('show.bs.modal', function (e) {
-  if (!data) return e.preventDefault() // stops modal from being shown
-})
-{% endhighlight %}
-
-## Version numbers
-
-The version of each of Bootstrap's jQuery plugins can be accessed via the `VERSION` property of the plugin's constructor. For example, for the tooltip plugin:
-
-{% highlight js %}
-$.fn.tooltip.Constructor.VERSION // => "{{ site.current_version }}"
-{% endhighlight %}
-
-## No special fallbacks when JavaScript is disabled
-
-Bootstrap's plugins don't fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript) to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.
-
-{% callout warning %}
-#### Third-party libraries
-
-**Bootstrap does not officially support third-party JavaScript libraries** like Prototype or jQuery UI. Despite `.noConflict` and namespaced events, there may be compatibility problems that you need to fix on your own.
-{% endcallout %}
-
-## Transitions
-
-For simple transition effects, include `transition.js` once alongside the other JS files. If you're using the compiled (or minified) `bootstrap.js`, there is no need to include this—it's already there.
-
-Transition.js is a basic helper for `transitionEnd` events as well as a CSS transition emulator. It's used by the other plugins to check for CSS transition support and to catch hanging transitions.
diff --git a/docs/getting-started/options.md b/docs/getting-started/options.md
deleted file mode 100644
index a1491252e..000000000
--- a/docs/getting-started/options.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-layout: docs
-title: Customization options
-description: Customize Bootstrap with Sass variables, easily toggling global preferences with a quick recompile.
-group: getting-started
----
-
-Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with the included Gruntfile as needed.
-
-## Customizing variables
-
-Bootstrap 4 ships with a `_custom.scss` file for easy overriding of default variables in `/scss/_variables.scss`. Copy and paste relevant lines from there into the `_custom.scss` file, modify the values, and recompile your Sass to change our default values. **Be sure to remove the `!default` flag from override values.**
-
-For example, to change out the `background-color` and `color` for the `<body>`, you'd do the following:
-
-{% highlight scss %}
-// Bootstrap overrides
-//
-// Copy variables from `_variables.scss` to this file to override default values
-// without modifying source files.
-
-$body-bg:    $gray-dark;
-$body-color: $gray-light;
-{% endhighlight %}
-
-Do the same for any variable you need to override, including the global options listed below.
-
-## Global options
-
-You can find and customize these variables for key global options in our `_variables.scss` file.
-
-| Variable                    | Values                             | Description                                                                            |
-| --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- |
-| `$spacer`                   | `1rem` (default), or any value > 0 | Specifies the default spacer value for our spacer utilities.                           |
-| `$enable-rounded`           | `true` (default) or `false`        | Enables predefined `border-radius` styles on various components.                       |
-| `$enable-shadows`           | `true` or `false` (default)        | Enables predefined `box-shadow` styles on various components.                          |
-| `$enable-gradients`         | `true` or `false` (default)        | Enables predefined gradients via `background-image` styles on various components.      |
-| `$enable-transitions`       | `true` (default) or `false`        | Enables predefined `transition`s on various components.                                |
-| `$enable-hover-media-query` | `true` or `false` (default)        | ...                                                                                    |
-| `$enable-grid-classes`      | `true` (default) or `false`        | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.).     |
-| `$enable-print-styles`      | `true` (default) or `false`        | Enables styles for optimizing printing.                                |
author	Mark Otto <[email protected]>	2017-05-30 08:46:33 -0700
committer	Mark Otto <[email protected]>	2017-05-30 08:46:33 -0700
commit	d4eb0d4e739477fc51421eed29906addfd998a04 (patch)
tree	5ffe09c63ac4e522890fc7b2b87c0a47b0f1a971 /docs/getting-started
parent	0c12ccbeb6fdf0dd3818f97260aa43c79108d377 (diff)
parent	f95cbc5950bf31995f33023014c47a61665ffacc (diff)
download	bootstrap-d4eb0d4e739477fc51421eed29906addfd998a04.tar.xz bootstrap-d4eb0d4e739477fc51421eed29906addfd998a04.zip