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

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

Browse Source
This commit is contained in:
Jacob Thornton
2011-09-10 16:51:03 -07:00
parent 23d2fed905 0914027609
commit 57a8672b77
8 changed files with 211 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
docs/index.html
View File

@@ -137,10 +137,11 @@
<h3>What's included</h3>
<p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p>
<ul>
<li><span class="label">New in 1.3</span> Javascript plugins</li>
<li>All original .less files</li>
<li>Fully compiled and minified CSS</li>
<li>Complete styleguide documentation</li>
<li>Example page template (more to come soon)</li>
<li>Three example pages with different Bootstrap layouts</li>
</ul>
</div>
</div><!-- /row -->
@@ -575,6 +576,124 @@
</dl>
</div>
</div><!-- /row -->
<!-- Code -->
<div class="row">
<div class="span4">
<h2>Code</h2>
<p>
<code>&lt;code&gt;</code>
<code>&lt;pre&gt;</code>
</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">
<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">
<thead>
<tr>
<th style="width: 190px;">Element</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&lt;code&gt;</code></td>
<td>In a line of text like this, your wrapped code will look like this <code>&gt;html&lt;</code> element.</td>
</tr>
<tr>
<td><code>&lt;pre&gt;</code></td>
<td>
<pre>&lt;div&gt;
&lt;h1&gt;Heading&lt;/h1&gt;
&lt;p&gt;Something right here...&lt;/p&gt;
&lt;/div&gt;</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>&lt;pre class="prettyprint"&gt;</code></td>
<td>
<p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting.</p>
<pre class="prettyprint">&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>
</td>
</tr>
</tbody>
</table>
</div>
</div><!-- /row -->
<!-- Labels -->
<div class="row">
<div class="span4">
<h2>Inline labels</h2>
<p>Call attention to or flag any phrase in your body text.</p>
<p>
<code>&lt;span class="label"&gt;</code>
</p>
</div>
<div class="span12">
<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">
<thead>
<tr>
<th style="width: 50%;">Label</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
</td>
<td>
<span class="label">Default</span>
</td>
</tr>
<tr>
<td>
<code>&lt;span class="label success"&gt;New&lt;/span&gt;</code>
</td>
<td>
<span class="label success">New</span>
</td>
</tr>
<tr>
<td>
<code>&lt;span class="label warning"&gt;Warning&lt;/span&gt;</code>
</td>
<td>
<span class="label warning">Warning</span>
</td>
</tr>
<tr>
<td>
<code>&lt;span class="label important"&gt;Important&lt;/span&gt;</code>
</td>
<td>
<span class="label important">Important</span>
</td>
</tr>
<tr>
<td>
<code>&lt;span class="label notice"&gt;Notice&lt;/span&gt;</code>
</td>
<td>
<span class="label notice">Notice</span>
</td>
</tr>
</tbody>
</table>
</div>
</div><!-- /row -->
</section>