mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
Merge branch '2.0-wip' of https://github.com/twitter/bootstrap into 2.0-wip
This commit is contained in:
Jacob Thornton
commit
7ffec335ca
4
docs/assets/css/bootstrap-responsive.css
vendored
4
docs/assets/css/bootstrap-responsive.css
vendored
@ -3,6 +3,10 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.page-header h1 small {
|
||||
display: block;
|
||||
line-height: 18px;
|
||||
}
|
||||
.form-horizontal .control-group > label {
|
||||
float: none;
|
||||
width: auto;
|
||||
|
||||
@ -657,14 +657,13 @@ form.well {
|
||||
}
|
||||
|
||||
/* Change up some type stuff */
|
||||
h1 small {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
}
|
||||
/* More space between sections */
|
||||
h2 {
|
||||
margin-top: 27px;
|
||||
}
|
||||
h2 small {
|
||||
display: block;
|
||||
line-height: 18px;
|
||||
}
|
||||
h3 {
|
||||
margin-top: 18px;
|
||||
}
|
||||
@ -681,6 +680,7 @@ form.well {
|
||||
}
|
||||
.jumbotron p {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
@ -695,6 +695,10 @@ form.well {
|
||||
.quick-links {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
.quick-links li {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
/* hide the bullets on mobile since our horizontal space is limited */
|
||||
.quick-links .divider {
|
||||
display: none;
|
||||
@ -744,10 +748,10 @@ form.well {
|
||||
.subnav .nav > li {
|
||||
float: none;
|
||||
}
|
||||
.subnav .nav a {
|
||||
.subnav .nav > li > a {
|
||||
border: 0;
|
||||
}
|
||||
.subnav .nav li + li a {
|
||||
.subnav .nav > li + li a {
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
|
||||
@ -71,6 +71,7 @@
|
||||
<div class="subnav">
|
||||
<ul class="nav pills">
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#code">Code</a></li>
|
||||
<li><a href="#tables">Tables</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
@ -343,51 +344,46 @@
|
||||
</dl>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Code -->
|
||||
|
||||
<h2>Code <small>Inline and block</small></h2>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 190px;">Element</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code><code></code></td>
|
||||
<td>In a line of text like this, your wrapped code will look like this <code><html></code> element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><pre></code></td>
|
||||
<td>
|
||||
<pre><div>
|
||||
<h1>Heading</h1>
|
||||
<p>Something right here…</p>
|
||||
</div></pre>
|
||||
<p><strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><pre class="prettyprint"></code></td>
|
||||
<td>
|
||||
<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>
|
||||
<pre class="prettyprint"><div>
|
||||
<h1>Heading</h1>
|
||||
<p>Something right here…</p>
|
||||
</div></pre>
|
||||
<pre class="prettyprint linenums"><div>
|
||||
<h1>Heading</h1>
|
||||
<p>Something right here…</p>
|
||||
</div></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>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Code
|
||||
================================================== -->
|
||||
<section id="code">
|
||||
<div class="page-header">
|
||||
<h1>Code <small>Inline and block code snippets</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Inline</h2>
|
||||
<p>Wrap inline snippets of code with <code><code></code>.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
For example, <code>section</code> should be wrapped as inline.
|
||||
</pre>
|
||||
</div><!--/span-->
|
||||
<div class="span4">
|
||||
<h2>Basic block</h2>
|
||||
<p>Use <code><pre></code> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.</p>
|
||||
<pre class="prettyprint linenums" style="margin-bottom: 9px;">
|
||||
<pre>
|
||||
&lt;p&gt;Sample text here...&lt;/p&gt;
|
||||
</pre>
|
||||
</pre>
|
||||
<p><strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.</p>
|
||||
</div><!--/span-->
|
||||
<div class="span4">
|
||||
<h2>Google Prettify</h2>
|
||||
<p>Take the same <code><pre></code> element and add two optional classes for enhanced rendering.</p>
|
||||
<pre class="prettyprint linenums" style="margin-bottom: 9px;">
|
||||
<pre class="prettyprint
|
||||
linenums">
|
||||
&lt;p&gt;Sample text here...&lt;/p&gt;
|
||||
</pre>
|
||||
</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>
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
</section>
|
||||
|
||||
|
||||
@ -1070,9 +1066,9 @@
|
||||
<div class="control-group">
|
||||
<label class="control-label">Form sizes</label>
|
||||
<div class="controls docs-input-sizes">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
<input class="span2" type="text" placeholder=".span2">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -948,7 +948,7 @@
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 190px;">Labels</th>
|
||||
<th>Labels</th>
|
||||
<th>Markup</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
82
docs/templates/pages/base-css.mustache
vendored
82
docs/templates/pages/base-css.mustache
vendored
@ -6,6 +6,7 @@
|
||||
<div class="subnav">
|
||||
<ul class="nav pills">
|
||||
<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="#forms">{{_i}}Forms{{/i}}</a></li>
|
||||
<li><a href="#buttons">{{_i}}Buttons{{/i}}</a></li>
|
||||
@ -278,51 +279,46 @@
|
||||
</dl>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Code -->
|
||||
|
||||
<h2>{{_i}}Code <small>Inline and block</small>{{/i}}</h2>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 190px;">{{_i}}Element{{/i}}</th>
|
||||
<th>{{_i}}Result{{/i}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code><code></code></td>
|
||||
<td>{{_i}}In a line of text like this, your wrapped code will look like this <code><html></code> element.{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><pre></code></td>
|
||||
<td>
|
||||
<pre><div>
|
||||
<h1>{{_i}}Heading{{/i}}</h1>
|
||||
<p>{{_i}}Something right here…{{/i}}</p>
|
||||
</div></pre>
|
||||
<p>{{_i}}<strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.{{/i}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><pre class="prettyprint"></code></td>
|
||||
<td>
|
||||
<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>
|
||||
<pre class="prettyprint"><div>
|
||||
<h1>{{_i}}Heading{{/i}}</h1>
|
||||
<p>{{_i}}Something right here…{{/i}}</p>
|
||||
</div></pre>
|
||||
<pre class="prettyprint linenums"><div>
|
||||
<h1>{{_i}}Heading{{/i}}</h1>
|
||||
<p>{{_i}}Something right here…{{/i}}</p>
|
||||
</div></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>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Code
|
||||
================================================== -->
|
||||
<section id="code">
|
||||
<div class="page-header">
|
||||
<h1>{{_i}}Code{{/i}} <small>{{_i}}Inline and block code snippets{{/i}}</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Inline</h2>
|
||||
<p>Wrap inline snippets of code with <code><code></code>.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
{{_i}}For example, <code>section</code> should be wrapped as inline.{{/i}}
|
||||
</pre>
|
||||
</div><!--/span-->
|
||||
<div class="span4">
|
||||
<h2>Basic block</h2>
|
||||
<p>{{_i}}Use <code><pre></code> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.{{/i}}</p>
|
||||
<pre class="prettyprint linenums" style="margin-bottom: 9px;">
|
||||
<pre>
|
||||
&lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
|
||||
</pre>
|
||||
</pre>
|
||||
<p>{{_i}}<strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.{{/i}}</p>
|
||||
</div><!--/span-->
|
||||
<div class="span4">
|
||||
<h2>Google Prettify</h2>
|
||||
<p>Take the same <code><pre></code> element and add two optional classes for enhanced rendering.</p>
|
||||
<pre class="prettyprint linenums" style="margin-bottom: 9px;">
|
||||
<pre class="prettyprint
|
||||
linenums">
|
||||
&lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
|
||||
</pre>
|
||||
</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>
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
</section>
|
||||
|
||||
|
||||
@ -1005,9 +1001,9 @@
|
||||
<div class="control-group">
|
||||
<label class="control-label">{{_i}}Form sizes{{/i}}</label>
|
||||
<div class="controls docs-input-sizes">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
<input class="span2" type="text" placeholder=".span2">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
2
docs/templates/pages/components.mustache
vendored
2
docs/templates/pages/components.mustache
vendored
@ -883,7 +883,7 @@
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 190px;">{{_i}}Labels{{/i}}</th>
|
||||
<th>{{_i}}Labels{{/i}}</th>
|
||||
<th>{{_i}}Markup{{/i}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@ -27,6 +27,12 @@
|
||||
|
||||
@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
|
||||
.form-horizontal .control-group > label {
|
||||
float: none;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user