From ba7d9217323e8f0ecf6d8548779cc399ac0f5c51 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 7 Aug 2017 21:42:36 -0700 Subject: clarify optional js, add some links, emphasize some text --- docs/4.0/getting-started/introduction.md | 5 +++-- docs/4.0/getting-started/javascript.md | 6 ++++-- 2 files changed, 7 insertions(+), 4 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/introduction.md b/docs/4.0/getting-started/introduction.md index 233c82883..b135326e7 100644 --- a/docs/4.0/getting-started/introduction.md +++ b/docs/4.0/getting-started/introduction.md @@ -24,7 +24,7 @@ Copy-paste the stylesheet `` into your `` before all other styleshee {% endhighlight %} -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. +Add our optional JavaScript plugins, jQuery, and [Popper.js](https://github.com/FezVrasta/popper.js)) near the end of your pages, right before the closing `` tag. Be sure to place jQuery and Popper.js first, as our JavaScript plugins depend 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 %} @@ -52,7 +52,8 @@ Be sure to have your pages set up with the latest design and development standar

Hello, world!

- + + diff --git a/docs/4.0/getting-started/javascript.md b/docs/4.0/getting-started/javascript.md index c4fb2366a..003ebdb7b 100644 --- a/docs/4.0/getting-started/javascript.md +++ b/docs/4.0/getting-started/javascript.md @@ -1,7 +1,7 @@ --- layout: docs title: JavaScript -description: Bring Bootstrap to life with our JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more. +description: Bring Bootstrap to life with our optional JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more. group: getting-started toc: true --- @@ -12,7 +12,9 @@ Plugins can be included individually (using Bootstrap's individual `*.js` files) ## 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. +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. + +Our tooltips and popovers also depend on [Popper.js](https://github.com/FezVrasta/popper.js). ## Data attributes -- cgit v1.2.3 From 4e07146624f0c1dac765c984a2ecca90fcc3113e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 7 Aug 2017 21:57:08 -0700 Subject: rewrite parts of download page --- docs/4.0/getting-started/download.md | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/download.md b/docs/4.0/getting-started/download.md index 468575494..3837d296a 100644 --- a/docs/4.0/getting-started/download.md +++ b/docs/4.0/getting-started/download.md @@ -6,28 +6,44 @@ group: getting-started toc: true --- -## Bootstrap CSS and JS +## Compiled 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. +Download ready-to-use compiled code for **Bootstrap v{{ site.current_version}}** to easily drop into your project, which includes: -**Current version:** v{{ site.current_version}} +- Compiled and minified CSS bundles (default, grid-only, and Reboot-only) +- Compiled and minified JavaScript plugins -Download Bootstrap +This doesn't include documentation, source files, or any optional JavaScript dependencies (jQuery and Popper.js). + +Download ## 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), and [some setup]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/build-tools/#tooling-setup). + +Compile Bootstrap with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling: + +- Sass compiler (Libsass or Ruby Sass is supported) for compiling your CSS. +- [Autoprefixer](https://github.com/postcss/autoprefixer) for CSS vendor prefixing + +Should you require [build tools]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/build-tools/#tooling-setup), they are included for developing Bootstrap and it's docs, but they're likely unsuitable for your own purposes. Download source ## Bootstrap CDN -Skip the download and use the Bootstrap CDN to deliver Bootstrap's compiled CSS and JS to your project. +Skip the download with the Bootstrap CDN to deliver cached version of Bootstrap's compiled CSS and JS to your project. {% highlight html %} {% endhighlight %} +If you're using our compiled JavaScript, don't forget to include CDN versions of jQuery and Popper.js before it. + +{% highlight html %} + + +{% 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 and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions. -- cgit v1.2.3 From 209a9635391a4137cd2792f4227ab1c95742a5a2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 7 Aug 2017 21:57:28 -0700 Subject: remove commented out code while here --- docs/4.0/getting-started/introduction.md | 4 ---- 1 file changed, 4 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/introduction.md b/docs/4.0/getting-started/introduction.md index b135326e7..6423209be 100644 --- a/docs/4.0/getting-started/introduction.md +++ b/docs/4.0/getting-started/introduction.md @@ -10,10 +10,6 @@ redirect_from: toc: true --- - - - - ## 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 }}/docs/{{ site.docs_version }}/getting-started/download/) -- cgit v1.2.3 From 55389673814dc96d5477f679052013db5e10ea66 Mon Sep 17 00:00:00 2001 From: Varunram Date: Fri, 16 Jun 2017 19:18:21 +0530 Subject: Add event.preventDefault documentation to javascript.md --- docs/4.0/getting-started/javascript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/javascript.md b/docs/4.0/getting-started/javascript.md index 003ebdb7b..bd2f969ff 100644 --- a/docs/4.0/getting-started/javascript.md +++ b/docs/4.0/getting-started/javascript.md @@ -36,7 +36,7 @@ $(document).off('.alert.data-api') 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. +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. Returning false from an event handler will also automatically call `preventDefault()` {% highlight js %} $('#myModal').on('show.bs.modal', function (e) { -- cgit v1.2.3 From caa7117e231b27e5359a9aa822bcff60defa0393 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 16 Jun 2017 18:59:43 -0700 Subject: Update javascript.md --- docs/4.0/getting-started/javascript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/javascript.md b/docs/4.0/getting-started/javascript.md index bd2f969ff..92891a2ab 100644 --- a/docs/4.0/getting-started/javascript.md +++ b/docs/4.0/getting-started/javascript.md @@ -36,7 +36,7 @@ $(document).off('.alert.data-api') 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. Returning false from an event handler will also automatically call `preventDefault()` +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. Returning false from an event handler will also automatically call `preventDefault()`. {% highlight js %} $('#myModal').on('show.bs.modal', function (e) { -- cgit v1.2.3 From b5f89d5672822734d0023cfc1e026b8985b97f1c Mon Sep 17 00:00:00 2001 From: Christian Oliff Date: Fri, 11 Aug 2017 07:06:15 +0100 Subject: Remove the Internet Explorer 10 for Windows Phone 8 workaround (#23122) I suggest that there's no longer a need to include the section on workaround for the IE10 bug on Windows Phone 8. Not only was this bug patched in a later release of Windows Phone 8 (which shipped in 2013), but Windows Phone 8's support ended a long time ago - even its successor Windows Phone 8.1 is no longer supported by Microsoft. The potential audience affected by this bug is likely microscopic so I suggest it can be safely removed. I suggest the workaround JS (http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js) can also be safely removed from the docs and examples but I haven't done that in this PR. --- docs/4.0/getting-started/browsers-devices.md | 22 ---------------------- 1 file changed, 22 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/browsers-devices.md b/docs/4.0/getting-started/browsers-devices.md index 426692b32..b5a6cc763 100644 --- a/docs/4.0/getting-started/browsers-devices.md +++ b/docs/4.0/getting-started/browsers-devices.md @@ -105,28 +105,6 @@ Internet Explorer 10+ is supported; IE9 and down is not. Please be aware that so **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 -- cgit v1.2.3 From 06044d5f827b0b9e611110f59aef77bb603102ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?b=C3=A9la?= Date: Fri, 11 Aug 2017 12:54:24 +0200 Subject: Update Rubygems version. (#23289) --- docs/4.0/getting-started/download.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/download.md b/docs/4.0/getting-started/download.md index 3837d296a..0edee619b 100644 --- a/docs/4.0/getting-started/download.md +++ b/docs/4.0/getting-started/download.md @@ -68,13 +68,13 @@ Bootstrap's `package.json` contains some additional metadata under the following 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.alpha6' +gem 'bootstrap', '~> 4.0.0.beta' {% 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.alpha6 +gem install bootstrap -v 4.0.0.beta {% endhighlight %} [See the gem's README](https://github.com/twbs/bootstrap-rubygem/blob/master/README.md) for further details. -- cgit v1.2.3 From 537b5f012771069b182aabab651eff9723d785b0 Mon Sep 17 00:00:00 2001 From: Jan Karlo Dela Cruz Date: Fri, 11 Aug 2017 14:26:51 +0100 Subject: Fix broken links in documentation. (#23315) --- docs/4.0/getting-started/webpack.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/webpack.md b/docs/4.0/getting-started/webpack.md index 84ad74c7f..ec748c48e 100644 --- a/docs/4.0/getting-started/webpack.md +++ b/docs/4.0/getting-started/webpack.md @@ -8,11 +8,11 @@ toc: true ## Installing Bootstrap -[Install bootstrap](/getting-started/download/#npm) as a node module using npm. +[Install bootstrap]({{ site.baseurl }}/docs/{{ site.docs_version }}/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 (usually `index.js` or `app.js`): +Import [Bootstrap's JavaScript]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/) by adding this line to your app's entry point (usually `index.js` or `app.js`): {% highlight js %} import 'bootstrap'; @@ -55,7 +55,7 @@ Notice that if you chose to **import plugins individually**, you must also insta 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]({{ site.baseurl }}/docs/{{ site.docs_version }}/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"; -- cgit v1.2.3 From f8e89c52b5d53ecd76a86b83988e98df8b307522 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 11 Aug 2017 16:50:08 +0300 Subject: Fix JavaScript case and a typo. (#23320) --- docs/4.0/getting-started/javascript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/javascript.md b/docs/4.0/getting-started/javascript.md index 92891a2ab..b33789b72 100644 --- a/docs/4.0/getting-started/javascript.md +++ b/docs/4.0/getting-started/javascript.md @@ -119,6 +119,6 @@ Bootstrap's plugins don't fall back particularly gracefully when JavaScript is d ## Util -All Bootstrap Javascript depend on `util.js` and it has to be included 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. +All Bootstrap's JavaScript files depend on `util.js` and it has to be included 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. `util.js` includes utility functions and 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. -- cgit v1.2.3 From 6a5a38106ac518f0cd493901aac69c38e216944d Mon Sep 17 00:00:00 2001 From: Chirag Modi Date: Fri, 11 Aug 2017 20:10:41 +0530 Subject: Fix broken links in doc (#23324) --- docs/4.0/getting-started/options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/options.md b/docs/4.0/getting-started/options.md index 4788c847a..0b83c47f8 100644 --- a/docs/4.0/getting-started/options.md +++ b/docs/4.0/getting-started/options.md @@ -27,7 +27,7 @@ You can find and customize these variables for key global options in our `_varia | Variable | Values | Description | | --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- | -| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities](/utilities/spacing/). | +| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). | | `$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. | -- cgit v1.2.3 From 716e1247bf70d2fb57065179846fe1d423ace369 Mon Sep 17 00:00:00 2001 From: Steven Black Date: Fri, 11 Aug 2017 11:50:03 -0400 Subject: =?UTF-8?q?=E2=80=9CSass=E2=80=9D=20is=20standard=20in=20text=20an?= =?UTF-8?q?d=20headings.=20(#23328)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/4.0/getting-started/webpack.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/webpack.md b/docs/4.0/getting-started/webpack.md index ec748c48e..d1a40cfed 100644 --- a/docs/4.0/getting-started/webpack.md +++ b/docs/4.0/getting-started/webpack.md @@ -51,7 +51,7 @@ Notice that if you chose to **import plugins individually**, you must also insta ## Importing Styles -### Importing Precompiled SASS +### 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. -- cgit v1.2.3 From ea854233b70a4420d20eaacf507865f395134cae Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Mon, 14 Aug 2017 09:28:16 -0700 Subject: v4 docs Add description for global variable `$enable-caret` --- docs/4.0/getting-started/options.md | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/options.md b/docs/4.0/getting-started/options.md index 0b83c47f8..2a9fb5ca8 100644 --- a/docs/4.0/getting-started/options.md +++ b/docs/4.0/getting-started/options.md @@ -28,6 +28,7 @@ You can find and customize these variables for key global options in our `_varia | Variable | Values | Description | | --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- | | `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). | +| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. | | `$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. | -- cgit v1.2.3 From 2564ee98a6272ef527d563e158e8f19224b7d2d3 Mon Sep 17 00:00:00 2001 From: Cory Becker Date: Mon, 14 Aug 2017 11:45:54 -0500 Subject: Remove apostrophe --- docs/4.0/getting-started/download.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/download.md b/docs/4.0/getting-started/download.md index 0edee619b..29d09a5c5 100644 --- a/docs/4.0/getting-started/download.md +++ b/docs/4.0/getting-started/download.md @@ -24,7 +24,7 @@ Compile Bootstrap with your own asset pipeline by downloading our source Sass, J - Sass compiler (Libsass or Ruby Sass is supported) for compiling your CSS. - [Autoprefixer](https://github.com/postcss/autoprefixer) for CSS vendor prefixing -Should you require [build tools]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/build-tools/#tooling-setup), they are included for developing Bootstrap and it's docs, but they're likely unsuitable for your own purposes. +Should you require [build tools]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/build-tools/#tooling-setup), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes. Download source -- cgit v1.2.3 From 1b959642919e8e5fa592509cdd62dfa3e92f2aba Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 16 Aug 2017 18:52:24 +0300 Subject: browsers-devices.md: fix typo. (#23495) --- docs/4.0/getting-started/browsers-devices.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/browsers-devices.md b/docs/4.0/getting-started/browsers-devices.md index b5a6cc763..6ecec961b 100644 --- a/docs/4.0/getting-started/browsers-devices.md +++ b/docs/4.0/getting-started/browsers-devices.md @@ -1,7 +1,7 @@ --- layout: docs title: Browsers and devices -description: Learn about the browsers and devices, from modern to told, that are supported by Bootstrap, including known quirks and bugs for each. +description: Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each. group: getting-started toc: true --- -- cgit v1.2.3 From c770e6883695e8b5d92a1107d3a49b1cb63655b6 Mon Sep 17 00:00:00 2001 From: Tanguy Krotoff Date: Tue, 5 Sep 2017 00:29:05 +0200 Subject: Drop Bower support (#23568) --- docs/4.0/getting-started/download.md | 10 +--------- docs/4.0/getting-started/javascript.md | 2 +- 2 files changed, 2 insertions(+), 10 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/download.md b/docs/4.0/getting-started/download.md index 29d09a5c5..a5a586e9c 100644 --- a/docs/4.0/getting-started/download.md +++ b/docs/4.0/getting-started/download.md @@ -1,7 +1,7 @@ --- layout: docs title: Download -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. +description: Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more. group: getting-started toc: true --- @@ -87,14 +87,6 @@ You can also install and manage Bootstrap's Sass and JavaScript using [Composer] 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): diff --git a/docs/4.0/getting-started/javascript.md b/docs/4.0/getting-started/javascript.md index b33789b72..12e7f89ca 100644 --- a/docs/4.0/getting-started/javascript.md +++ b/docs/4.0/getting-started/javascript.md @@ -12,7 +12,7 @@ Plugins can be included individually (using Bootstrap's individual `*.js` files) ## 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. +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 `package.json`]({{ site.repo }}/blob/v{{ site.current_version }}/package.json) to see which versions of jQuery are supported. Our tooltips and popovers also depend on [Popper.js](https://github.com/FezVrasta/popper.js). -- cgit v1.2.3 From d8881c2f97a082f09fb37ae2c29ccf02e445f320 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Morva=20Krist=C3=B3f?= Date: Tue, 5 Sep 2017 00:39:00 +0200 Subject: Removing extra bracket in introduction docs. (#23791) --- docs/4.0/getting-started/introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/introduction.md b/docs/4.0/getting-started/introduction.md index 6423209be..67aa01203 100644 --- a/docs/4.0/getting-started/introduction.md +++ b/docs/4.0/getting-started/introduction.md @@ -20,7 +20,7 @@ Copy-paste the stylesheet `` into your `` before all other styleshee {% endhighlight %} -Add our optional JavaScript plugins, jQuery, and [Popper.js](https://github.com/FezVrasta/popper.js)) near the end of your pages, right before the closing `` tag. Be sure to place jQuery and Popper.js first, as our JavaScript plugins depend 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 optional JavaScript plugins, jQuery, and [Popper.js](https://github.com/FezVrasta/popper.js) near the end of your pages, right before the closing `` tag. Be sure to place jQuery and Popper.js first, as our JavaScript plugins depend 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 %} -- cgit v1.2.3 From 88eca66a34ed511591fa22e7f1ce214b40cb3106 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Sep 2017 20:42:16 -0700 Subject: add title to starter template code snippet --- docs/4.0/getting-started/introduction.md | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/introduction.md b/docs/4.0/getting-started/introduction.md index 67aa01203..08dd83209 100644 --- a/docs/4.0/getting-started/introduction.md +++ b/docs/4.0/getting-started/introduction.md @@ -38,6 +38,7 @@ Be sure to have your pages set up with the latest design and development standar + Hello, world! -- cgit v1.2.3 From fbd1f52f896c599211c24c5c86d04fbbb3e88165 Mon Sep 17 00:00:00 2001 From: vsn4ik Date: Tue, 5 Sep 2017 01:36:09 +0300 Subject: Use site.repo in docs --- docs/4.0/getting-started/browsers-devices.md | 2 +- docs/4.0/getting-started/build-tools.md | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/browsers-devices.md b/docs/4.0/getting-started/browsers-devices.md index 6ecec961b..fdad8fffd 100644 --- a/docs/4.0/getting-started/browsers-devices.md +++ b/docs/4.0/getting-started/browsers-devices.md @@ -133,7 +133,7 @@ Bootstrap includes a workaround for this, although it is disabled by default. By 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: +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]({{ site.repo }}/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 { diff --git a/docs/4.0/getting-started/build-tools.md b/docs/4.0/getting-started/build-tools.md index dd3cac0be..f8fb03fdc 100644 --- a/docs/4.0/getting-started/build-tools.md +++ b/docs/4.0/getting-started/build-tools.md @@ -8,13 +8,13 @@ toc: true ## 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. +Bootstrap uses [NPM scripts](https://docs.npmjs.com/misc/scripts) for its build system. Our [package.json]({{ site.repo }}/blob/v{{ site.current_version }}/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. -2. 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. +2. Navigate to the root `/bootstrap` directory and run `npm install` to install our local dependencies listed in [package.json]({{ site.repo }}/blob/v{{ site.current_version }}/package.json). +3. [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 commands provided from the command line. @@ -24,7 +24,7 @@ When completed, you'll be able to run the various commands provided from the com ## Using NPM scripts -Our [package.json](https://github.com/twbs/bootstrap/blob/master/package.json) includes the following commands and tasks: +Our [package.json]({{ site.repo }}/blob/v{{ site.current_version }}/package.json) includes the following commands and tasks: | Task | Description | | --- | --- | @@ -36,7 +36,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.config.js`](https://github.com/twbs/bootstrap/blob/v4-dev/build/postcss.config.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]({{ site.repo }}/blob/v{{ site.current_version }}/build/postcss.config.js) for details. ## Local documentation -- cgit v1.2.3 From 02c7eae47efc11b533d3b2fd076c60154715ebfd Mon Sep 17 00:00:00 2001 From: Herst Date: Thu, 7 Sep 2017 19:11:26 +0200 Subject: Don't create empty columns in documentation --- docs/4.0/getting-started/options.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/options.md b/docs/4.0/getting-started/options.md index 0b83c47f8..2547ef1ad 100644 --- a/docs/4.0/getting-started/options.md +++ b/docs/4.0/getting-started/options.md @@ -46,11 +46,11 @@ All colors available in Bootstrap 4, available as Sass variables and a Sass map
{% for color in site.data.colors %} + {% unless color.name == "white" or color.name == "gray" or color.name == "gray-dark" %}
- {% unless color.name == "white" or color.name == "gray" or color.name == "gray-dark" %}
{{ color.name | capitalize }}
- {% endunless %}
+ {% endunless %} {% endfor %}
-- cgit v1.2.3 From 5da8ff61ad6dbe080f32f1bdc999466f247a3f7e Mon Sep 17 00:00:00 2001 From: vsn4ik Date: Fri, 8 Sep 2017 03:06:02 +0300 Subject: Use CSS3 pseudo elements in documentation --- docs/4.0/getting-started/introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/introduction.md b/docs/4.0/getting-started/introduction.md index 08dd83209..4035ae8f4 100644 --- a/docs/4.0/getting-started/introduction.md +++ b/docs/4.0/getting-started/introduction.md @@ -97,7 +97,7 @@ On the rare occasion you need to override it, use something like the following: } {% 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`. +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/). -- cgit v1.2.3 From 388356acdfa8fac31773a881290ec5696e71208c Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 26 Sep 2017 12:30:58 +0300 Subject: docs: fix syntax highlighting for shell scripts. (#24103) Switch all instances to `sh` but keep `bash` so that things won't break either way. --- docs/4.0/getting-started/download.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/download.md b/docs/4.0/getting-started/download.md index a5a586e9c..33014a110 100644 --- a/docs/4.0/getting-started/download.md +++ b/docs/4.0/getting-started/download.md @@ -52,7 +52,7 @@ Pull in Bootstrap's **source files** into nearly any project with some of the mo Install Bootstrap in your Node powered apps with [the npm package](https://www.npmjs.com/package/bootstrap): -{% highlight bash %} +{% highlight sh %} npm install bootstrap@{{ site.current_version }} {% endhighlight %} @@ -73,7 +73,7 @@ gem 'bootstrap', '~> 4.0.0.beta' Alternatively, if you're not using Bundler, you can install the gem by running this command: -{% highlight bash %} +{% highlight sh %} gem install bootstrap -v 4.0.0.beta {% endhighlight %} @@ -83,7 +83,7 @@ gem install bootstrap -v 4.0.0.beta You can also install and manage Bootstrap's Sass and JavaScript using [Composer](https://getcomposer.org): -{% highlight bash %} +{% highlight sh %} composer require twbs/bootstrap:{{ site.current_version }} {% endhighlight %} -- cgit v1.2.3 From 31c872191380d4cd32af379b9d24359d6a9dc34c Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 26 Sep 2017 15:24:14 +0300 Subject: Normalize all links. (#24109) * use a trailing slash when possible * use https when possible * remove a few redirected links * consistently use `https://popper.js.org/` * fix `iconUrl` in nuget files * change Jekyll Windows guide to the official one --- docs/4.0/getting-started/browsers-devices.md | 4 ++-- docs/4.0/getting-started/build-tools.md | 2 +- docs/4.0/getting-started/download.md | 4 ++-- docs/4.0/getting-started/introduction.md | 2 +- docs/4.0/getting-started/javascript.md | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/browsers-devices.md b/docs/4.0/getting-started/browsers-devices.md index fdad8fffd..1cd4f24a3 100644 --- a/docs/4.0/getting-started/browsers-devices.md +++ b/docs/4.0/getting-started/browsers-devices.md @@ -101,7 +101,7 @@ For a list of some of the browser bugs that Bootstrap has to grapple with, see o ## 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. +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...](https://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. @@ -167,7 +167,7 @@ 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. +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. diff --git a/docs/4.0/getting-started/build-tools.md b/docs/4.0/getting-started/build-tools.md index f8fb03fdc..c675fee89 100644 --- a/docs/4.0/getting-started/build-tools.md +++ b/docs/4.0/getting-started/build-tools.md @@ -15,7 +15,7 @@ To use our build system and run our documentation locally, you'll need a copy of 1. [Download and install Node](https://nodejs.org/download/), which we use to manage our dependencies. 2. Navigate to the root `/bootstrap` directory and run `npm install` to install our local dependencies listed in [package.json]({{ site.repo }}/blob/v{{ site.current_version }}/package.json). 3. [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. + - **Windows users:** Read [this guide](https://jekyllrb.com/docs/windows/) to get Jekyll up and running without problems. When completed, you'll be able to run the various commands provided from the command line. diff --git a/docs/4.0/getting-started/download.md b/docs/4.0/getting-started/download.md index 33014a110..e3544f6ce 100644 --- a/docs/4.0/getting-started/download.md +++ b/docs/4.0/getting-started/download.md @@ -81,7 +81,7 @@ gem install bootstrap -v 4.0.0.beta ### Composer -You can also install and manage Bootstrap's Sass and JavaScript using [Composer](https://getcomposer.org): +You can also install and manage Bootstrap's Sass and JavaScript using [Composer](https://getcomposer.org/): {% highlight sh %} composer require twbs/bootstrap:{{ site.current_version }} @@ -89,7 +89,7 @@ composer require twbs/bootstrap:{{ site.current_version }} ### 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): +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 diff --git a/docs/4.0/getting-started/introduction.md b/docs/4.0/getting-started/introduction.md index 4035ae8f4..f8b23652e 100644 --- a/docs/4.0/getting-started/introduction.md +++ b/docs/4.0/getting-started/introduction.md @@ -20,7 +20,7 @@ Copy-paste the stylesheet `` into your `` before all other styleshee {% endhighlight %} -Add our optional JavaScript plugins, jQuery, and [Popper.js](https://github.com/FezVrasta/popper.js) near the end of your pages, right before the closing `` tag. Be sure to place jQuery and Popper.js first, as our JavaScript plugins depend 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 optional JavaScript plugins, jQuery, and [Popper.js](https://popper.js.org/) near the end of your pages, right before the closing `` tag. Be sure to place jQuery and Popper.js first, as our JavaScript plugins depend 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 %} diff --git a/docs/4.0/getting-started/javascript.md b/docs/4.0/getting-started/javascript.md index 12e7f89ca..c29895f37 100644 --- a/docs/4.0/getting-started/javascript.md +++ b/docs/4.0/getting-started/javascript.md @@ -14,7 +14,7 @@ Plugins can be included individually (using Bootstrap's individual `*.js` files) 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 `package.json`]({{ site.repo }}/blob/v{{ site.current_version }}/package.json) to see which versions of jQuery are supported. -Our tooltips and popovers also depend on [Popper.js](https://github.com/FezVrasta/popper.js). +Our tooltips and popovers also depend on [Popper.js](https://popper.js.org/). ## Data attributes -- cgit v1.2.3 From 7e6374db92ea11c9d9bb6dcfd693ca6b8ffd3276 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 26 Sep 2017 14:50:35 +0300 Subject: Minor Markdown consistency changes. --- docs/4.0/getting-started/best-practices.md | 1 + docs/4.0/getting-started/browsers-devices.md | 1 + docs/4.0/getting-started/javascript.md | 1 + 3 files changed, 3 insertions(+) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/best-practices.md b/docs/4.0/getting-started/best-practices.md index 0e4792513..feb751cab 100644 --- a/docs/4.0/getting-started/best-practices.md +++ b/docs/4.0/getting-started/best-practices.md @@ -12,6 +12,7 @@ We've designed and developed Bootstrap to work in a number of environments. Here {% endcallout %} ### General outline + - Working with CSS - Working with Sass files - Building new CSS components diff --git a/docs/4.0/getting-started/browsers-devices.md b/docs/4.0/getting-started/browsers-devices.md index 1cd4f24a3..6ffb73792 100644 --- a/docs/4.0/getting-started/browsers-devices.md +++ b/docs/4.0/getting-started/browsers-devices.md @@ -125,6 +125,7 @@ The `.dropdown-backdrop` element isn't used on iOS in the nav because of the com 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. diff --git a/docs/4.0/getting-started/javascript.md b/docs/4.0/getting-started/javascript.md index c29895f37..9e080dc32 100644 --- a/docs/4.0/getting-started/javascript.md +++ b/docs/4.0/getting-started/javascript.md @@ -84,6 +84,7 @@ $('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the s {% endhighlight %} ### Default settings + You can change the default settings for a plugin by modifying the plugin's `Constructor.Default` object: {% highlight js %} -- cgit v1.2.3 From 92d3536306d2de9b5e3a0ddb31f2a61e524b1e19 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 26 Sep 2017 16:43:56 +0300 Subject: Mention that dropdowns depend on popper.js too. --- docs/4.0/getting-started/javascript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/javascript.md b/docs/4.0/getting-started/javascript.md index 9e080dc32..648132255 100644 --- a/docs/4.0/getting-started/javascript.md +++ b/docs/4.0/getting-started/javascript.md @@ -14,7 +14,7 @@ Plugins can be included individually (using Bootstrap's individual `*.js` files) 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 `package.json`]({{ site.repo }}/blob/v{{ site.current_version }}/package.json) to see which versions of jQuery are supported. -Our tooltips and popovers also depend on [Popper.js](https://popper.js.org/). +Our dropdowns, popovers and tooltips also depend on [Popper.js](https://popper.js.org/). ## Data attributes -- cgit v1.2.3 From f17443748dd266c0dc766e5252d7e4bcf9d04086 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sun, 17 Sep 2017 08:39:45 +0300 Subject: Move Autoprefixer's config in package.json. This is so other plugins can use it too. --- docs/4.0/getting-started/build-tools.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/build-tools.md b/docs/4.0/getting-started/build-tools.md index c675fee89..82b8586ec 100644 --- a/docs/4.0/getting-started/build-tools.md +++ b/docs/4.0/getting-started/build-tools.md @@ -36,7 +36,7 @@ Our [package.json]({{ site.repo }}/blob/v{{ site.current_version }}/package.json 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.config.js]({{ site.repo }}/blob/v{{ site.current_version }}/build/postcss.config.js) for details. +We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [/package.json]({{ site.repo }}/blob/v{{ site.current_version }}/package.json) for details. ## Local documentation -- cgit v1.2.3 From d66f47d0991346d00b83643c0cfed8bfaef19e04 Mon Sep 17 00:00:00 2001 From: Moris Zen Pasic Date: Thu, 21 Sep 2017 15:17:41 +0200 Subject: Making the customization option docs cleared about variable overrides with !default flag --- docs/4.0/getting-started/options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/options.md b/docs/4.0/getting-started/options.md index 2547ef1ad..c9b1d7d9f 100644 --- a/docs/4.0/getting-started/options.md +++ b/docs/4.0/getting-started/options.md @@ -8,7 +8,7 @@ toc: true ## Customizing variables -Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can override that default value in your own Sass even after that original variable's been defined. Copy and paste variables as needed, modify the values, remove the `!default` flag, and recompile. +Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can override that default value in your own Sass. Copy and paste variables as needed, modify the values, remove the !default flag, and recompile. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap. This means that your modified Sass variables should be called before you import Bootstrap Sass files. For example, to change out the `background-color` and `color` for the ``, you'd do the following: -- cgit v1.2.3 From bc2db58b7309c654a2169d1340c34035d146bbe2 Mon Sep 17 00:00:00 2001 From: Moris Zen Pasic Date: Thu, 21 Sep 2017 16:57:36 +0200 Subject: Added examples to the existing docs change for more clarity --- docs/4.0/getting-started/options.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/options.md b/docs/4.0/getting-started/options.md index c9b1d7d9f..a830d81af 100644 --- a/docs/4.0/getting-started/options.md +++ b/docs/4.0/getting-started/options.md @@ -8,13 +8,15 @@ toc: true ## Customizing variables -Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can override that default value in your own Sass. Copy and paste variables as needed, modify the values, remove the !default flag, and recompile. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap. This means that your modified Sass variables should be called before you import Bootstrap Sass files. - -For example, to change out the `background-color` and `color` for the ``, you'd do the following: +Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can override that default value in your own Sass. Copy and paste variables as needed, modify the values and remove the !default flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap. This means that your modified Sass variables should be called before you import Bootstrap Sass files. For example, to change out the `background-color` and `color` for the ``, you'd do the following:: {% highlight scss %} -$body-bg: $gray-900; -$body-color: $gray-600; +// Your variable overwrite first or a Sass file containing the modifications +$body-bg: #000000; +$body-color: #ffffff; + +// Then import Bootstrap +@import "node_modules/bootstrap/scss/bootstrap"; {% endhighlight %} Do the same for any variable you need to override, including the global options listed below. -- cgit v1.2.3 From 4cfe228151bf75a932537b01e14466d9a2d45807 Mon Sep 17 00:00:00 2001 From: Moris Zen Pasic Date: Thu, 21 Sep 2017 19:44:13 +0200 Subject: Changed hex values to follow bootstrap coding guidelines --- docs/4.0/getting-started/options.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/options.md b/docs/4.0/getting-started/options.md index a830d81af..3b9629f7f 100644 --- a/docs/4.0/getting-started/options.md +++ b/docs/4.0/getting-started/options.md @@ -12,8 +12,8 @@ Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can {% highlight scss %} // Your variable overwrite first or a Sass file containing the modifications -$body-bg: #000000; -$body-color: #ffffff; +$body-bg: #000; +$body-color: #111; // Then import Bootstrap @import "node_modules/bootstrap/scss/bootstrap"; -- cgit v1.2.3 From e471ea0617559ab17ea3705b24e3ba55d9ad5fa9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 30 Sep 2017 23:57:50 -0700 Subject: Updates to customizing variables docs (#24186) * Variable overrides within the same Sass file can come before or after the default value, but across files they must come first. * Removed the double :: at the end of the paragraph. * Fixed usage of overwrite when we mean override. --- docs/4.0/getting-started/options.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/options.md b/docs/4.0/getting-started/options.md index 3b9629f7f..5095997e3 100644 --- a/docs/4.0/getting-started/options.md +++ b/docs/4.0/getting-started/options.md @@ -8,18 +8,22 @@ toc: true ## Customizing variables -Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can override that default value in your own Sass. Copy and paste variables as needed, modify the values and remove the !default flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap. This means that your modified Sass variables should be called before you import Bootstrap Sass files. For example, to change out the `background-color` and `color` for the ``, you'd do the following:: +Every Sass variable in Bootstrap 4 includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap. + +Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap's Sass files. + +Here's an example that changes the `background-color` and `color` for the `` when importing and compiling Bootstrap via npm: {% highlight scss %} -// Your variable overwrite first or a Sass file containing the modifications +// Your variable overrides $body-bg: #000; $body-color: #111; -// Then import Bootstrap +// Bootstrap and its default variables @import "node_modules/bootstrap/scss/bootstrap"; {% endhighlight %} -Do the same for any variable you need to override, including the global options listed below. +Repeat as necessary for any variable in Bootstrap, including the global options below. ## Global options -- cgit v1.2.3 From 44dcc8d719a9f3a45915db1f6136457682d7c628 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 27 Sep 2017 16:47:38 +0300 Subject: Make Node.js 6 the minimum version. Also, be consistent with Node.js' name. --- docs/4.0/getting-started/build-tools.md | 2 +- docs/4.0/getting-started/download.md | 2 +- docs/4.0/getting-started/webpack.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/build-tools.md b/docs/4.0/getting-started/build-tools.md index 82b8586ec..64b032021 100644 --- a/docs/4.0/getting-started/build-tools.md +++ b/docs/4.0/getting-started/build-tools.md @@ -12,7 +12,7 @@ Bootstrap uses [NPM scripts](https://docs.npmjs.com/misc/scripts) for its build 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. [Download and install Node.js](https://nodejs.org/download/), which we use to manage our dependencies. 2. Navigate to the root `/bootstrap` directory and run `npm install` to install our local dependencies listed in [package.json]({{ site.repo }}/blob/v{{ site.current_version }}/package.json). 3. [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 guide](https://jekyllrb.com/docs/windows/) to get Jekyll up and running without problems. diff --git a/docs/4.0/getting-started/download.md b/docs/4.0/getting-started/download.md index e3544f6ce..cce660178 100644 --- a/docs/4.0/getting-started/download.md +++ b/docs/4.0/getting-started/download.md @@ -50,7 +50,7 @@ Pull in Bootstrap's **source files** into nearly any project with some of the mo ### npm -Install Bootstrap in your Node powered apps with [the npm package](https://www.npmjs.com/package/bootstrap): +Install Bootstrap in your Node.js powered apps with [the npm package](https://www.npmjs.com/package/bootstrap): {% highlight sh %} npm install bootstrap@{{ site.current_version }} diff --git a/docs/4.0/getting-started/webpack.md b/docs/4.0/getting-started/webpack.md index d1a40cfed..04af8d4f6 100644 --- a/docs/4.0/getting-started/webpack.md +++ b/docs/4.0/getting-started/webpack.md @@ -8,7 +8,7 @@ toc: true ## Installing Bootstrap -[Install bootstrap]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/#npm) as a node module using npm. +[Install bootstrap]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/#npm) as a Node.js module using npm. ## Importing JavaScript -- cgit v1.2.3 From 00a0a4debd54b818e7162854df87f68f92bcf243 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 21 Aug 2017 20:27:07 -0700 Subject: Stub out new Theming page --- docs/4.0/getting-started/theming.md | 114 ++++++++++++++++++++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 docs/4.0/getting-started/theming.md (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md new file mode 100644 index 000000000..5861058e9 --- /dev/null +++ b/docs/4.0/getting-started/theming.md @@ -0,0 +1,114 @@ +--- +layout: docs +title: Theming Bootstrap +description: Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes. +group: getting-started +toc: true +--- + +## Introduction + +In Bootstrap 3, theming was largely driven by variable overrides in LESS, custom CSS, and a separate theme stylesheet that we included in our `dist` files. With some effort, one could completely redesign the look of Bootstrap 3 without touching the core files. Bootstrap 4 provides a familiar, but slightly different approach. + +Now, theming is accomplished by Sass variables, Sass maps, and custom CSS. There's no more dedicated theme stylesheet anymore; instead, you can enable the built-in theme to add gradients, shadows, and more. + +## Sass + +Utilize our source Sass files to take advantage of variables, maps, mixins, and more. + +### File structure + +Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you've downloaded our source files or are using package manager, you'll have a file structure that looks like this: + +{% highlight plaintext %} +your-project/ +├── scss +│ └── custom.scss +└── node_modules/ + └── bootstrap + ├── js + └── scss +{% endhighlight %} + +In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins. + +{% highlight scss %} +// Custom.scss +// Option A: Include all of Bootstrap + +@import "node_modules/bootstrap/scss/bootstrap"; +{% endhighlight %} + +{% highlight scss %} +// Custom.scss +// Option B: Include parts of Bootstrap + +// Required +@import "node_modules/bootstrap/scss/functions"; +@import "node_modules/bootstrap/scss/variables"; +@import "node_modules/bootstrap/scss/mixins"; + +// Optional +@import "node_modules/bootstrap/scss/reboot"; +@import "node_modules/bootstrap/scss/type"; +@import "node_modules/bootstrap/scss/images"; +@import "node_modules/bootstrap/scss/code"; +@import "node_modules/bootstrap/scss/grid"; +{% endhighlight %} + +With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. + +### Variable defaults + +Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can override that default value in your own Sass even after that original variable's been defined. Copy and paste variables as needed, modify the values, remove the `!default` flag, and recompile. + +For example, to change out the `color` and `background-color` for the ``, you'd do the following: + +{% highlight scss %} +$body-color: $gray-600; +$body-bg: $gray-900; +{% endhighlight %} + +Do the same for any variable in `scss/_variables.scss` you need to override. + +### Maps and loops + +Bootstrap 4 includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the `!default` flag and can be overridden and extended. + +For example, to modify an existing color in our `$theme-colors` map, add the following to your custom Sass file: + +{% highlight scss %} +$theme-colors: ( + primary: $red, + danger: $orange +); +{% endhighlight %} + +**TODO:** +- Adding an option +- Removing an option (replacing the map wholesale) + +### Functions + +**TODO:** +- Are these even considered part of the theme-ability of Bootstrap? Should this fall elsewhere? + + +## Sass options + +**TODO:** +- pull in the `options.md` section here +- create a redirect from there + +## Colors + +**TODO:** +- pull in the `options.md` section here +- add a theme-colors customization option +- fallback variables +- mentino component modifiers get changed + +## Components + +**TODO:** +- how to change component mixins? -- cgit v1.2.3 From af28d5554144c6ebaec1f9991df19de75d5317c6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Oct 2017 12:16:46 -0700 Subject: port latest from options for default vars --- docs/4.0/getting-started/theming.md | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index 5861058e9..4f201c88d 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -60,16 +60,22 @@ With that setup in place, you can begin to modify any of the Sass variables and ### Variable defaults -Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can override that default value in your own Sass even after that original variable's been defined. Copy and paste variables as needed, modify the values, remove the `!default` flag, and recompile. +Every Sass variable in Bootstrap 4 includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap. -For example, to change out the `color` and `background-color` for the ``, you'd do the following: +Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap's Sass files. + +Here's an example that changes the `background-color` and `color` for the `` when importing and compiling Bootstrap via npm: {% highlight scss %} -$body-color: $gray-600; -$body-bg: $gray-900; +// Your variable overrides +$body-bg: #000; +$body-color: #111; + +// Bootstrap and its default variables +@import "node_modules/bootstrap/scss/bootstrap"; {% endhighlight %} -Do the same for any variable in `scss/_variables.scss` you need to override. +Repeat as necessary for any variable in Bootstrap, including the global options below. ### Maps and loops -- cgit v1.2.3 From f0c82ab4ec8ca136dad1b50bdef7515090be4f14 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Oct 2017 12:20:42 -0700 Subject: port over variable options list --- docs/4.0/getting-started/theming.md | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index 4f201c88d..d52f6e260 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -102,9 +102,20 @@ $theme-colors: ( ## Sass options -**TODO:** -- pull in the `options.md` section here -- create a redirect from there +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 | +| --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- | +| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). | +| `$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. | ## Colors -- cgit v1.2.3 From bdba863e831b01e827077a11695a7e106f2716db Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Oct 2017 12:20:58 -0700 Subject: bring over colors section --- docs/4.0/getting-started/theming.md | 78 ++++++++++++++++++++++++++++++++++++- 1 file changed, 77 insertions(+), 1 deletion(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index d52f6e260..144282e57 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -117,7 +117,7 @@ You can find and customize these variables for key global options in our `_varia | `$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. | -## Colors +## Color **TODO:** - pull in the `options.md` section here @@ -125,6 +125,82 @@ You can find and customize these variables for key global options in our `_varia - fallback variables - mentino component modifiers get changed +Many of Bootstrap's various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets. + +### All colors + +All colors available in Bootstrap 4, available as Sass variables and a Sass map in our `scss/_variables.scss` file. This will be expanded upon in subsequent minor releases to add additional shades, much like the [grayscale palette](#grays) we already include. + +
+ {% for color in site.data.colors %} + {% unless color.name == "white" or color.name == "gray" or color.name == "gray-dark" %} +
+
{{ color.name | capitalize }}
+
+ {% endunless %} + {% endfor %} +
+ +Here's how you can use these in your Sass: + +{% highlight scss %} +// With variable +.alpha { color: $purple; } + +// From the Sass map with our `color()` function +.beta { color: color("purple"); } +{% endhighlight %} + +[Color utility classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) are also available for setting `color` and `background-color`. + +{% callout info %} +In the future, we'll aim to provide Sass maps and variables for shades of each color as we've done with the grayscale colors below. +{% endcallout %} + +### Theme colors + +We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in our `scss/_variables.scss` file. + +
+ {% for color in site.data.theme-colors %} +
+
{{ color.name | capitalize }}
+
+ {% endfor %} +
+ +### Grays + +An expansive set of gray variables and a Sass map in `scss/_variables.scss` for consistent shades of gray across your project. + +
+
+ {% for color in site.data.grays %} +
{{ color.name | capitalize }}
+ {% endfor %} +
+
+ +Within `_variables.scss`, you'll find our color variables and Sass map. Here's an example of the `$colors` Sass map: + +{% highlight scss %} +$colors: ( + red: $red, + orange: $orange, + yellow: $yellow, + green: $green, + teal: $teal, + blue: $blue, + pink: $pink, + purple: $purple, + white: $white, + gray: $gray-600, + gray-dark: $gray-900 +) !default; +{% endhighlight %} + +Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map. + ## Components **TODO:** -- cgit v1.2.3 From 201303a9d9a311f4edacd659463451f89255e4b1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Oct 2017 12:21:32 -0700 Subject: nuke the options page, add redirect from it to new theming page --- docs/4.0/getting-started/options.md | 121 ------------------------------------ docs/4.0/getting-started/theming.md | 1 + 2 files changed, 1 insertion(+), 121 deletions(-) delete mode 100644 docs/4.0/getting-started/options.md (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/options.md b/docs/4.0/getting-started/options.md deleted file mode 100644 index 5095997e3..000000000 --- a/docs/4.0/getting-started/options.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -layout: docs -title: Customization options -description: Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes. -group: getting-started -toc: true ---- - -## Customizing variables - -Every Sass variable in Bootstrap 4 includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap. - -Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap's Sass files. - -Here's an example that changes the `background-color` and `color` for the `` when importing and compiling Bootstrap via npm: - -{% highlight scss %} -// Your variable overrides -$body-bg: #000; -$body-color: #111; - -// Bootstrap and its default variables -@import "node_modules/bootstrap/scss/bootstrap"; -{% endhighlight %} - -Repeat as necessary for any variable in Bootstrap, including the global options below. - -## 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 | -| --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- | -| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). | -| `$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. | - -## Color - -Many of Bootstrap's various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets. - -### All colors - -All colors available in Bootstrap 4, available as Sass variables and a Sass map in our `scss/_variables.scss` file. This will be expanded upon in subsequent minor releases to add additional shades, much like the [grayscale palette](#grays) we already include. - -
- {% for color in site.data.colors %} - {% unless color.name == "white" or color.name == "gray" or color.name == "gray-dark" %} -
-
{{ color.name | capitalize }}
-
- {% endunless %} - {% endfor %} -
- -Here's how you can use these in your Sass: - -{% highlight scss %} -// With variable -.alpha { color: $purple; } - -// From the Sass map with our `color()` function -.beta { color: color("purple"); } -{% endhighlight %} - -[Color utility classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) are also available for setting `color` and `background-color`. - -{% callout info %} -In the future, we'll aim to provide Sass maps and variables for shades of each color as we've done with the grayscale colors below. -{% endcallout %} - -### Theme colors - -We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in our `scss/_variables.scss` file. - -
- {% for color in site.data.theme-colors %} -
-
{{ color.name | capitalize }}
-
- {% endfor %} -
- -### Grays - -An expansive set of gray variables and a Sass map in `scss/_variables.scss` for consistent shades of gray across your project. - -
-
- {% for color in site.data.grays %} -
{{ color.name | capitalize }}
- {% endfor %} -
-
- -Within `_variables.scss`, you'll find our color variables and Sass map. Here's an example of the `$colors` Sass map: - -{% highlight scss %} -$colors: ( - red: $red, - orange: $orange, - yellow: $yellow, - green: $green, - teal: $teal, - blue: $blue, - pink: $pink, - purple: $purple, - white: $white, - gray: $gray-600, - gray-dark: $gray-900 -) !default; -{% endhighlight %} - -Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map. diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index 144282e57..aac906f71 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -4,6 +4,7 @@ title: Theming Bootstrap description: Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes. group: getting-started toc: true +redirect_from: "/docs/4.0/getting-started/options/" --- ## Introduction -- cgit v1.2.3 From 04298fcd105da4e11c0ef84eb0d38eba8dd75390 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Oct 2017 12:26:02 -0700 Subject: quote those to match source code --- docs/4.0/getting-started/theming.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index aac906f71..f40ae51f4 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -86,8 +86,8 @@ For example, to modify an existing color in our `$theme-colors` map, add the fol {% highlight scss %} $theme-colors: ( - primary: $red, - danger: $orange + "primary": $red, + "danger": $orange ); {% endhighlight %} @@ -186,17 +186,17 @@ Within `_variables.scss`, you'll find our color variables and Sass map. Here's a {% highlight scss %} $colors: ( - red: $red, - orange: $orange, - yellow: $yellow, - green: $green, - teal: $teal, - blue: $blue, - pink: $pink, - purple: $purple, - white: $white, - gray: $gray-600, - gray-dark: $gray-900 + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "blue": $blue, + "pink": $pink, + "purple": $purple, + "white": $white, + "gray": $gray-600, + "gray-dark": $gray-900 ) !default; {% endhighlight %} -- cgit v1.2.3 From 9db52f9a47453db8998d3619afd14995f00fb7d2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Oct 2017 12:54:24 -0700 Subject: add new thing to a map --- docs/4.0/getting-started/theming.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index f40ae51f4..cc5bdfe7d 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -91,9 +91,13 @@ $theme-colors: ( ); {% endhighlight %} -**TODO:** -- Adding an option -- Removing an option (replacing the map wholesale) +To add a new color to `$theme-colors`, add the new key and value: + +{% highlight scss %} +$theme-colors: ( + "custom-color": #900 +); +{% endhighlight %} ### Functions -- cgit v1.2.3 From 3d0b07cb68aec43a25b2d700708969815b782073 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Oct 2017 12:54:40 -0700 Subject: functions aww yeah --- docs/4.0/getting-started/theming.md | 47 +++++++++++++++++++++++++++++++++++-- 1 file changed, 45 insertions(+), 2 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index cc5bdfe7d..04ecb7a3c 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -101,9 +101,52 @@ $theme-colors: ( ### Functions -**TODO:** -- Are these even considered part of the theme-ability of Bootstrap? Should this fall elsewhere? +Bootstrap utilizes several Sass functions, but only a subset are applicable to general theming. We've included three functions for getting values from the color maps: + +{% highlight scss %} +@function color($key: "blue") { + @return map-get($colors, $key); +} + +@function theme-color($key: "primary") { + @return map-get($theme-colors, $key); +} + +@function gray($key: "100") { + @return map-get($grays, $key); +} +{% endhighlight %} + +These allow you to pick one color from a Sass map much like how you'd use a color variable from v3. + +{% highlight scss %} +.custom-element { + color: gray("100"); + background-color: theme-color("dark"); +} +{% endhighlight %} + +We also have another function for getting a particular _level_ of color from the `$theme-colors` map. Negative level values will lighten the color, while higher levels will darken. + +{% highlight scss %} +@function theme-color-level($color-name: "primary", $level: 0) { + $color: theme-color($color-name); + $color-base: if($level > 0, #000, #fff); + $level: abs($level); + + @return mix($color-base, $color, $level * $theme-color-interval); +} +{% endhighlight %} + +In practice, you'd call the function and pass in two parameters: the name of the color from `$theme-colors` (e.g., primary or danger) and a numeric level. + +{% highlight scss %} +.custom-element { + color: theme-color-level(primary, -10); +} +{% endhighlight %} +Additional functions could be added in the future or your own custom Sass to create level functions for additional Sass maps, or even a generic one if you wanted to be more verbose. ## Sass options -- cgit v1.2.3 From cf639df5c4f6c9582cfa05525a6222314e43a33c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Oct 2017 13:58:09 -0700 Subject: add components section, remove todos --- docs/4.0/getting-started/theming.md | 47 ++++++++++++++++++++++++++++++------- 1 file changed, 39 insertions(+), 8 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index 04ecb7a3c..b74a8b38d 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -167,12 +167,6 @@ You can find and customize these variables for key global options in our `_varia ## Color -**TODO:** -- pull in the `options.md` section here -- add a theme-colors customization option -- fallback variables -- mentino component modifiers get changed - Many of Bootstrap's various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets. ### All colors @@ -251,5 +245,42 @@ Add, remove, or modify values within the map to update how they're used in many ## Components -**TODO:** -- how to change component mixins? +Many of Bootstrap's components and utilities are built with `@each` loops that iterate over a Sass map. This is especially helpful for generating variants of a component by our `$theme-colors` and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you'll automatically see your changes reflected in these loops. + +### Modifiers + +Many of Bootstrap's components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., `.btn`) while style variations are confined to modifier classes (e.g., `.btn-danger`). These modifier classes are built from the `$theme-colors` map to make customizing the number and name of our modifier classes. + +Here are two examples of how we loop over the `$theme-colors` map to generate modifiers to the `.alert` component and all our `.bg-*` background utilities. + +{% highlight scss %} +// Generate alert modifier classes +@each $color, $value in $theme-colors { + .alert-#{$color} { + @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6)); + } +} + +// Generate `.bg-*` color utilities +@each $color, $value in $theme-colors { + @include bg-variant('.bg-#{$color}', $value); +} +{% endhighlight %} + +### Responsive + +These Sass loops aren't limited to color maps, either. You can also generate responsive variations of your components or utilities. Take for example our responsive text alignment utilities where we mix an `@each` loop for the `$grid-breakpoints` Sass map with a media query include. + +{% highlight scss %} +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .text#{$infix}-left { text-align: left !important; } + .text#{$infix}-right { text-align: right !important; } + .text#{$infix}-center { text-align: center !important; } + } +} +{% endhighlight %} + +Should you need to modify your `$grid-breakpoints`, your changes will apply to all the loops iterating over that map. -- cgit v1.2.3 From cd8fd1d2bcc101e6e3066f142a61f92babb191d2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 2 Oct 2017 20:43:47 -0700 Subject: change away from vars --- docs/4.0/getting-started/theming.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index b74a8b38d..d03a25422 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -86,8 +86,8 @@ For example, to modify an existing color in our `$theme-colors` map, add the fol {% highlight scss %} $theme-colors: ( - "primary": $red, - "danger": $orange + "primary": #0074d9, + "danger": #ff4136 ); {% endhighlight %} -- cgit v1.2.3 From 976595bd1d716f8cbcd16ec76950bba303868f07 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 2 Oct 2017 17:32:30 -0700 Subject: Require quick start to be more explicit about CSS and JS --- docs/4.0/getting-started/introduction.md | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/introduction.md b/docs/4.0/getting-started/introduction.md index f8b23652e..29b8e7af1 100644 --- a/docs/4.0/getting-started/introduction.md +++ b/docs/4.0/getting-started/introduction.md @@ -14,13 +14,19 @@ toc: true 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 }}/docs/{{ site.docs_version }}/getting-started/download/) +### CSS + Copy-paste the stylesheet `` into your `` before all other stylesheets to load our CSS. {% highlight html %} {% endhighlight %} -Add our optional JavaScript plugins, jQuery, and [Popper.js](https://popper.js.org/) near the end of your pages, right before the closing `` tag. Be sure to place jQuery and Popper.js first, as our JavaScript plugins depend 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. +### JS + +Many of our components require the use of JavaScript to function. Specifically, they require [jQuery](https://jquery.com), [Popper.js](https://popper.js.org/), and our own JavaScript plugins. Place the following ` @@ -28,7 +34,22 @@ Add our optional JavaScript plugins, jQuery, and [Popper.js](https://popper.js.o {% 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. +Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template. + +
+Show components requiring JavaScript +{% markdown %} +- Alerts for dismissing +- Buttons for toggling states and checkbox/radio functionality +- Carousel for all slide behaviors, controls, and indicators +- Collapse for toggling visibility of content +- Dropdowns for displaying and positioning (also requires [Popper.js](https://popper.js.org/)) +- Modals for displaying, positioning, and scroll behavior +- Navbar for extending our Collapse plugin to implement responsive behavior +- Tooltips and popovers for displaying and positioning (also requires [Popper.js](https://popper.js.org/)) +- Scrollspy for scroll behavior and navigation updates +{% endmarkdown %} +
## Starter template -- cgit v1.2.3 From ee574b76a7274366a56b84b98f83e2b1b7b00122 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 3 Oct 2017 19:34:59 +0300 Subject: Switch to lowercase `doctype`. (#24217) Having it uppercase doesn't offer anything and the lowercase version slightly improves gzip compression. --- docs/4.0/getting-started/introduction.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/4.0/getting-started') diff --git a/docs/4.0/getting-started/introduction.md b/docs/4.0/getting-started/introduction.md index 29b8e7af1..8a3badc8d 100644 --- a/docs/4.0/getting-started/introduction.md +++ b/docs/4.0/getting-started/introduction.md @@ -56,7 +56,7 @@ Curious which components explicitly require jQuery, our JS, and Popper.js? Click 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 %} - + Hello, world! @@ -90,7 +90,7 @@ Bootstrap employs a handful of important global styles and settings that you'll 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 %} - + ... -- cgit v1.2.3