From ea407666ce3c5d708b4a830fb2d00bdcb0d2d53e Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Tue, 11 Nov 2014 20:23:49 -0800 Subject: give all docs callouts IDs [skip sauce] --- docs/_includes/components/navbar.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'docs/_includes/components/navbar.html') diff --git a/docs/_includes/components/navbar.html b/docs/_includes/components/navbar.html index 0cc1faaba..0b9b42327 100644 --- a/docs/_includes/components/navbar.html +++ b/docs/_includes/components/navbar.html @@ -14,16 +14,16 @@
  • Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.
    • -
    +

    Requires JavaScript plugin

    If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.

    The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

    -
    +

    Changing the collapsed mobile navbar breakpoint

    The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).

    -
    +

    Make navbars accessible

    Be sure to add a role="navigation" to every navbar to help with accessibility.

    @@ -201,12 +201,12 @@ {% endhighlight %} -
    +

    Mobile device caveats

    There are some caveats regarding using form controls within fixed elements on mobile devices. See our browser support docs for details.

    -
    +

    Always add labels

    Screen readers will have trouble with your forms if you don't include a label for every input. For these inline navbar forms, you can hide the labels using the .sr-only class.

    @@ -236,7 +236,7 @@ {% endhighlight %} -
    +

    Context-specific usage

    Like the standard button classes, .navbar-btn can be used on <a> and <input> elements. However, neither .navbar-btn nor the standard button classes should be used on <a> elements within .navbar-nav.

    @@ -294,7 +294,7 @@

    Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <ul> with the respective utility class applied.

    These classes are mixin-ed versions of .pull-left and .pull-right, but they're scoped to media queries for easier handling of navbar components across device sizes.

    -
    +

    Right aligning multiple components

    Navbars currently have a limitation with multiple .navbar-right classes. To properly space content, we use negative margin on the last .navbar-right element. When there are multiple elements using that class, these margins don't work as intended.

    We'll revisit this when we can rewrite that component in v4.

    @@ -335,7 +335,7 @@ {% endhighlight %} -
    +

    Body padding required

    The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

    {% highlight scss %} @@ -379,7 +379,7 @@ body { padding-top: 70px; } {% endhighlight %} -
    +

    Body padding required

    The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

    {% highlight scss %} -- cgit v1.2.3