From f61fe3c4746ec09ff64756797fe6314be5f53b30 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Oct 2011 21:13:26 -0700 Subject: refactor fluid layout to be more specific to not interfere with modal content while adding right sidebar option --- docs/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 137144991..194111b78 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1278,7 +1278,7 @@ -
+
- +
-

Unstyled <.unstyled>

+

Unstyled <ul.unstyled>

- - + +

What is it

-

Our topbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.

+

Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.

Customizable

-

All elements within, and the entire topbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.

+

All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.

Dropdowns included

As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <li> tags also support .active for showing current page selection.

-

Note: When using the topbar on any page, be sure to account for the overlap it causes by adding padding-top: 40px; to your <body>.

+

Note: When using the navbar on any page, be sure to account for the overlap it causes by adding padding-top: 40px; to your <body>.


@@ -1875,11 +1875,11 @@ Lorem ipsum dolar sit amet illo error ipsum verita bootstrap-dropdown.js - This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations. + This plugin is for adding dropdown interaction to the bootstrap navbar or tabbed navigations. bootstrap-scrollspy.js - The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar. + The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap navbar. bootstrap-tabs.js -- cgit v1.2.3 From 369b9720c6090985c678076eebb59c080c0ed27c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Oct 2011 23:45:35 -0700 Subject: adding responsive stuff to docs to stub that out, updated type to make ul and ol margins match p tags --- docs/index.html | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) (limited to 'docs/index.html') diff --git a/docs/index.html b/docs/index.html index 7fe5ce1ca..aafea7662 100644 --- a/docs/index.html +++ b/docs/index.html @@ -399,6 +399,86 @@ + + +
+
+

Responsive design Media queries for various devices and resolutions

+
+ +
+
+ Responsive devices +
+
+

Supported devices

+ + + + + + + + + + +
+ Under 480px + Smartphones + + 480px to 768px + Portrait tablet + + 768px to 940px + Landscape tablet + + 940px and up + Default + + 1170px and up + Large screens +
+

With these media queries, Bootstrap provides developers with the core tools necessary to develop responsively on the web for the world's most common devices and resolutions.

+
+
+ +
+ + +

Using the media queries

+
+
+

Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

+
    +
  1. Use the compiled responsive version, bootstrap.reponsive.css
    2. +
  2. Add @import "responsive.less" and recompile Bootstrap
    3. +
  3. Compile responsive.less as a separate file and include that
    4. +
+

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

+
+
+
+  // Landscape phones and down
+  @media (max-width: 480px) { ... }
+
+  // Landscape phone to portrait tablet
+  @media (min-width: 480px) and (max-width: 768px) { ... }
+
+  // Portrait tablet to landscape and desktop
+  @media (min-width: 768px) and (max-width: 940px) { ... }
+
+  // Large desktop
+  @media (min-width: 1210px) { .. }
+
+
+
+ +
+ + + +
-- cgit v1.2.3