From 083271ae48d0ce1ff5b869413449f5ecf777b6e9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 May 2016 11:24:43 -0700 Subject: Update collapsible navbar docs - Add .text-muted for text color control over .bg-inverse in the examples - Add a dark navbar collapse example --- docs/components/navbar.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/navbar.md b/docs/components/navbar.md index 98e48fa77..d106795a8 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -245,7 +245,21 @@ Our collapse plugin allows you to use a `
-
+
+

Collapsed content

+ Toggleable via the navbar brand. +
+
+ +{% endexample %} + +{% example html %} + {% endexample %} +You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below. + +{% example html %} + +{% endexample %} + ## Color schemes -- cgit v1.2.3 From f98f9c91553b0c44c48b1a561411ff4e8714817a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 May 2016 12:41:26 -0700 Subject: add docs note to clear up #18599--active states for navbars can be on anchors or parents --- docs/components/navbar.md | 2 ++ 1 file changed, 2 insertions(+) (limited to 'docs/components') diff --git a/docs/components/navbar.md b/docs/components/navbar.md index 5f7f36634..3387374f3 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -75,6 +75,8 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as Navbar navigation is similar to our regular nav options—use the `.nav` base class with a modifier to achieve a particular look. In this case you'll want `.nav.navbar-nav`. +Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s. + {% example html %} {% endexample %} +### Text + +Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text. + +{% example html %} + +{% endexample %} + +Using our utility classes, you can change the alignment of your navbar text. + +{% example html %} + +{% endexample %} + ## Color schemes -- cgit v1.2.3 From d4457b33032d2540a4a3b7fa600f22055ce2000d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 May 2016 12:37:47 -0700 Subject: improve docs examples for .navbar-text --- docs/components/navbar.md | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) (limited to 'docs/components') diff --git a/docs/components/navbar.md b/docs/components/navbar.md index 086d49bcb..a82f881a2 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -142,18 +142,32 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj {% example html %} {% endexample %} -Using our utility classes, you can change the alignment of your navbar text. +Using our utility classes, you can change the alignment and appearance of your navbar text. {% example html %} {% endexample %} +Similarly, you can use utility classes to align navbar text to other navbar elements like the brand and navigation (which are automatically floated already). + +{% example html %} + +{% endexample %} ## Color schemes -- cgit v1.2.3 From d11c93341f392d654b2cb5cbefd399bbf1d81f00 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Sep 2016 13:32:09 -0700 Subject: fix that navbar toggler example in docs --- docs/components/navbar.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'docs/components') diff --git a/docs/components/navbar.md b/docs/components/navbar.md index bb390a55c..d3747a87f 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -316,9 +316,7 @@ Our collapse plugin allows you to use a ` +

Collapsed content

-- cgit v1.2.3 From 750a9d7d80119a03cd2d8f178429b2e021551356 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Oct 2016 15:08:34 -0700 Subject: fix bad merge --- docs/components/navbar.md | 1 - 1 file changed, 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/navbar.md b/docs/components/navbar.md index 4f791daf5..e26097da9 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -307,7 +307,6 @@ Our collapse plugin allows you to use a `
-

Collapsed content

Toggleable via the navbar brand. -- cgit v1.2.3 From 19d6092364e10ec90720290a1875734329b04088 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2016 20:45:12 -0700 Subject: drop data-target so the dropdown link works --- docs/components/navbar.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/navbar.md b/docs/components/navbar.md index e26097da9..3fc1c38ef 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -124,7 +124,7 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap Pricing
  • -
    -- cgit v1.2.3 From 25e63a7b5724f797a4683e421d2e09e1a869ab69 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Oct 2016 22:09:11 -0700 Subject: document new navbar classes and styles, update responsive variation, fix broken float classes --- docs/components/navbar.md | 48 ++++++++++++++++++++++++++++++----------------- 1 file changed, 31 insertions(+), 17 deletions(-) (limited to 'docs/components') diff --git a/docs/components/navbar.md b/docs/components/navbar.md index 3fc1c38ef..e312428da 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -5,7 +5,7 @@ description: Documentation and examples for Bootstrap's powerful, responsive nav group: components --- -The navbar is a simple wrapper for positioning branding, navigation, and other elements into a concise navigation header. It's easily extensible and, with the help of our collapse plugin, it can easily integrate offscreen content. +The navbar is a wrapper that positions branding, navigation, and other elements into a concise header. It's easily extensible and thanks to our Collapse plugin, it can easily integrate responsive behaviors. ## Contents @@ -18,18 +18,18 @@ Here's what you need to know before getting started with the navbar: - Navbars require a wrapping `.navbar` and a [color scheme](#color-schemes). - Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width. -- Use `.pull-*-left` and `.pull-*-right` to quickly align sub-components. +- Use `.float-*-left` and `.float-*-right` to quickly align sub-components. - Ensure accessibility by using a `
  • - Features + Link
  • - Pricing + Link
    • -
  • - About +
  • + +
    + Action + Another action + Something else here +
    • @@ -153,7 +158,7 @@ Using our utility classes, you can change the alignment and appearance of your n {% example html %} @@ -164,7 +169,7 @@ Similarly, you can use utility classes to align navbar text to other navbar elem {% example html %} @@ -319,23 +324,32 @@ For more complex navbar patterns, like those used in Bootstrap v3, use the `.nav {% example html %}
    {% endexample %} -- cgit v1.2.3 From 87689833fb1813091fee5b35c18af3fe8f307487 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Oct 2016 22:16:28 -0700 Subject: docs copy --- docs/components/navbar.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components') diff --git a/docs/components/navbar.md b/docs/components/navbar.md index e312428da..20a70a42e 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -29,7 +29,7 @@ Navbars come with built-in support for a handful of sub-components. Mix and matc - `.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](#collapsible-content) behaviors. -Here's an example of all the sub-components included in a responsive, "light" themed navbar. +Here's an example of all the sub-components included in a default, non-responsive light themed navbar. [See the responsive examples](#collapsible-content) for collapsing nav support. {% example html %} {% endexample %} +### Forms + +Place various form controls and components within a navbar with `.form-inline`. Align them with `.float-` utilities as needed. + +{% example html %} + +{% endexample %} + +Input groups work, too: + +{% example html %} + +{% endexample %} + +Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilites can be used to align different sized elements. + +{% example html %} + +{% endexample %} + ### Text Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text. -- cgit v1.2.3 From f8e4a531cf89ffcc602863a367f35cfd307e28fb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Oct 2016 00:30:59 -0700 Subject: alt attributes --- docs/components/navbar.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/components') diff --git a/docs/components/navbar.md b/docs/components/navbar.md index ee028d2c6..bb819ff9e 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -84,7 +84,7 @@ Adding images to the `.navbar-brand` will likely always require custom styles or {% endexample %} @@ -93,7 +93,7 @@ Adding images to the `.navbar-brand` will likely always require custom styles or -- cgit v1.2.3