revamp getting started docs to use new toc
This commit is contained in:
Mark Otto
parent
fa413aece1
commit
1f43d9c066
|
|
@ -3,15 +3,11 @@ layout: docs
|
|||
title: Accessibility
|
||||
description: A brief overview of Bootstrap's features and limitations for the creation of accessible content.
|
||||
group: getting-started
|
||||
toc: true
|
||||
---
|
||||
|
||||
Bootstrap provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create web sites and applications that are visually appealing, functionally rich, and accessible out of the box.
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Overview and limitations
|
||||
|
||||
The overall accessibility of any project built with Bootstrap depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create web sites and applications with Bootstrap that fulfill [<abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.0](https://www.w3.org/TR/WCAG20/) (A/AA/AAA), [Section 508](https://www.section508.gov/) and similar accessibility standards and requirements.
|
||||
|
|
|
|||
|
|
@ -1,17 +1,11 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Browsers and devices
|
||||
description: Learn which browsers and devices are supported by Bootstrap.
|
||||
description: Learn about the browsers and devices, from modern to told, that are supported by Bootstrap, including known quirks and bugs for each.
|
||||
group: getting-started
|
||||
toc: true
|
||||
---
|
||||
|
||||
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**.
|
||||
|
|
|
|||
|
|
@ -1,19 +1,15 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Build tools
|
||||
description: Details on how to use Bootstrap's included build tools to compile source code, run tests, and more.
|
||||
description: Learn how to use Bootstrap's included npm scripts to build our documentation, compile source code, run tests, and more.
|
||||
group: getting-started
|
||||
toc: true
|
||||
---
|
||||
|
||||
Bootstrap uses [NPM scripts](https://docs.npmjs.com/misc/scripts) for its build system. Our [package.json](https://github.com/twbs/bootstrap/blob/v4-dev/package.json) 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
|
||||
|
||||
Bootstrap uses [NPM scripts](https://docs.npmjs.com/misc/scripts) for its build system. Our [package.json](https://github.com/twbs/bootstrap/blob/v4-dev/package.json) includes convenient methods for working with the framework, including compiling code, running tests, and more.
|
||||
|
||||
To use our build system and run our documentation locally, you'll need a copy of Bootstrap's source files and Node. 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.
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Contents
|
||||
description: Learn about what's included in Bootstrap's precompiled and source code directories.
|
||||
description: Discover what's included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap's JavaScript plugins require jQuery.
|
||||
group: getting-started
|
||||
toc: true
|
||||
---
|
||||
|
||||
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:
|
||||
|
|
|
|||
|
|
@ -1,21 +1,17 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Download
|
||||
description: Download Bootstrap's compiled CSS and JavaScript, source code, or include it with your favorite package manager.
|
||||
description: Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, Bower, RubyGems, and more.
|
||||
group: getting-started
|
||||
toc: true
|
||||
---
|
||||
|
||||
**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.
|
||||
|
||||
**Current version:** v{{ site.current_version}}
|
||||
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -1,17 +1,11 @@
|
|||
---
|
||||
layout: docs
|
||||
title: JavaScript
|
||||
description: Learn about Bootstrap's JavaScript—how to include it, our data and programmatic API options, and more.
|
||||
description: Bring Bootstrap to life with our JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more.
|
||||
group: getting-started
|
||||
toc: true
|
||||
---
|
||||
|
||||
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).
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Customization options
|
||||
description: Customize Bootstrap with Sass variables, easily toggling global preferences with a quick recompile.
|
||||
description: Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new Sass variables.
|
||||
group: getting-started
|
||||
toc: true
|
||||
---
|
||||
|
||||
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 `npm run test` 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.**
|
||||
|
|
@ -27,6 +26,8 @@ Do the same for any variable you need to override, including the global options
|
|||
|
||||
## Global options
|
||||
|
||||
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 `npm run test` as needed.
|
||||
|
||||
You can find and customize these variables for key global options in our `_variables.scss` file.
|
||||
|
||||
| Variable | Values | Description |
|
||||
|
|
|
|||
|
|
@ -1,18 +1,11 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Webpack
|
||||
description: Learn how to install Bootstrap using webpack 2
|
||||
description: Learn how to include Bootstrap in your project using Webpack 2.
|
||||
group: getting-started
|
||||
toc: true
|
||||
---
|
||||
|
||||
Use [webpack v2.x](https://webpack.js.org/) to bundle Bootstrap into your project.
|
||||
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Installing Bootstrap
|
||||
|
||||
[Install bootstrap](/getting-started/download/#npm) as a node module using npm.
|
||||
|
|
@ -60,16 +53,16 @@ Notice that if you chose to **import plugins individually**, you must also insta
|
|||
|
||||
### Importing Precompiled SASS
|
||||
|
||||
To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project's bundling process.
|
||||
To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project's bundling process.
|
||||
|
||||
First, create your own `_custom.scss` and use it to override the [built-in custom variables](/getting-started/options/). Then, use your main sass file to import your custom variables, followed by Bootstrap:
|
||||
First, create your own `_custom.scss` and use it to override the [built-in custom variables](/getting-started/options/). Then, use your main sass file to import your custom variables, followed by Bootstrap:
|
||||
{% highlight scss %}
|
||||
@import "custom";
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
{% endhighlight %}
|
||||
|
||||
For Bootstrap to compile, make sure you install and use the required loaders: [sass-loader](https://github.com/webpack-contrib/sass-loader), [postcss-loader](https://github.com/postcss/postcss-loader) with [Autoprefixer](https://github.com/postcss/autoprefixer#webpack) and [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes). With minimal setup, your webpack config should include this rule or similar:
|
||||
|
||||
|
||||
{% highlight js %}
|
||||
...
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue