Skip to content

B
bootstrap
Commit c78016e3 authored by Jacob Thornton's avatar Jacob Thornton
Browse files
Options

Merge branch '2.0-wip' of https://github.com/twitter/bootstrap into 2.0-wip

parents f1cbd22b cb524586
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 222 additions and 166 deletions
bootstrap.css
View file @ c78016e3
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Sun Jan 8 01:50:02 PST 2012 * Date: Sun Jan 8 02:58:37 PST 2012
*/ */
html, body { html, body {
margin: 0; margin: 0;
...@@ -485,6 +485,10 @@ blockquote small:before { ...@@ -485,6 +485,10 @@ blockquote small:before {
} }
blockquote.pull-right { blockquote.pull-right {
float: right; float: right;
padding-left: 0;
padding-right: 15px;
border-left: 0;
border-right: 5px solid #eee;
} }
blockquote.pull-right p, blockquote.pull-right small { blockquote.pull-right p, blockquote.pull-right small {
text-align: right; text-align: right;
...@@ -1600,7 +1604,7 @@ i { ...@@ -1600,7 +1604,7 @@ i {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
} }
.navbar .brand:hover, .navbar ul .active > a { .navbar .brand:hover, .navbar .nav .active > a {
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
background-color: #333333; background-color: #333333;
...@@ -1921,7 +1925,7 @@ i { ...@@ -1921,7 +1925,7 @@ i {
.pills.stacked > li:last-child > a { .pills.stacked > li:last-child > a {
margin-bottom: 1px; margin-bottom: 1px;
} }
.tabs .dropdown-menu, .pills .dropdown-menu { .nav .dropdown-menu {
top: 33px; top: 33px;
border-width: 1px; border-width: 1px;
} }
...@@ -1930,19 +1934,26 @@ i { ...@@ -1930,19 +1934,26 @@ i {
-moz-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
} }
.tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret { .nav .dropdown-toggle .caret {
border-top-color: #0088cc;
margin-top: 6px; margin-top: 6px;
} }
.tabs .open .dropdown-toggle, .pills .open .dropdown-toggle { .nav .dropdown-toggle:hover .caret {
border-top-color: #005580;
}
.nav .open .dropdown-toggle {
background-color: #999; background-color: #999;
border-color: #999; border-color: #999;
} }
.tabs .open .caret, .pills .open .caret { .nav .open .caret, .nav .open a:hover .caret {
border-top-color: #fff; border-top-color: #fff;
filter: alpha(opacity=100); filter: alpha(opacity=100);
-moz-opacity: 1; -moz-opacity: 1;
opacity: 1; opacity: 1;
} }
.tabs.stacked .open > a:hover {
border-color: #999;
}
.tabbable { .tabbable {
zoom: 1; zoom: 1;
} }
...@@ -2996,6 +3007,61 @@ a.thumbnail:hover { ...@@ -2996,6 +3007,61 @@ a.thumbnail:hover {
visibility: hidden; visibility: hidden;
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.navbar .nav {
position: absolute;
top: 0;
left: 0;
width: 180px;
padding-top: 40px;
list-style: none;
}
.navbar .nav, .navbar .nav > li:last-child a {
-webkit-border-radius: 0 0 4px 0;
-moz-border-radius: 0 0 4px 0;
border-radius: 0 0 4px 0;
}
.navbar .nav > li {
float: none;
display: none;
}
.navbar .nav > li > a {
float: none;
background-color: #222;
}
.navbar .nav > .active {
display: block;
position: absolute;
top: 0;
left: 0;
}
.navbar .nav > .active > a {
background-color: transparent;
}
.navbar .nav > .active > a:hover {
background-color: #333;
}
.navbar .nav > .active > a:after {
display: inline-block;
width: 0;
height: 0;
margin-top: 8px;
margin-left: 6px;
text-indent: -99999px;
vertical-align: top;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #ffffff;
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
content: "↓";
}
.navbar .nav:hover > li {
display: block;
}
.navbar .nav:hover > li > a:hover {
background-color: #333;
}
.modal { .modal {
width: auto; width: auto;
margin: 0; margin: 0;
...@@ -3030,6 +3096,12 @@ a.thumbnail:hover { ...@@ -3030,6 +3096,12 @@ a.thumbnail:hover {
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.navbar-fixed {
position: absolute;
}
.navbar-fixed .nav {
float: none;
}
.container { .container {
width: auto; width: auto;
padding: 0 20px; padding: 0 20px;
...@@ -3043,55 +3115,6 @@ a.thumbnail:hover { ...@@ -3043,55 +3115,6 @@ a.thumbnail:hover {
width: auto; width: auto;
margin: 0; margin: 0;
} }
.nav {
position: absolute;
top: 0;
left: 0;
width: 180px;
padding-top: 40px;
list-style: none;
}
.nav, .nav > li:last-child a {
-webkit-border-radius: 0 0 4px 0;
-moz-border-radius: 0 0 4px 0;
border-radius: 0 0 4px 0;
}
.nav > li {
float: none;
display: none;
}
.nav > li > a {
float: none;
background-color: #222;
}
.nav > .active {
display: block;
position: absolute;
top: 0;
left: 0;
}
.navbar ul .active > a {
background-color: transparent;
}
.nav > .active a:after {
display: inline-block;
width: 0;
height: 0;
margin-top: 8px;
margin-left: 6px;
text-indent: -99999px;
vertical-align: top;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #ffffff;
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
content: "↓";
}
.nav > .active a:hover {
background-color: rgba(255, 255, 255, 0.05);
}
} }
@media (min-width: 768px) and (max-width: 940px) { @media (min-width: 768px) and (max-width: 940px) {
.container { .container {
......
bootstrap.min.css
View file @ c78016e3
This diff is collapsed.
docs/components.html
View file @ c78016e3
...@@ -222,9 +222,12 @@ ...@@ -222,9 +222,12 @@
<h3>Application-style navigation</h3> <h3>Application-style navigation</h3>
<p>Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p> <p>Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p>
<p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p> <p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p>
<h4>With icons</h4>
<p>Nav lists are also easy to equip with icons. Add the proper <code>&lt;i&gt;</code> tag with class and you're set.</p>
</div> </div>
<div class="span4"> <div class="span4">
<h3>Example sidebar navigation</h3> <h3>Example nav list</h3>
<p>Take a list of links and add <code>class="nav list"</code>:</p>
<div class="well" style="padding: 8px 0;"> <div class="well" style="padding: 8px 0;">
<ul class="nav list"> <ul class="nav list">
<li class="nav-header">List header</li> <li class="nav-header">List header</li>
...@@ -237,9 +240,6 @@ ...@@ -237,9 +240,6 @@
<li><a href="#">Help</a></li> <li><a href="#">Help</a></li>
</ul> </ul>
</div> <!-- /well --> </div> <!-- /well -->
</div>
<div class="span4">
<h3>Simple markup</h3>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="nav list"&gt; &lt;ul class="nav list"&gt;
&lt;li class="nav-header"&gt; &lt;li class="nav-header"&gt;
...@@ -253,6 +253,34 @@ ...@@ -253,6 +253,34 @@
&lt;/li&gt; &lt;/li&gt;
... ...
&lt;/ul&gt; &lt;/ul&gt;
</pre>
</div>
<div class="span4">
<h3>Example with icons</h3>
<p>Same example, but with <code>&lt;i&gt;</code> tags for icons.</p>
<div class="well" style="padding: 8px 0;">
<ul class="nav list">
<li class="nav-header">List header</li>
<li class="active"><a href="#"><i class="home"></i> Home</a></li>
<li><a href="#"><i class="book"></i> Library</a></li>
<li><a href="#"><i class="pencil"></i> Applications</a></li>
<li class="nav-header">Another list header</li>
<li><a href="#"><i class="user"></i> Profile</a></li>
<li><a href="#"><i class="cog"></i> Settings</a></li>
<li><a href="#"><i class="flag"></i> Help</a></li>
</ul>
</div> <!-- /well -->
<pre class="prettyprint linenums">
&lt;ul class="nav list"&gt;
...
&lt;li&gt;
&lt;a href="#"&gt;
&lt;i class="book"&gt;&lt;/i&gt;
Library
&lt;/a&gt;
&lt;/li&gt;
...
&lt;/ul&gt;
</pre> </pre>
</div> </div>
</div> </div>
...@@ -262,23 +290,13 @@ ...@@ -262,23 +290,13 @@
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h3>What's included</h3> <h3>What's included</h3>
<p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles:</p> <p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.</p>
<ul>
<li>top (default)</li>
<li>right</li>
<li>bottom</li>
<li>left</li>
</ul>
<p>Changing between them is easy and only requires changing very little markup.</p> <p>Changing between them is easy and only requires changing very little markup.</p>
<hr>
<h3>Custom jQuery plugin</h3>
<p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.</p>
<p><a class="btn" href="./javascript.html/#tabs">Get the javascript &rarr;</a></p>
</div> </div>
<div class="span8"> <div class="span4">
<h3>Tabbable example</h3> <h3>Tabbable example</h3>
<p>To make tabs tabbable, wrap the <code>.tabs</code> in another div with class <code>.tabbable</code>.</p> <p>To make tabs tabbable, wrap the <code>.tabs</code> in another div with class <code>.tabbable</code>.</p>
<div class="tabbable"> <div class="tabbable" style="margin-bottom: 9px;">
<ul class="nav tabs"> <ul class="nav tabs">
<li class="active"><a href="#1" data-toggle="tab">Section 1</a></li> <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
<li><a href="#2" data-toggle="tab">Section 2</a></li> <li><a href="#2" data-toggle="tab">Section 2</a></li>
...@@ -296,9 +314,16 @@ ...@@ -296,9 +314,16 @@
</div> </div>
</div> </div>
</div> <!-- /tabbable --> </div> <!-- /tabbable -->
<hr> </div>
<h3>Straightforward markup</h3> <div class="span4">
<p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p> <h3>Custom jQuery plugin</h3>
<p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.</p>
<p><a class="btn" href="./javascript.html/#tabs">Get the javascript &rarr;</a></p>
</div>
</div>
<h3>Straightforward markup</h3>
<p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="tabbable"&gt; &lt;div class="tabbable"&gt;
&lt;ul class="nav tabs"&gt; &lt;ul class="nav tabs"&gt;
...@@ -315,8 +340,6 @@ ...@@ -315,8 +340,6 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</div>
</div>
<h3>Tabbable in any direction</h3> <h3>Tabbable in any direction</h3>
<div class="row"> <div class="row">
...@@ -809,28 +832,6 @@ ...@@ -809,28 +832,6 @@
<!-- Autocomplete
================================================== -->
<section id="autocomplete">
<div class="page-header">
<h1>Autocomplete <small></small></h1>
</div>
</section>
<!-- Carousel
================================================== -->
<section id="carousel">
<div class="page-header">
<h1>Carousel <small></small></h1>
</div>
</section>
<!-- Alerts & Messages <!-- Alerts & Messages
================================================== --> ================================================== -->
<section id="alerts"> <section id="alerts">
......
docs/scaffolding.html
View file @ c78016e3
...@@ -243,11 +243,11 @@ ...@@ -243,11 +243,11 @@
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;body&gt; &lt;body&gt;
&lt;div class="fluid-container"&gt; &lt;div class="fluid-container sidebar-left"&gt;
&lt;div class="sidebar"&gt; &lt;div class="fluid-sidebar"&gt;
... ...
&lt;/div&gt; &lt;/div&gt;
&lt;div class="content"&gt; &lt;div class="fluid-content"&gt;
... ...
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
......
lib/navbar.less
View file @ c78016e3
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
.navbar { .navbar {
overflow: visible; overflow: visible;
} }
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present // gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
.navbar-inner { .navbar-inner {
background-color: @navBarBgEnd; background-color: @navBarBgEnd;
#gradient > .vertical(@navBarBgStart, @navBarBgEnd); #gradient > .vertical(@navBarBgStart, @navBarBgEnd);
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
.navbar { .navbar {
// Hover and active states // Hover and active states
.brand:hover, .brand:hover,
ul .active > a { .nav .active > a {
color: @white; color: @white;
text-decoration: none; text-decoration: none;
background-color: @navBarBgStart; background-color: @navBarBgStart;
......
lib/navs.less
View file @ c78016e3
...@@ -175,29 +175,35 @@ ...@@ -175,29 +175,35 @@
// --------- // ---------
// Position the menu // Position the menu
.tabs .dropdown-menu, .nav .dropdown-menu {
.pills .dropdown-menu {
top: 33px; top: 33px;
border-width: 1px; border-width: 1px;
} }
.pills .dropdown-menu { .pills .dropdown-menu {
.border-radius(4px); .border-radius(4px);
} }
.tabs .dropdown-toggle .caret, .nav .dropdown-toggle .caret {
.pills .dropdown-toggle .caret { border-top-color: @linkColor;
margin-top: 6px; margin-top: 6px;
} }
.tabs .open .dropdown-toggle, .nav .dropdown-toggle:hover .caret {
.pills .open .dropdown-toggle { border-top-color: @linkColorHover;
}
.nav .open .dropdown-toggle {
background-color: #999; background-color: #999;
border-color: #999; border-color: #999;
} }
.tabs .open .caret, .nav .open .caret,
.pills .open .caret { .nav .open a:hover .caret {
border-top-color: #fff; border-top-color: #fff;
.opacity(100); .opacity(100);
} }
// Dropdowns in stacked tabs
.tabs.stacked .open > a:hover {
border-color: #999;
}
// TABBABLE // TABBABLE
......
lib/responsive.less
View file @ c78016e3
...@@ -18,6 +18,64 @@ ...@@ -18,6 +18,64 @@
// --------------------- // ---------------------
@media (max-width: 480px) { @media (max-width: 480px) {
// Make the nav work for small devices
.navbar {
.nav {
position: absolute;
top: 0;
left: 0;
width: 180px;
padding-top: 40px;
list-style: none;
}
.nav,
.nav > li:last-child a {
.border-radius(0 0 4px 0);
}
.nav > li {
float: none;
display: none;
}
.nav > li > a {
float: none;
background-color: #222;
}
.nav > .active {
display: block;
position: absolute;
top: 0;
left: 0;
}
.nav > .active > a {
background-color: transparent;
}
.nav > .active > a:hover {
background-color: #333;
}
.nav > .active > a:after {
display: inline-block;
width: 0;
height: 0;
margin-top: 8px;
margin-left: 6px;
text-indent: -99999px;
vertical-align: top;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid @white;
.opacity(100);
content: "&darr;";
}
.nav:hover > li {
display: block;
}
.nav:hover > li > a:hover {
background-color: #333;
}
}
// Resize modals // Resize modals
.modal { .modal {
width: auto; width: auto;
...@@ -63,6 +121,15 @@ ...@@ -63,6 +121,15 @@
// -------------------------------------------------- // --------------------------------------------------
@media (max-width: 768px) { @media (max-width: 768px) {
// Unfix the navbar
.navbar-fixed {
position: absolute;
}
.navbar-fixed .nav {
float: none;
}
// Remove width from containers // Remove width from containers
.container { .container {
width: auto; width: auto;
...@@ -80,53 +147,6 @@ ...@@ -80,53 +147,6 @@
margin: 0; margin: 0;
} }
// Make the nav work for small devices
.nav {
position: absolute;
top: 0;
left: 0;
width: 180px;
padding-top: 40px;
list-style: none;
}
.nav,
.nav > li:last-child a {
.border-radius(0 0 4px 0);
}
.nav > li {
float: none;
display: none;
}
.nav > li > a {
float: none;
background-color: #222;
}
.nav > .active {
display: block;
position: absolute;
top: 0;
left: 0;
}
.navbar ul .active > a {
background-color: transparent;
}
.nav > .active a:after {
display: inline-block;
width: 0;
height: 0;
margin-top: 8px;
margin-left: 6px;
text-indent: -99999px;
vertical-align: top;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid @white;
.opacity(100);
content: "&darr;";
}
.nav > .active a:hover {
background-color: rgba(255,255,255,.05);
}
} }
......
lib/type.less
View file @ c78016e3
...@@ -165,6 +165,10 @@ blockquote { ...@@ -165,6 +165,10 @@ blockquote {
// Float right with text-align: right // Float right with text-align: right
&.pull-right { &.pull-right {
float: right; float: right;
padding-left: 0;
padding-right: 15px;
border-left: 0;
border-right: 5px solid #eee;
p, p,
small { small {
text-align: right; text-align: right;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment