From d5fabf8de50710c5a09ecd91f4b9e961e67d7937 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Tue, 18 Apr 2017 14:02:24 +0200 Subject: Remove totaly Tether from documentation + dependencies --- docs/getting-started/introduction.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'docs/getting-started') 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 `` into your `` before all other styleshee {% endhighlight %} -Add our JavaScript plugins, jQuery, and Tether near the end of your pages, right before the closing `` 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 `` 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 %} - + {% endhighlight %} @@ -53,9 +53,9 @@ Be sure to have your pages set up with the latest design and development standar

Hello, world!

- + - + -- cgit v1.2.3 From 5fa262adeceacb0bfc0a1d17d1ea9d061e3971f8 Mon Sep 17 00:00:00 2001 From: Ayachii Date: Thu, 25 May 2017 00:50:22 -0400 Subject: Fix 22643 - Readme links to vanished file (#22647) * Fixed dead link to browser list The link to the list of browsers supported through Autoprefixer was dead, now updated to a working link. * Updated label to display new file path Changed the labeling on the updated link to show read as the new updated file path. --- docs/getting-started/build-tools.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/getting-started') 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 -- cgit v1.2.3 From fc5e8b941511bc763ee6916c0fe14871437140e9 Mon Sep 17 00:00:00 2001 From: Idan Cohen Date: Fri, 26 May 2017 07:01:07 +0300 Subject: add webpack to documentation (#22423) * add webpack to documentation" implementing PR comments implementing PR comments * replace tether with popper --- docs/getting-started/webpack.md | 106 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 docs/getting-started/webpack.md (limited to 'docs/getting-started') 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. -- cgit v1.2.3