0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00

convert code section to new layout

This commit is contained in:
Mark Otto 2012-06-04 21:10:08 -07:00
parent c44bd1edf4
commit 094e12f68d
2 changed files with 24 additions and 34 deletions

View File

@ -387,17 +387,15 @@
<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>&lt;code&gt;</code>.</p>
<h2>Inline</h2>
<p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
<pre class="prettyprint linenums">
For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</pre>
</div><!--/span-->
<div class="span4">
<h2>Basic block</h2>
<p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
<h2>Basic block</h2>
<p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
<pre>
&lt;p&gt;Sample text here...&lt;/p&gt;
</pre>
@ -406,12 +404,11 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&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>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
</div><!--/span-->
<div class="span4">
<h2>Google Prettify</h2>
<p>Take the same <code>&lt;pre&gt;</code> element and add two optional classes for enhanced rendering.</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>
<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
<h2>Google Prettify</h2>
<p>Take the same <code>&lt;pre&gt;</code> element and add two optional classes for enhanced rendering.</p>
<pre class="prettyprint linenums" style="margin-bottom: 9px;">
&lt;p&gt;Sample text here...&lt;/p&gt;
</pre>
@ -421,9 +418,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt;
&lt;/pre&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>
</div><!--/span-->
</div><!--/row-->
<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>
</section>

View File

@ -318,17 +318,15 @@
<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>&lt;code&gt;</code>.</p>
<h2>Inline</h2>
<p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
<pre class="prettyprint linenums">
{{_i}}For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.{{/i}}
</pre>
</div><!--/span-->
<div class="span4">
<h2>Basic block</h2>
<p>{{_i}}Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.{{/i}}</p>
<h2>Basic block</h2>
<p>{{_i}}Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.{{/i}}</p>
<pre>
&lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
</pre>
@ -337,12 +335,11 @@
&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}}You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}</p>
</div><!--/span-->
<div class="span4">
<h2>Google Prettify</h2>
<p>Take the same <code>&lt;pre&gt;</code> element and add two optional classes for enhanced rendering.</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>
<p>{{_i}}You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}</p>
<h2>Google Prettify</h2>
<p>Take the same <code>&lt;pre&gt;</code> element and add two optional classes for enhanced rendering.</p>
<pre class="prettyprint linenums" style="margin-bottom: 9px;">
&lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
</pre>
@ -352,9 +349,7 @@
&amp;lt;p&amp;gt;{{_i}}Sample text here...{{/i}}&amp;lt;/p&amp;gt;
&lt;/pre&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>
</div><!--/span-->
</div><!--/row-->
<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>
</section>