kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

tweak navbar styles for static version to not cause problems on responsive layouts

Browse source
This commit is contained in:
Mark Otto 2011-10-16 03:15:17 -07:00
parent be926a04bc
commit 3a4760637f
4 changed files with 70 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
bootstrap.css vendored
View file

@ -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;

2
bootstrap.min.css vendored
View file

@ -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;}

136
docs/index.html
View file

@ -242,20 +242,20 @@
<br>
<div class="row">
<div class="span4">
<div class="span3">
<h2>Nesting columns</h2>
<p>Nest your content if you must by creating a <code>.row</code> within an existing column.</p>
</div>
<div class="span12">
<div class="span9">
<h4>Example of nested columns</h4>
<div class="row show-grid">
<div class="span12">
<div class="span9">
Level 1 of column
<div class="row show-grid">
<div class="span6">
<div class="span4">
Level 2
</div>
<div class="span6">
<div class="span5">
Level 2
</div>
</div>
@ -282,11 +282,11 @@
<br>
<div class="row">
<div class="span4">
<div class="span3">
<h2>Roll your own grid</h2>
<p>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.</p>
</div>
<div class="span12">
<div class="span9">
<h3>Inside the grid</h3>
<p>The variables needed to modify the grid system currently all reside in <code>preboot.less</code>.</p>
<table class="zebra-striped">
@ -341,7 +341,7 @@
</div>
<div class="row">
<div class="span8">
<div class="span6">
<h2>Fixed layout</h2>
<p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div.container&gt;</code>.</p>
<div class="mini-layout">
@ -355,7 +355,7 @@
&lt;/body&gt;
</pre>
</div><!-- /col -->
<div class="span8">
<div class="span6">
<h2>Fluid layout</h2>
<p>An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.</p>
<div class="mini-layout fluid">
@ -403,7 +403,7 @@
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>
</div>
<div class="span8">
<div class="span4">
<h3>Example paragraph</h3>
<p>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.</p>
<h1>Example heading <small>Has sub-heading&hellip;</small></h1>
@ -412,7 +412,7 @@
<!-- Misc Elements -->
<div class="row">
<div class="span4">
<div class="span3">
<h2>Misc. elements</h2>
<p>Using emphasis, addresses, &amp; abbreviations</p>
<p>
@ -422,7 +422,7 @@
<code>&lt;abbr&gt;</code>
</p>
</div>
<div class="span12">
<div class="span9">
<h3>When to use</h3>
<p>Emphasis tags (<code>&lt;strong&gt;</code> and <code>&lt;em&gt;</code>) should be used to indicate additional importance or emphasis of a word or phrase relative to its surrounding copy. Use <code>&lt;strong&gt;</code> for importance and <code>&lt;em&gt;</code> for <em>stress</em> emphasis.</p>
<h3>Emphasis in a paragraph</h3>
@ -456,7 +456,7 @@
<!-- Blockquotes -->
<div class="row">
<div class="span4">
<div class="span3">
<h2>Blockquotes</h2>
<p>
<code>&lt;blockquote&gt;</code>
@ -464,7 +464,7 @@
<code>&lt;small&gt;</code>
</p>
</div>
<div class="span12">
<div class="span9">
<h3>How to quote</h3>
<p>To include a blockquote, wrap <code>&lt;blockquote&gt;</code> around <code>&lt;p&gt;</code> and <code>&lt;small&gt;</code> tags. Use the <code>&lt;small&gt;</code> element to cite your source and you'll get an em dash <code>&amp;mdash;</code> before it.</p>
<blockquote>
@ -482,7 +482,7 @@
<h2>Lists</h2>
<div class="row">
<div class="span4">
<div class="span3">
<h4>Unordered <code>&lt;ul&gt;</code></h4>
<ul>
<li>Lorem ipsum dolor sit amet</li>
@ -502,7 +502,7 @@
<li>Eget porttitor lorem</li>
</ul>
</div>
<div class="span4">
<div class="span3">
<h4>Unstyled <code>&lt;ul.unstyled&gt;</code></h4>
<ul class="unstyled">
<li>Lorem ipsum dolor sit amet</li>
@ -522,7 +522,7 @@
<li>Eget porttitor lorem</li>
</ul>
</div>
<div class="span4">
<div class="span3">
<h4>Ordered <code>&lt;ol&gt;</code></h4>
<ol>
<li>Lorem ipsum dolor sit amet</li>
@ -535,7 +535,7 @@
<li>Eget porttitor lorem</li>
</ol>
</div>
<div class="span4">
<div class="span3">
<h4>Description <code>dl</code></h4>
<dl>
<dt>Description lists</dt>
@ -552,7 +552,7 @@
<!-- Code -->
<div class="row">
<div class="span4">
<div class="span3">
<h2>Code</h2>
<p>
<code>&lt;code&gt;</code>
@ -560,7 +560,7 @@
</p>
<p>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.</p>
</div>
<div class="span12">
<div class="span9">
<h3>Presenting code</h3>
<p>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 <code>&lt;pre&gt;</code> element. For inline code, use the <code>&lt;code&gt;</code> element.</p>
<table class="zebra-striped">
@ -603,14 +603,14 @@
<!-- Labels -->
<div class="row">
<div class="span4">
<div class="span3">
<h2>Inline labels</h2>
<p>
<code>&lt;span class="label"&gt;</code>
</p>
<p>Call attention to or flag any phrase in your body text.</p>
</div>
<div class="span12">
<div class="span9">
<h3>Label anything</h3>
<p>Ever needed one of those fancy <span class="label success">New!</span> or <span class="label important">Important</span> flags when writing code? Well, now you have them. Here's what's included by default:</p>
<table class="zebra-striped">
@ -678,7 +678,7 @@
</div>
<!-- Table structure -->
<div class="row">
<div class="span4">
<div class="span3">
<h2>Building tables</h2>
<p>
<code>&lt;table&gt;</code>
@ -694,7 +694,7 @@
<p>Always wrap your column headers in a <code>&lt;thead&gt;</code> such that hierarchy is <code>&lt;thead&gt;</code> > <code>&lt;tr&gt;</code> > <code>&lt;th&gt;</code>.</p>
<p>Similar to the column headers, all your table’s body content should be wrapped in a <code>&lt;tbody&gt;</code> so your hierarchy is <code>&lt;tbody&gt;</code> > <code>&lt;tr&gt;</code> > <code>&lt;td&gt;</code>.</p>
</div>
<div class="span12">
<div class="span9">
<h3>Example: Default table styles</h3>
<p>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.</p>
<table>
@ -823,7 +823,7 @@
<h1>Forms</h1>
</div>
<div class="row">
<div class="span-one-third">
<div class="span4">
<h3>Four types of forms</h3>
<p>With 2.0, we now have four types of forms to choose from:</p>
<ul>
@ -833,15 +833,15 @@
<li>Vertical form for stacked labels and inputs</li>
</ul>
</div>
<div class="span-one-third">
<div class="span4">
<h3></h3>
</div>
</div><!-- /row -->
<div class="row">
<div class="span4">
<div class="span3">
<h2>Search form</h2>
</div>
<div class="span12">
<div class="span9">
<div class="well">
<form class="form-search">
<input type="text" class="search-query">
@ -851,10 +851,10 @@
</div>
</div><!-- /row -->
<div class="row">
<div class="span4">
<div class="span3">
<h2>Inline form</h2>
</div>
<div class="span12">
<div class="span9">
<div class="well">
<form class="form-inline">
<h4>Some directional text</h4>
@ -868,10 +868,10 @@
</div>
</div><!-- /row -->
<div class="row">
<div class="span4">
<div class="span3">
<h2>Horizontal form</h2>
</div>
<div class="span12">
<div class="span9">
<form class="form-horizontal">
<legend>Example form</legend>
<fieldset class="control-group">
@ -972,10 +972,10 @@
</div>
</div><!-- /row -->
<div class="row">
<div class="span4">
<div class="span3">
<h2>Vertical form</h2>
</div>
<div class="span12">
<div class="span9">
<form class="form-vertical">
<legend>Example form</legend>
<fieldset class="control-group">
@ -1016,12 +1016,12 @@
</div><!-- /row -->
<div class="row">
<div class="span4">
<div class="span3">
<h2>Buttons</h2>
<p>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.</p>
<p>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 <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p>
</div>
<div class="span12">
<div class="span9">
<h3>Example buttons</h3>
<p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, and select <code>&lt;input&gt;</code> elements. Here’s how it looks:</p>
<div class="well" style="padding: 14px 19px;">
@ -1052,10 +1052,10 @@
</div><!-- /row -->
<div class="row">
<div class="span4">
<div class="span3">
<h2>Button groups</h2>
</div>
<div class="span12">
<div class="span9">
<h3>Example</h3>
<div class="well">
<div class="btn-group">
@ -1101,11 +1101,11 @@
</div>
<!-- Table structure -->
<div class="row">
<div class="span4">
<div class="span3">
<h2>Media grid</h2>
<p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p>
</div>
<div class="span12">
<div class="span9">
<h3>Example thumbnails</h3>
<p>Thumbnails in the <code>.media-grid</code> 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 <code>.span2</code>, <code>.span4</code>, and <code>.span6</code> column sizes.</p>
<h4>Large</h4>
@ -1234,15 +1234,15 @@
</div><!-- /topbar -->
<div class="row">
<div class="span5">
<div class="span4">
<h4>What is it</h4>
<p>Our topbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.</p>
</div>
<div class="span5">
<div class="span4">
<h4>Customizable</h4>
<p>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&mdash;or any combination of that.</p>
</div>
<div class="span6">
<div class="span4">
<h4>Dropdowns included</h4>
<p>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 <code>li</code> tags also support <code>.active</code> for showing current page selection.</p>
</div>
@ -1252,12 +1252,12 @@
<br>
<div class="row">
<div class="span4">
<div class="span3">
<h2>Tabs and pills</h2>
<p>Create simple secondary navigation with a <code>&lt;ul&gt;</code>. Swap between tabs or pills by adding the appropriate class.</p>
<p>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.</p>
</div>
<div class="span12">
<div class="span9">
<h3>Basic tabs example</h3>
<p>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 <a href="./javascript.html#tabs">tabs plugin</a> that can be used to integrate the latter.</p>
<ul class="tabs">
@ -1288,7 +1288,7 @@
<h3>Alternate tabs</h3>
<p>You can also use tabs that are stacked on either side of an element, or on the bottom.</p>
<div class="row">
<div class="span3">
<div class="span2">
<div class="clearfix">
<ul class="tabs tabs-left">
<li class="active"><a href="#">Active link</a></li>
@ -1298,7 +1298,7 @@
</ul>
</div>
</div>
<div class="span3">
<div class="span2">
<div class="clearfix">
<ul class="tabs tabs-right">
<li class="active"><a href="#">Active link</a></li>
@ -1308,7 +1308,7 @@
</ul>
</div>
</div>
<div class="span6">
<div class="span5">
<div class="clearfix">
<ul class="tabs tabs-bottom">
<li class="active"><a href="#">Active link</a></li>
@ -1345,7 +1345,7 @@
</div>
<div class="row">
<div class="span6">
<div class="span4">
<div class="tabbable tabs-left">
<ul class="tabs" data-tabs="tabs">
<li class="active"><a href="#1">Section 1</a></li>
@ -1368,7 +1368,7 @@
</div>
</div>
</div>
<div class="span6">
<div class="span5">
<div class="tabbable tabs-right">
<ul class="tabs" data-tabs="tabs">
<li class="active"><a href="#1">Section 1</a></li>
@ -1450,11 +1450,11 @@
<!-- Breadcrumbs -->
<div class="row">
<div class="span4">
<div class="span3">
<h2>Breadcrumbs</h2>
<p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.</p>
</div>
<div class="span12">
<div class="span9">
<ul class="breadcrumb">
<li class="active">Home</li>
</ul>
@ -1486,11 +1486,11 @@
<!-- Pagination -->
<div class="row">
<div class="span4">
<div class="span3">
<h2>Pagination</h2>
<p>Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.</p>
</div>
<div class="span12">
<div class="span9">
<div class="pagination">
<ul>
<li class="prev disabled"><a href="#">&larr; Previous</a></li>
@ -1560,13 +1560,13 @@
</div>
<!-- Basic alert messages -->
<div class="row">
<div class="span4">
<div class="span3">
<h2>Basic alerts</h2>
<p><code>.alert-message</code></p>
<p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p>
<p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript &raquo;</a></p>
</div>
<div class="span12">
<div class="span9">
<div class="alert-message warning">
<a class="close" href="#">&times;</a>
<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
@ -1595,13 +1595,13 @@
</div><!-- /row -->
<!-- Block messages -->
<div class="row">
<div class="span4">
<div class="span3">
<h2>Block messages</h2>
<p><code>.alert-message.block-message</code></p>
<p>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.</p>
<p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript &raquo;</a></p>
</div>
<div class="span12">
<div class="span9">
<div class="alert-message block-message warning">
<a class="close" href="#">&times;</a>
<p><strong>Holy guacamole! This is a warning!</strong> 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.</p>
@ -1658,12 +1658,12 @@
<h1>Popovers <small>Components for displaying content in modals, tooltips, and popovers</small></h1>
</div>
<div class="row">
<div class="span4">
<div class="span3">
<h2>Modals</h2>
<p>Modals&mdash;dialogs or lightboxes&mdash;are great for contextual actions in situations where it’s important that the background context be maintained.</p>
<p><a class="btn js-btn" href="./javascript.html#modal">Get the javascript &raquo;</a></p>
</div>
<div class="span12">
<div class="span9">
<div class="well" style="background-color: #888; border: none; padding: 40px;">
<!-- Modal -->
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
@ -1685,12 +1685,12 @@
<!-- Tooltips -->
<div class="row">
<div class="span4">
<div class="span3">
<h2>Tooltips</h2>
<p>Twipsies are super useful for aiding a confused user and pointing them in the right direction.</p>
<p><a class="btn js-btn" href="./javascript.html#twipsy">Get the javascript &raquo;</a></p>
</div>
<div class="span12">
<div class="span9">
<div class="twipsies well">
<div style="position: relative">
<p class="muted" style="margin-bottom: 0">
@ -1703,12 +1703,12 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<!-- Popovers -->
<div class="row">
<div class="span4">
<div class="span3">
<h2>Popovers</h2>
<p>Use popovers to provide subtextual information to a page without affecting layout.</p>
<p><a class="btn js-btn" href="./javascript.html#popover">Get the javascript &raquo;</a></p>
</div>
<div class="span12">
<div class="span9">
<div class="well popover-well">
<div class="popover-wrapper">
<div class="popover left">
@ -1736,12 +1736,12 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<h1>Using javascript with Bootstrap <small>An index of plugins to get you started</small></h1>
</div>
<div class="row">
<div class="span4">
<div class="span3">
<h2>Getting started</h2>
<p>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!</p>
<p><a class="btn primary" href="./javascript.html">View javascript docs &raquo;</a></p>
</div>
<div class="span12">
<div class="span9">
<h3>What's included</h3>
<p>Bring some of Bootstrap's primary components to life with new custom plugins that work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>. We encourage you to extend and modify them to fit your specific development needs.</p>
<table class="zebra-striped">
@ -1797,11 +1797,11 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<h1>Using Bootstrap with Less <small>Supercharge your CSS with variables, mixins, and functions</small></h1>
</div>
<div class="row">
<div class="span4">
<div class="span3">
<p>Bootstrap was built with <a href="http://markdotto.com/bootstrap/">Preboot</a>, an open-source pack of mixins and variables to be used in conjunction with <a href="http://lesscss.org" target="_blank">Less</a>, a CSS preprocessor for faster and easier web development.</p>
<p>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.</p>
</div>
<div class="span12">
<div class="span9">
<h2>How to use it</h2>
<p>Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.</p>
<pre class="prettyprint linenums">

2
lib/patterns.less
View file

@ -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);