From 3e896193abb3e529abd9260ebfc60d284071c4f3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Jul 2014 23:33:54 -0700 Subject: new navbar ideas --- docs/components/navbar.md | 154 +++++++++++++++++++++--------------------- docs/components/new-navbar.md | 122 +++++++++++++++++++++++++++++++++ 2 files changed, 198 insertions(+), 78 deletions(-) create mode 100644 docs/components/new-navbar.md (limited to 'docs/components') diff --git a/docs/components/navbar.md b/docs/components/navbar.md index 6bbd297b5..7066483dc 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -3,85 +3,84 @@ layout: page title: Navbar --- -
-

Navbar

- - -

Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

- -
-

Overflowing content

-

Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:

-
    -
  1. Reduce the amount or width of navbar items.
    2. -
  2. Hide certain navbar items at certain screen sizes using responsive utility classes.
    3. -
  3. 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.
    4. -
-
-
-

Requires JavaScript

-

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.

-
-
-

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).

-
+## Default navbar + +Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases. + +
+

Overflowing content

+

Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:

+
    +
  1. Reduce the amount or width of navbar items.
    2. +
  2. Hide certain navbar items at certain screen sizes using responsive utility classes.
    3. +
  3. 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.
    4. +
+
+
+

Requires JavaScript

+

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.

+
+
+

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).

+
-
- -
{% highlight html %} {% endhighlight %} -
diff --git a/docs/components/new-navbar.md b/docs/components/new-navbar.md new file mode 100644 index 000000000..4e79f83fb --- /dev/null +++ b/docs/components/new-navbar.md @@ -0,0 +1,122 @@ +--- +layout: page +title: New navbar +--- + +Proposal to replace the existing navbar with something simpler and more customizable. + +
+

+ Navbar +

+
+ +
+

+ Navbar +

+ +
+ +
+

+ Navbar +

+ + +
+ +
+

+ Navbar +

+ +
+ + +
+
+ +
+

+ Navbar +

+ +
+ + +
+
+ + +
+ + + +
+ + -- cgit v1.2.3