From 80f1bc338c1d784c045556dccfb5a51238558b93 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Sat, 21 Sep 2019 17:17:42 +0200 Subject: [PATCH] Documentation updates --- bundlesize.config.json | 4 +- scss/_grid.scss | 3 + site/content/docs/4.3/components/navbar.md | 103 ++++++++++++------ .../docs/4.3/examples/carousel/index.html | 10 +- .../docs/4.3/examples/navbar-fixed/index.html | 10 +- .../4.3/examples/navbar-static/index.html | 10 +- .../docs/4.3/examples/navbars/index.html | 18 +-- .../docs/4.3/examples/offcanvas/index.html | 10 +- .../4.3/examples/starter-template/index.html | 10 +- .../examples/sticky-footer-navbar/index.html | 10 +- site/content/docs/4.3/forms/form-control.md | 10 +- site/content/docs/4.3/forms/layout.md | 62 ++++++----- site/content/docs/4.3/forms/overview.md | 12 +- site/content/docs/4.3/layout/grid.md | 2 +- 14 files changed, 177 insertions(+), 97 deletions(-) diff --git a/bundlesize.config.json b/bundlesize.config.json index e82251e7c9bf..3a82127c6367 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -2,11 +2,11 @@ "files": [ { "path": "./dist/css/bootstrap-grid.css", - "maxSize": "7 kB" + "maxSize": "7.1 kB" }, { "path": "./dist/css/bootstrap-grid.min.css", - "maxSize": "6.2 kB" + "maxSize": "6.3 kB" }, { "path": "./dist/css/bootstrap-reboot.css", diff --git a/scss/_grid.scss b/scss/_grid.scss index be0cc3c79b4c..7a7e4fa023b1 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -72,6 +72,9 @@ @each $key, $value in $gutters { .g#{$infix}-#{$key}, .gx#{$infix}-#{$key} { + margin-right: -$value / 2; + margin-left: -$value / 2; + > * { padding-right: $value / 2; padding-left: $value / 2; diff --git a/site/content/docs/4.3/components/navbar.md b/site/content/docs/4.3/components/navbar.md index 9d3dd57a7c13..143c4c13abe9 100644 --- a/site/content/docs/4.3/components/navbar.md +++ b/site/content/docs/4.3/components/navbar.md @@ -29,7 +29,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from - `.navbar-brand` for your company, product, or project name. - `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns). - `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#responsive-behaviors) behaviors. -- `.form-inline` for any form controls and actions. +- `.row`s for grid content or any form controls and actions. - `.navbar-text` for adding vertically centered strings of text. - `.collapse.navbar-collapse` for grouping and hiding navbar contents by a parent breakpoint. @@ -65,9 +65,13 @@ Here's an example of all the sub-components included in a responsive light-theme Disabled -
- - + +
+ +
+
+ +
@@ -198,13 +202,18 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap ### Forms -Place various form controls and components within a navbar with `.form-inline`. +Place various form controls and components within a navbar with `.row`. {{< example >}} {{< /example >}} @@ -214,9 +223,14 @@ Immediate children elements in `.navbar` use flex layout and will default to `ju {{< example >}} {{< /example >}} @@ -225,7 +239,7 @@ Input groups work, too: {{< example >}} @@ -340,9 +359,14 @@ Theming the navbar has never been easier thanks to the combination of theming cl About -
- - + + +
+ +
+
+ +
@@ -368,9 +392,14 @@ Theming the navbar has never been easier thanks to the combination of theming cl About -
- - + + +
+ +
+
+ +
@@ -472,9 +501,13 @@ With no `.navbar-brand` shown in lowest breakpoint: Disabled -
- - + +
+ +
+
+ +
@@ -501,9 +534,13 @@ With a brand name shown on the left and toggler on the right: Disabled -
- - + +
+ +
+
+ +
@@ -530,9 +567,13 @@ With a toggler on the left and brand name on the right: Disabled -
- - + +
+ +
+
+ +
diff --git a/site/content/docs/4.3/examples/carousel/index.html b/site/content/docs/4.3/examples/carousel/index.html index 28116557b9f8..d7460ad68542 100644 --- a/site/content/docs/4.3/examples/carousel/index.html +++ b/site/content/docs/4.3/examples/carousel/index.html @@ -23,9 +23,13 @@ Disabled -
- - + +
+ +
+
+ +
diff --git a/site/content/docs/4.3/examples/navbar-fixed/index.html b/site/content/docs/4.3/examples/navbar-fixed/index.html index 0dc1702dc996..110b5fb980b2 100644 --- a/site/content/docs/4.3/examples/navbar-fixed/index.html +++ b/site/content/docs/4.3/examples/navbar-fixed/index.html @@ -22,9 +22,13 @@ Disabled -
- - + +
+ +
+
+ +
diff --git a/site/content/docs/4.3/examples/navbar-static/index.html b/site/content/docs/4.3/examples/navbar-static/index.html index aabbd01f0779..c979e3864cd0 100644 --- a/site/content/docs/4.3/examples/navbar-static/index.html +++ b/site/content/docs/4.3/examples/navbar-static/index.html @@ -22,9 +22,13 @@ Disabled -
- - + +
+ +
+
+ +
diff --git a/site/content/docs/4.3/examples/navbars/index.html b/site/content/docs/4.3/examples/navbars/index.html index 3ec8bb9c7387..690ef5b78424 100644 --- a/site/content/docs/4.3/examples/navbars/index.html +++ b/site/content/docs/4.3/examples/navbars/index.html @@ -31,7 +31,7 @@ -
+
@@ -52,7 +52,7 @@ Link -
+
@@ -84,7 +84,7 @@ -
+
@@ -116,7 +116,7 @@ -
+
@@ -148,7 +148,7 @@ -
+
@@ -180,7 +180,7 @@ -
+
@@ -213,7 +213,7 @@ -
+
@@ -247,7 +247,7 @@ -
+
@@ -313,7 +313,7 @@ -
+
diff --git a/site/content/docs/4.3/examples/offcanvas/index.html b/site/content/docs/4.3/examples/offcanvas/index.html index e6f734a4d6bf..c096fcfc3af3 100644 --- a/site/content/docs/4.3/examples/offcanvas/index.html +++ b/site/content/docs/4.3/examples/offcanvas/index.html @@ -37,9 +37,13 @@ -
- - + +
+ +
+
+ +
diff --git a/site/content/docs/4.3/examples/starter-template/index.html b/site/content/docs/4.3/examples/starter-template/index.html index dcd6d8732de7..f2513ccad619 100644 --- a/site/content/docs/4.3/examples/starter-template/index.html +++ b/site/content/docs/4.3/examples/starter-template/index.html @@ -31,9 +31,13 @@ -
- - + +
+ +
+
+ +
diff --git a/site/content/docs/4.3/examples/sticky-footer-navbar/index.html b/site/content/docs/4.3/examples/sticky-footer-navbar/index.html index c64e6bf001ef..49f0a51140af 100644 --- a/site/content/docs/4.3/examples/sticky-footer-navbar/index.html +++ b/site/content/docs/4.3/examples/sticky-footer-navbar/index.html @@ -26,9 +26,13 @@ Disabled -
- - + +
+ +
+
+ +
diff --git a/site/content/docs/4.3/forms/form-control.md b/site/content/docs/4.3/forms/form-control.md index fa27ebea4e59..fbb68a7908fa 100644 --- a/site/content/docs/4.3/forms/form-control.md +++ b/site/content/docs/4.3/forms/form-control.md @@ -61,16 +61,18 @@ If you want to have `` elements in your form styled as plain tex {{< /example >}} {{< example >}} -
-
+ +
-
+
- +
+ +
{{< /example >}} diff --git a/site/content/docs/4.3/forms/layout.md b/site/content/docs/4.3/forms/layout.md index 54c095c8d8ce..b8b01d205a73 100644 --- a/site/content/docs/4.3/forms/layout.md +++ b/site/content/docs/4.3/forms/layout.md @@ -293,43 +293,49 @@ You can then remix that once again with size-specific column classes. ## Inline forms -Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states. +Use the `.col-auto` class to create horizontal layouts. By adding the `.g-2` class, we'll have gutters in horizontal and vertical directions. The `.align-items-center` aligns the form elements to the middle, making the `.form-checkbox` align properly. -- Controls are `display: flex`, collapsing any HTML white space and allowing you to provide alignment control with [spacing]({{< docsref "/utilities/spacing" >}}) and [flexbox]({{< docsref "/utilities/flex" >}}) utilities. -- Controls and input groups receive `width: auto` to override the Bootstrap default `width: 100%`. -- Controls **only appear inline in viewports that are at least 576px wide** to account for narrow viewports on mobile devices. - -You may need to manually address the width and alignment of individual form controls with [spacing utilities]({{< docsref "/utilities/spacing" >}}) (as shown below). Lastly, be sure to always include a `