aboutsummaryrefslogtreecommitdiff
path: root/docs/getting-started
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2017-05-26 21:22:08 -0700
committerMark Otto <[email protected]>2017-05-26 21:22:08 -0700
commit04724939a39d68b495da638e58eb794dafe8ab93 (patch)
tree7648460f56c35778514e388fc2933b8d55c6cce8 /docs/getting-started
parente0e1e849e6cda0d4af88a46f7e7e5a91f8b8498d (diff)
parentf2829dd6ea10d1af7e451397f7228087cff95b8a (diff)
downloadbootstrap-04724939a39d68b495da638e58eb794dafe8ab93.tar.xz
bootstrap-04724939a39d68b495da638e58eb794dafe8ab93.zip
Merge branch 'v4-dev' into form-tweaks
Diffstat (limited to 'docs/getting-started')
-rw-r--r--docs/getting-started/build-tools.md2
-rw-r--r--docs/getting-started/introduction.md8
-rw-r--r--docs/getting-started/webpack.md106
3 files changed, 111 insertions, 5 deletions
diff --git a/docs/getting-started/build-tools.md b/docs/getting-started/build-tools.md
index 3482bb617..6c1353052 100644
--- a/docs/getting-started/build-tools.md
+++ b/docs/getting-started/build-tools.md
@@ -40,7 +40,7 @@ Our [package.json](https://github.com/twbs/bootstrap/blob/master/package.json) i
Bootstrap uses [Autoprefixer][autoprefixer] (included in our 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 [`/build/postcss.js`](https://github.com/twbs/bootstrap/blob/v4-dev/build/postcss.js) for details.
+We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [`/build/postcss.config.js`](https://github.com/twbs/bootstrap/blob/v4-dev/build/postcss.config.js) for details.
## Local documentation
diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md
index 0ca845a8a..94edff52b 100644
--- a/docs/getting-started/introduction.md
+++ b/docs/getting-started/introduction.md
@@ -25,11 +25,11 @@ Copy-paste the stylesheet `<link>` into your `<head>` before all other styleshee
<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.
+Add our JavaScript plugins, jQuery, and Popper.js near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery and Popper.js 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.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script>
<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
{% endhighlight %}
@@ -53,9 +53,9 @@ Be sure to have your pages set up with the latest design and development standar
<body>
<h1>Hello, world!</h1>
- <!-- jQuery first, then Tether, then Bootstrap JS. -->
+ <!-- jQuery first, then Popper.js, 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.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script>
<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
</body>
</html>
diff --git a/docs/getting-started/webpack.md b/docs/getting-started/webpack.md
new file mode 100644
index 000000000..1c87f342e
--- /dev/null
+++ b/docs/getting-started/webpack.md
@@ -0,0 +1,106 @@
+---
+layout: docs
+title: Webpack
+description: Learn how to install Bootstrap using webpack 2
+group: getting-started
+---
+
+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.
+
+## Importing JavaScript
+
+Import [Bootstrap's JavaScript](/getting-started/javascript/) by adding this line to your app's entry point (usally `index.js` or `app.js`):
+
+{% highlight js %}
+import 'bootstrap';
+{% endhighlight %}
+
+Alternatively, you may **import plugins individually** as needed:
+
+{% highlight js %}
+import 'bootstrap/js/dist/util';
+import 'bootstrap/js/dist/dropdown';
+...
+{% endhighlight %}
+
+Bootstrap is dependent on [jQuery](https://jquery.com/) and [Popper](https://popper.js.org/), so npm will install them for you if needed. But they must be explicitly provided by webpack. Add the following code to the `plugins` section in your webpack config file:
+
+{% highlight js %}
+ plugins: [
+ ...
+ new webpack.ProvidePlugin({
+ $: 'jquery',
+ jQuery: 'jquery',
+ 'window.jQuery': 'jquery',
+ Popper: ['popper.js', 'default'],
+ // In case you imported plugins individually, you must also require them here:
+ Util: "exports-loader?Util!bootstrap/js/dist/util",
+ Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
+ ...
+ })
+ ...
+ ]
+{% endhighlight %}
+
+{% callout warning %}
+Notice that if you chose to **import plugins individually**, you must also install [exports-loader](https://github.com/webpack-contrib/exports-loader)
+{% endcallout %}
+
+## Importing Styles
+
+### 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.
+
+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 %}
+ ...
+ {
+ test: /\.(scss)$/,
+ use: [{
+ loader: 'style-loader', // inject CSS to page
+ }, {
+ loader: 'css-loader', // translates CSS into CommonJS modules
+ }, {
+ loader: 'postcss-loader', // Run post css actions
+ options: {
+ plugins: function () { // post css plugins, can be exported to postcss.config.js
+ return [
+ require('precss'),
+ require('autoprefixer')
+ ];
+ }
+ }
+ }, {
+ loader: 'sass-loader' // compiles SASS to CSS
+ }]
+ },
+ ...
+{% endhighlight %}
+
+### Importing Compiled CSS
+
+Alternatively, you may use Bootstrap's ready-to-use css by simply adding this line to your project's entry point:
+
+{% highlight js %}
+import 'bootstrap/dist/css/bootstrap.min.css';
+{% endhighlight %}
+
+In this case you may use your existing rule for `css` without any special modifications to webpack config.
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-07 21:42:55 +0000