From 3a4760637f3acca9cbd8af2819d163848852a23a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 03:15:17 -0700 Subject: [PATCH] tweak navbar styles for static version to not cause problems on responsive layouts --- bootstrap.css | 4 +- bootstrap.min.css | 2 +- docs/index.html | 136 +++++++++++++++++++++++----------------------- lib/patterns.less | 2 - 4 files changed, 70 insertions(+), 74 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 887dbdd011..8b487fb7e3 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Sun Oct 16 03:07:49 PDT 2011 + * Date: Sun Oct 16 03:14:23 PDT 2011 */ /* Reset.less * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). @@ -1165,8 +1165,6 @@ table .headerSortUp.purple, table .headerSortDown.purple { margin-bottom: 18px; } .navbar-static .navbar-inner { - margin-left: -20px; - margin-right: -20px; padding-left: 20px; padding-right: 20px; -webkit-border-radius: 4px; diff --git a/bootstrap.min.css b/bootstrap.min.css index 9c59687997..cfec72ec12 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -194,7 +194,7 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .navbar-search .search-query:hover{background-color:#bfbfbf;background-color:rgba(255, 255, 255, 0.5);color:#ffffff;} .navbar-search .search-query:focus,.navbar-search .search-query.focused{outline:0;background-color:#ffffff;color:#404040;text-shadow:0 1px 0 #ffffff;border:0;padding:5px 10px;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);} .navbar-static{margin-bottom:18px;} -.navbar-static .navbar-inner{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} +.navbar-static .navbar-inner{padding-left:20px;padding-right:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .navbar-fixed{position:fixed;top:0;left:0;right:0;z-index:10000;} .nav{display:block;float:left;margin:0 10px 0 0;position:relative;left:0;}.nav>li{display:block;float:left;} .nav a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}.nav a:hover{color:#ffffff;text-decoration:none;} diff --git a/docs/index.html b/docs/index.html index 2db9719d1a..0e49e9cbd2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -242,20 +242,20 @@
-
+

Nesting columns

Nest your content if you must by creating a .row within an existing column.

-
+

Example of nested columns

-
+
Level 1 of column
-
+
Level 2
-
+
Level 2
@@ -282,11 +282,11 @@
-
+

Roll your own grid

Built into Bootstrap are a handful of variables for customizing the default 940px grid system. With a bit of customization, you can modify the size of columns, their gutters, and the container they reside in.

-
+

Inside the grid

The variables needed to modify the grid system currently all reside in preboot.less.

@@ -341,7 +341,7 @@
-
+

Fixed layout

The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div.container>.

@@ -355,7 +355,7 @@ </body>
-
+

Fluid layout

An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.

@@ -403,7 +403,7 @@
h5. Heading 5
h6. Heading 6
-
+

Example paragraph

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Example heading Has sub-heading…

@@ -412,7 +412,7 @@
-
+

Misc. elements

Using emphasis, addresses, & abbreviations

@@ -422,7 +422,7 @@ <abbr>

-
+

When to use

Emphasis tags (<strong> and <em>) should be used to indicate additional importance or emphasis of a word or phrase relative to its surrounding copy. Use <strong> for importance and <em> for stress emphasis.

Emphasis in a paragraph

@@ -456,7 +456,7 @@
-
+

Blockquotes

<blockquote> @@ -464,7 +464,7 @@ <small>

-
+

How to quote

To include a blockquote, wrap <blockquote> around <p> and <small> tags. Use the <small> element to cite your source and you'll get an em dash &mdash; before it.

@@ -482,7 +482,7 @@

Lists

-
+

Unordered <ul>

  • Lorem ipsum dolor sit amet
    • @@ -502,7 +502,7 @@
  • Eget porttitor lorem
-
+

Unstyled <ul.unstyled>

  • Lorem ipsum dolor sit amet
    • @@ -522,7 +522,7 @@
  • Eget porttitor lorem
-
+

Ordered <ol>

  1. Lorem ipsum dolor sit amet
    2. @@ -535,7 +535,7 @@
  2. Eget porttitor lorem
-
+

Description dl

Description lists
@@ -552,7 +552,7 @@
-
+

Code

<code> @@ -560,7 +560,7 @@

Pimp your code in style with two simple tags. For even more awesomeness through javascript, drop in Google's code prettify library and you're set.

-
+

Presenting code

Code, blocks of or just snippets inline, can be displayed with style just by wrapping in the right tag. For blocks of code spanning multiple lines, use the <pre> element. For inline code, use the <code> element.

@@ -603,14 +603,14 @@
-
+

Inline labels

<span class="label">

Call attention to or flag any phrase in your body text.

-
+

Label anything

Ever needed one of those fancy New! or Important flags when writing code? Well, now you have them. Here's what's included by default:

@@ -678,7 +678,7 @@
-
+

Building tables

<table> @@ -694,7 +694,7 @@

Always wrap your column headers in a <thead> such that hierarchy is <thead> > <tr> > <th>.

Similar to the column headers, all your table’s body content should be wrapped in a <tbody> so your hierarchy is <tbody> > <tr> > <td>.

-
+

Example: Default table styles

All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.

@@ -823,7 +823,7 @@

Forms

-
+

Four types of forms

With 2.0, we now have four types of forms to choose from:

    @@ -833,15 +833,15 @@
  • Vertical form for stacked labels and inputs
-
+

-
+

Search form

-
+
@@ -851,10 +851,10 @@
-
+

Inline form

-
+

Some directional text

@@ -868,10 +868,10 @@
-
+

Horizontal form

-
+
Example form
@@ -972,10 +972,10 @@
-
+

Vertical form

-
+
Example form
@@ -1016,12 +1016,12 @@
-
+

Buttons

As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.

All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue .primary class, a light-blue .info class, a green .success class, and a red .danger class.

-
+

Example buttons

Button styles can be applied to anything with the .btn applied. Typically you’ll want to apply these to only <a>, <button>, and select <input> elements. Here’s how it looks:

@@ -1052,10 +1052,10 @@
-
+

Button groups

-
+

Example

@@ -1101,11 +1101,11 @@
-
+

Media grid

Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.

-
+

Example thumbnails

Thumbnails in the .media-grid can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the .span2, .span4, and .span6 column sizes.

Large

@@ -1234,15 +1234,15 @@
-
+

What is it

Our topbar 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.

-
+

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.

@@ -1252,12 +1252,12 @@
-
+

Tabs and pills

Create simple secondary navigation with a <ul>. Swap between tabs or pills by adding the appropriate class.

Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.

-
+

Basic tabs example

Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a tabs plugin that can be used to integrate the latter.

    @@ -1288,7 +1288,7 @@

    Alternate tabs

    You can also use tabs that are stacked on either side of an element, or on the bottom.

    -
    +
    -
    +
    -
    +
    -
    +
    -
    +
    • Section 1
      • @@ -1450,11 +1450,11 @@
      -
      +

      Breadcrumbs

      Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.

      -
      +
      • Home
      @@ -1486,11 +1486,11 @@
      -
      +

      Pagination

      Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.

      -
      +
      -
      +

      Basic alerts

      .alert-message

      One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.

      Get the javascript »

      -
      +
      ×

      Holy guacamole! Best check yo self, you’re not looking too good.

      @@ -1595,13 +1595,13 @@
      -
      +

      Block messages

      .alert-message.block-message

      For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.

      Get the javascript »

      -
      +
      ×

      Holy guacamole! This is a warning! Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

      @@ -1658,12 +1658,12 @@

      Popovers Components for displaying content in modals, tooltips, and popovers

      -
      +

      Modals

      Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.

      Get the javascript »

      -
      +
      @@ -1685,12 +1685,12 @@
      -
      +

      Tooltips

      Twipsies are super useful for aiding a confused user and pointing them in the right direction.

      Get the javascript »

      -
      +

      @@ -1703,12 +1703,12 @@ Lorem ipsum dolar sit amet illo error ipsum verita

      -
      +

      Popovers

      Use popovers to provide subtextual information to a page without affecting layout.

      Get the javascript »

      -
      +
      @@ -1736,12 +1736,12 @@ Lorem ipsum dolar sit amet illo error ipsum verita

      Using javascript with Bootstrap An index of plugins to get you started

      -
      +

      Getting started

      Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!

      View javascript docs »

      -
      +

      What's included

      Bring some of Bootstrap's primary components to life with new custom plugins that work with jQuery and Ender. We encourage you to extend and modify them to fit your specific development needs.

@@ -1797,11 +1797,11 @@ Lorem ipsum dolar sit amet illo error ipsum verita

Using Bootstrap with Less Supercharge your CSS with variables, mixins, and functions

-
+

Bootstrap was built with Preboot, an open-source pack of mixins and variables to be used in conjunction with Less, a CSS preprocessor for faster and easier web development.

Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.

-
+

How to use it

Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.

diff --git a/lib/patterns.less b/lib/patterns.less
index af898a5614..950ac2feb9 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -111,8 +111,6 @@
   margin-bottom: @baseLineHeight;
 }
 .navbar-static .navbar-inner {
-  margin-left:  -20px;
-  margin-right: -20px;
   padding-left:  20px;
   padding-right: 20px;
   .border-radius(4px);