From c48219023c6c1041b8f38a8a3b3c25280760d09c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?E=C3=B6ras?= Date: Tue, 12 Jun 2018 10:05:13 +0200 Subject: [PATCH 1/3] Update bootstrap.rst --- frontend/encore/bootstrap.rst | 66 +++++++++++++---------------------- 1 file changed, 24 insertions(+), 42 deletions(-) diff --git a/frontend/encore/bootstrap.rst b/frontend/encore/bootstrap.rst index c8843f44eb2..e4738eea895 100644 --- a/frontend/encore/bootstrap.rst +++ b/frontend/encore/bootstrap.rst @@ -1,18 +1,24 @@ -Using Bootstrap CSS & JS +Using Bootstrap 4 CSS & JS ======================== Want to use Bootstrap (or something similar) in your project? No problem! First, install it. To be able to customize things further, we'll install -``bootstrap-sass``: +``bootstrap`` and popper.js: .. code-block:: terminal - $ yarn add bootstrap-sass --dev + $ yarn add bootstrap popper.js --dev -Importing Bootstrap Sass +or if you prefer to use npm: + +.. code-block:: terminal + + $ npm install bootstrap popper.js --save-dev + +Importing Bootstrap 4 ------------------------ -Now that ``bootstrap-sass`` lives in your ``node_modules`` directory, you can +Now that ``bootstrap`` lives in your ``node_modules`` directory, you can import it from any Sass or JavaScript file. For example, if you already have a ``global.scss`` file, import it from there: @@ -21,46 +27,18 @@ a ``global.scss`` file, import it from there: // assets/css/global.scss // customize some Bootstrap variables - $brand-primary: darken(#428bca, 20%); + $primary: darken(#428bca, 20%); // the ~ allows you to reference things in node_modules - @import '~bootstrap-sass/assets/stylesheets/bootstrap'; + @import "~bootstrap/scss/bootstrap"; -That's it! This imports the ``node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss`` +That's it! This imports the ``node_modules/bootstrap/scss/bootstrap.scss`` file into ``global.scss``. You can even customize the Bootstrap variables first! .. tip:: If you don't need *all* of Bootstrap's features, you can include specific files - in the ``bootstrap`` directory instead - e.g. ``~bootstrap-sass/assets/stylesheets/bootstrap/alerts``. - -After including ``bootstrap-sass``, your Webpack builds might become slow. To fix -this, you can use the ``resolveUrlLoader`` option: - -.. code-block:: diff - - // webpack.config.js - Encore - + .enableSassLoader(function(sassOptions) {}, { - + resolveUrlLoader: false - + }) - ; - -This disables the ``resolve-url-loader`` in Webpack, which means that any -``url()`` paths in your Sass files must now be relative to the original source -entry file instead of whatever file you're inside of (see `Problems with url()`_). -To load Bootstrap, you'll need to override the path to its icons: - -.. code-block:: diff - - // assets/css/global.scss - - + $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; - - + // set if you're also including font-awesome - + // $fa-font-path: "~font-awesome/fonts"; - - @import '~bootstrap-sass/assets/stylesheets/bootstrap'; + in the ``bootstrap`` directory instead - e.g. ``~bootstrap/scss/alert``. Importing Bootstrap JavaScript ------------------------------ @@ -70,6 +48,10 @@ Bootstrap JavaScript requires jQuery, so make sure you have this installed: .. code-block:: terminal $ yarn add jquery --dev + +.. code-block:: terminal + + $ npm install jquery --save-dev Next, make sure to call ``.autoProvidejQuery()`` in your ``webpack.config.js`` file: @@ -86,16 +68,16 @@ variable. Now, require bootstrap from any of your JavaScript files: .. code-block:: javascript - // main.js + // app.js - var $ = require('jquery'); + const $ = require('jquery'); // JS is equivalent to the normal "bootstrap" package // no need to set this to a variable, just require it - require('bootstrap-sass'); + require('bootstrap'); // or you can include specific pieces - // require('bootstrap-sass/javascripts/bootstrap/tooltip'); - // require('bootstrap-sass/javascripts/bootstrap/popover'); + // require('bootstrap/js/dist/tooltip'); + // require('bootstrap/js/dist/popover'); $(document).ready(function() { $('[data-toggle="popover"]').popover(); From efe64943a5707b4d3ed62f5e99e8a17444087668 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?E=C3=B6ras?= Date: Tue, 12 Jun 2018 10:09:21 +0200 Subject: [PATCH 2/3] Update bootstrap.rst --- frontend/encore/bootstrap.rst | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/encore/bootstrap.rst b/frontend/encore/bootstrap.rst index e4738eea895..dcdc174792b 100644 --- a/frontend/encore/bootstrap.rst +++ b/frontend/encore/bootstrap.rst @@ -1,5 +1,5 @@ Using Bootstrap 4 CSS & JS -======================== +============================ Want to use Bootstrap (or something similar) in your project? No problem! First, install it. To be able to customize things further, we'll install @@ -41,7 +41,7 @@ file into ``global.scss``. You can even customize the Bootstrap variables first! in the ``bootstrap`` directory instead - e.g. ``~bootstrap/scss/alert``. Importing Bootstrap JavaScript ------------------------------- +--------------------------------- Bootstrap JavaScript requires jQuery, so make sure you have this installed: From ba084140d131922c9dc5cc478471b14be578e41e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?E=C3=B6ras?= Date: Tue, 19 Jun 2018 11:03:56 +0200 Subject: [PATCH 3/3] Update bootstrap.rst Update after comments --- frontend/encore/bootstrap.rst | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/frontend/encore/bootstrap.rst b/frontend/encore/bootstrap.rst index dcdc174792b..f39f779e452 100644 --- a/frontend/encore/bootstrap.rst +++ b/frontend/encore/bootstrap.rst @@ -1,19 +1,13 @@ -Using Bootstrap 4 CSS & JS +Using Bootstrap CSS & JS ============================ Want to use Bootstrap (or something similar) in your project? No problem! First, install it. To be able to customize things further, we'll install -``bootstrap`` and popper.js: +``bootstrap``: .. code-block:: terminal - $ yarn add bootstrap popper.js --dev - -or if you prefer to use npm: - -.. code-block:: terminal - - $ npm install bootstrap popper.js --save-dev + $ yarn add bootstrap --dev Importing Bootstrap 4 ------------------------ @@ -48,10 +42,6 @@ Bootstrap JavaScript requires jQuery, so make sure you have this installed: .. code-block:: terminal $ yarn add jquery --dev - -.. code-block:: terminal - - $ npm install jquery --save-dev Next, make sure to call ``.autoProvidejQuery()`` in your ``webpack.config.js`` file: