mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-11 16:14:04 +02:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jacob Thornton
2012-01-28 00:37:12 -08:00
parent 4737d693e0 18d95a163b
commit 7ffec335ca
7 changed files with 101 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/assets/css/bootstrap-responsive.css vendored
View File

@@ -3,6 +3,10 @@
visibility: hidden; visibility: hidden;
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.page-header h1 small {
display: block;
line-height: 18px;
}
.form-horizontal .control-group > label { .form-horizontal .control-group > label {
float: none; float: none;
width: auto; width: auto;

18
docs/assets/css/docs.css
View File

@@ -657,14 +657,13 @@ form.well {
} }
/* Change up some type stuff */ /* Change up some type stuff */
h1 small {
display: block;
line-height: 20px;
}
/* More space between sections */
h2 { h2 {
margin-top: 27px; margin-top: 27px;
} }
h2 small {
display: block;
line-height: 18px;
}
h3 { h3 {
margin-top: 18px; margin-top: 18px;
} }
@@ -681,6 +680,7 @@ form.well {
} }
.jumbotron p { .jumbotron p {
margin-right: 0; margin-right: 0;
margin-left: 0;
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
} }
@@ -695,6 +695,10 @@ form.well {
.quick-links { .quick-links {
margin: 40px 0 0; margin: 40px 0 0;
} }
.quick-links li {
margin-top: 5px;
margin-bottom: 5px;
}
/* hide the bullets on mobile since our horizontal space is limited */ /* hide the bullets on mobile since our horizontal space is limited */
.quick-links .divider { .quick-links .divider {
display: none; display: none;
@@ -744,10 +748,10 @@ form.well {
.subnav .nav > li { .subnav .nav > li {
float: none; float: none;
} }
.subnav .nav a { .subnav .nav > li > a {
border: 0; border: 0;
} }
.subnav .nav li + li a { .subnav .nav > li + li a {
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
} }

78
docs/base-css.html
View File

@@ -71,6 +71,7 @@
<div class="subnav"> <div class="subnav">
<ul class="nav pills"> <ul class="nav pills">
<li><a href="#typography">Typography</a></li> <li><a href="#typography">Typography</a></li>
<li><a href="#code">Code</a></li>
<li><a href="#tables">Tables</a></li> <li><a href="#tables">Tables</a></li>
<li><a href="#forms">Forms</a></li> <li><a href="#forms">Forms</a></li>
<li><a href="#buttons">Buttons</a></li> <li><a href="#buttons">Buttons</a></li>
@@ -343,51 +344,46 @@
</dl> </dl>
</div> </div>
</div><!-- /row --> </div><!-- /row -->
</section>
<!-- Code -->
<h2>Code <small>Inline and block</small></h2> <!-- Code
<table class="table table-bordered table-striped"> ================================================== -->
<thead> <section id="code">
<tr> <div class="page-header">
<th style="width: 190px;">Element</th> <h1>Code <small>Inline and block code snippets</small></h1>
<th>Result</th> </div>
</tr> <div class="row">
</thead> <div class="span4">
<tbody> <h2>Inline</h2>
<tr> <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
<td><code>&lt;code&gt;</code></td> <pre class="prettyprint linenums">
<td>In a line of text like this, your wrapped code will look like this <code>&lt;html&gt;</code> element.</td> For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</tr> </pre>
<tr> </div><!--/span-->
<td><code>&lt;pre&gt;</code></td> <div class="span4">
<td> <h2>Basic block</h2>
<pre>&lt;div&gt; <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.</p>
&lt;h1&gt;Heading&lt;/h1&gt; <pre class="prettyprint linenums" style="margin-bottom: 9px;">
&lt;p&gt;Something right here…&lt;/p&gt; &lt;pre&gt;
&lt;/div&gt;</pre> &amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt;
&lt;/pre&gt;
</pre>
<p><strong>Note:</strong> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p> <p><strong>Note:</strong> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p>
</td> </div><!--/span-->
</tr> <div class="span4">
<tr> <h2>Google Prettify</h2>
<td><code>&lt;pre class="prettyprint"&gt;</code></td> <p>Take the same <code>&lt;pre&gt;</code> element and add two optional classes for enhanced rendering.</p>
<td> <pre class="prettyprint linenums" style="margin-bottom: 9px;">
<p>Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p> &lt;pre class="prettyprint
<pre class="prettyprint">&lt;div&gt; linenums"&gt;
&lt;h1&gt;Heading&lt;/h1&gt; &amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt;
&lt;p&gt;Something right here…&lt;/p&gt; &lt;/pre&gt;
&lt;/div&gt;</pre> </pre>
<pre class="prettyprint linenums">&lt;div&gt;
&lt;h1&gt;Heading&lt;/h1&gt;
&lt;p&gt;Something right here…&lt;/p&gt;
&lt;/div&gt;</pre>
<p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p> <p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
</td> </div><!--/span-->
</tr> </div><!--/row-->
</tbody>
</table>
</section> </section>
@@ -1070,9 +1066,9 @@
<div class="control-group"> <div class="control-group">
<label class="control-label">Form sizes</label> <label class="control-label">Form sizes</label>
<div class="controls docs-input-sizes"> <div class="controls docs-input-sizes">
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2"> <input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3"> <input class="span3" type="text" placeholder=".span3">
<input class="span4" type="text" placeholder=".span4">
<p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p> <p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p>
</div> </div>
</div> </div>

2
docs/components.html
View File

@@ -948,7 +948,7 @@
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 190px;">Labels</th> <th>Labels</th>
<th>Markup</th> <th>Markup</th>
</tr> </tr>
</thead> </thead>

78
docs/templates/pages/base-css.mustache vendored
View File

@@ -6,6 +6,7 @@
<div class="subnav"> <div class="subnav">
<ul class="nav pills"> <ul class="nav pills">
<li><a href="#typography">{{_i}}Typography{{/i}}</a></li> <li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
<li><a href="#code">{{_i}}Code{{/i}}</a></li>
<li><a href="#tables">{{_i}}Tables{{/i}}</a></li> <li><a href="#tables">{{_i}}Tables{{/i}}</a></li>
<li><a href="#forms">{{_i}}Forms{{/i}}</a></li> <li><a href="#forms">{{_i}}Forms{{/i}}</a></li>
<li><a href="#buttons">{{_i}}Buttons{{/i}}</a></li> <li><a href="#buttons">{{_i}}Buttons{{/i}}</a></li>
@@ -278,51 +279,46 @@
</dl> </dl>
</div> </div>
</div><!-- /row --> </div><!-- /row -->
</section>
<!-- Code -->
<h2>{{_i}}Code <small>Inline and block</small>{{/i}}</h2> <!-- Code
<table class="table table-bordered table-striped"> ================================================== -->
<thead> <section id="code">
<tr> <div class="page-header">
<th style="width: 190px;">{{_i}}Element{{/i}}</th> <h1>{{_i}}Code{{/i}} <small>{{_i}}Inline and block code snippets{{/i}}</small></h1>
<th>{{_i}}Result{{/i}}</th> </div>
</tr> <div class="row">
</thead> <div class="span4">
<tbody> <h2>Inline</h2>
<tr> <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
<td><code>&lt;code&gt;</code></td> <pre class="prettyprint linenums">
<td>{{_i}}In a line of text like this, your wrapped code will look like this <code>&lt;html&gt;</code> element.{{/i}}</td> {{_i}}For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.{{/i}}
</tr> </pre>
<tr> </div><!--/span-->
<td><code>&lt;pre&gt;</code></td> <div class="span4">
<td> <h2>Basic block</h2>
<pre>&lt;div&gt; <p>{{_i}}Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.{{/i}}</p>
&lt;h1&gt;{{_i}}Heading{{/i}}&lt;/h1&gt; <pre class="prettyprint linenums" style="margin-bottom: 9px;">
&lt;p&gt;{{_i}}Something right here…{{/i}}&lt;/p&gt; &lt;pre&gt;
&lt;/div&gt;</pre> &amp;lt;p&amp;gt;{{_i}}Sample text here...{{/i}}&amp;lt;/p&amp;gt;
&lt;/pre&gt;
</pre>
<p>{{_i}}<strong>Note:</strong> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.{{/i}}</p> <p>{{_i}}<strong>Note:</strong> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.{{/i}}</p>
</td> </div><!--/span-->
</tr> <div class="span4">
<tr> <h2>Google Prettify</h2>
<td><code>&lt;pre class="prettyprint"&gt;</code></td> <p>Take the same <code>&lt;pre&gt;</code> element and add two optional classes for enhanced rendering.</p>
<td> <pre class="prettyprint linenums" style="margin-bottom: 9px;">
<p>{{_i}}Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.{{/i}}</p> &lt;pre class="prettyprint
<pre class="prettyprint">&lt;div&gt; linenums"&gt;
&lt;h1&gt;{{_i}}Heading{{/i}}&lt;/h1&gt; &amp;lt;p&amp;gt;{{_i}}Sample text here...{{/i}}&amp;lt;/p&amp;gt;
&lt;p&gt;{{_i}}Something right here…{{/i}}&lt;/p&gt; &lt;/pre&gt;
&lt;/div&gt;</pre> </pre>
<pre class="prettyprint linenums">&lt;div&gt;
&lt;h1&gt;{{_i}}Heading{{/i}}&lt;/h1&gt;
&lt;p&gt;{{_i}}Something right here…{{/i}}&lt;/p&gt;
&lt;/div&gt;</pre>
<p>{{_i}}<a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.{{/i}}</p> <p>{{_i}}<a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.{{/i}}</p>
</td> </div><!--/span-->
</tr> </div><!--/row-->
</tbody>
</table>
</section> </section>
@@ -1005,9 +1001,9 @@
<div class="control-group"> <div class="control-group">
<label class="control-label">{{_i}}Form sizes{{/i}}</label> <label class="control-label">{{_i}}Form sizes{{/i}}</label>
<div class="controls docs-input-sizes"> <div class="controls docs-input-sizes">
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2"> <input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3"> <input class="span3" type="text" placeholder=".span3">
<input class="span4" type="text" placeholder=".span4">
<p class="help-block">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p> <p class="help-block">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p>
</div> </div>
</div> </div>

2
docs/templates/pages/components.mustache vendored
View File

@@ -883,7 +883,7 @@
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 190px;">{{_i}}Labels{{/i}}</th> <th>{{_i}}Labels{{/i}}</th>
<th>{{_i}}Markup{{/i}}</th> <th>{{_i}}Markup{{/i}}</th>
</tr> </tr>
</thead> </thead>

6
less/responsive.less
View File

@@ -27,6 +27,12 @@
@media (max-width: 480px) { @media (max-width: 480px) {
// Block level the page header small tag for readability
.page-header h1 small {
display: block;
line-height: @baseLineHeight;
}
// Remove the horizontal form styles // Remove the horizontal form styles
.form-horizontal .control-group > label { .form-horizontal .control-group > label {
float: none; float: none;