mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-20 20:31:26 +02:00
Code Issues Releases Wiki Activity

fix indenting and remove hidden subnav on Base CSS docs

Browse Source
This commit is contained in:
Mark Otto
2012-07-09 22:34:33 -07:00
parent c74dddd02e
commit 3ea309568f
2 changed files with 2173 additions and 2186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
docs/base-css.html
View File

@@ -68,26 +68,17 @@
<div class="container"> <div class="container">
<!-- Masthead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>Base CSS</h1> <h1>Base CSS</h1>
<p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p> <p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
<div class="navbar navbar-subnav">
<div class="navbar-inner">
<ul class="nav">
<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>
<li><a href="#icons">Icons by Glyphicons</a></li>
</ul>
</div>
</div>
</header> </header>
<!-- Docs nav
================================================== -->
<div class="row"> <div class="row">
<div class="span3 bs-docs-sidebar"> <div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav"> <ul class="nav nav-list bs-docs-sidenav">
@@ -103,9 +94,9 @@
<!-- Typography <!-- Typography
================================================== --> ================================================== -->
<section id="typography"> <section id="typography">
<div class="page-header"> <div class="page-header">
<h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1> <h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
</div> </div>
@@ -159,9 +150,9 @@
<div class="bs-docs-example"> <div class="bs-docs-example">
<p>The following snippet of text is <em>rendered as italicized text</em>.</p> <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
</div> </div>
<pre class="prettyprint"> <pre class="prettyprint">
&lt;em&gt;rendered as italicized text&lt;/em&gt; &lt;em&gt;rendered as italicized text&lt;/em&gt;
</pre> </pre>
<p><span class="label label-info">Heads up!</span> Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p> <p><span class="label label-info">Heads up!</span> Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
@@ -404,13 +395,13 @@
<span class="label label-info">Heads up!</span> <span class="label label-info">Heads up!</span>
Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout. Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
</p> </p>
</section> </section>
<!-- Code <!-- Code
================================================== --> ================================================== -->
<section id="code"> <section id="code">
<div class="page-header"> <div class="page-header">
<h1>Code <small>Inline and block code snippets</small></h1> <h1>Code <small>Inline and block code snippets</small></h1>
</div> </div>
@@ -433,13 +424,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</pre> </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>
<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> <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>
</section> </section>
<!-- Tables <!-- Tables
================================================== --> ================================================== -->
<section id="tables"> <section id="tables">
<div class="page-header"> <div class="page-header">
<h1>Tables <small>For, you guessed it, tabular data</small></h1> <h1>Tables <small>For, you guessed it, tabular data</small></h1>
</div> </div>
@@ -747,13 +738,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;/table&gt; &lt;/table&gt;
</pre> </pre>
</section> </section>
<!-- Forms <!-- Forms
================================================== --> ================================================== -->
<section id="forms"> <section id="forms">
<div class="page-header"> <div class="page-header">
<h1>Forms</h1> <h1>Forms</h1>
</div> </div>
@@ -1279,13 +1270,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</section> </section>
<!-- Buttons <!-- Buttons
================================================== --> ================================================== -->
<section id="buttons"> <section id="buttons">
<div class="page-header"> <div class="page-header">
<h1>Buttons</h1> <h1>Buttons</h1>
</div> </div>
@@ -1400,12 +1391,12 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<h2>One class, multiple tags</h2> <h2>One class, multiple tags</h2>
<p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p> <p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
<form class="bs-docs-example"> <form class="bs-docs-example">
<a class="btn" href="">Link</a> <a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button> <button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input"> <input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit"> <input class="btn" type="submit" value="Submit">
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;a class="btn" href=""&gt;Link&lt;/a&gt; &lt;a class="btn" href=""&gt;Link&lt;/a&gt;
&lt;button class="btn" type="submit"&gt; &lt;button class="btn" type="submit"&gt;
@@ -1418,13 +1409,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</pre> </pre>
<p>As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.</p> <p>As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.</p>
</section> </section>
<!-- Icons <!-- Icons
================================================== --> ================================================== -->
<section id="icons"> <section id="icons">
<div class="page-header"> <div class="page-header">
<h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1> <h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
</div> </div>
@@ -1653,10 +1644,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</div> </div>
</form> </form>
</section> </section>
</div>
</div> </div>
</div>
<!-- Footer <!-- Footer
================================================== --> ================================================== -->

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

@@ -1,23 +1,14 @@
<!-- Masthead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>{{_i}}Base CSS{{/i}}</h1> <h1>{{_i}}Base CSS{{/i}}</h1>
<p class="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}</p> <p class="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}</p>
<div class="navbar navbar-subnav">
<div class="navbar-inner">
<ul class="nav">
<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>
<li><a href="#icons">{{_i}}Icons by Glyphicons{{/i}}</a></li>
</ul>
</div>
</div>
</header> </header>
<!-- Docs nav
================================================== -->
<div class="row"> <div class="row">
<div class="span3 bs-docs-sidebar"> <div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav"> <ul class="nav nav-list bs-docs-sidenav">
@@ -33,9 +24,9 @@
<!-- Typography <!-- Typography
================================================== --> ================================================== -->
<section id="typography"> <section id="typography">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Typography <small>Headings, paragraphs, lists, and other inline type elements</small>{{/i}}</h1> <h1>{{_i}}Typography <small>Headings, paragraphs, lists, and other inline type elements</small>{{/i}}</h1>
</div> </div>
@@ -94,9 +85,9 @@
<div class="bs-docs-example"> <div class="bs-docs-example">
<p>The following snippet of text is <em>rendered as italicized text</em>.</p> <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
</div> </div>
<pre class="prettyprint"> <pre class="prettyprint">
&lt;em&gt;rendered as italicized text&lt;/em&gt; &lt;em&gt;rendered as italicized text&lt;/em&gt;
</pre> </pre>
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.{{/i}}</p> <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.{{/i}}</p>
@@ -342,13 +333,13 @@
<span class="label label-info">{{_i}}Heads up!{{/i}}</span> <span class="label label-info">{{_i}}Heads up!{{/i}}</span>
{{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.{{/i}} {{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.{{/i}}
</p> </p>
</section> </section>
<!-- Code <!-- Code
================================================== --> ================================================== -->
<section id="code"> <section id="code">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Code{{/i}} <small>{{_i}}Inline and block code snippets{{/i}}</small></h1> <h1>{{_i}}Code{{/i}} <small>{{_i}}Inline and block code snippets{{/i}}</small></h1>
</div> </div>
@@ -371,13 +362,13 @@
</pre> </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>
<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> <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>
</section> </section>
<!-- Tables <!-- Tables
================================================== --> ================================================== -->
<section id="tables"> <section id="tables">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Tables <small>For, you guessed it, tabular data</small>{{/i}}</h1> <h1>{{_i}}Tables <small>For, you guessed it, tabular data</small>{{/i}}</h1>
</div> </div>
@@ -685,13 +676,13 @@
&lt;/table&gt; &lt;/table&gt;
</pre> </pre>
</section> </section>
<!-- Forms <!-- Forms
================================================== --> ================================================== -->
<section id="forms"> <section id="forms">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Forms{{/i}}</h1> <h1>{{_i}}Forms{{/i}}</h1>
</div> </div>
@@ -1217,13 +1208,13 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</section> </section>
<!-- Buttons <!-- Buttons
================================================== --> ================================================== -->
<section id="buttons"> <section id="buttons">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Buttons{{/i}}</h1> <h1>{{_i}}Buttons{{/i}}</h1>
</div> </div>
@@ -1338,12 +1329,12 @@
<h2>{{_i}}One class, multiple tags{{/i}}</h2> <h2>{{_i}}One class, multiple tags{{/i}}</h2>
<p>{{_i}}Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.{{/i}}</p> <p>{{_i}}Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.{{/i}}</p>
<form class="bs-docs-example"> <form class="bs-docs-example">
<a class="btn" href="">{{_i}}Link{{/i}}</a> <a class="btn" href="">{{_i}}Link{{/i}}</a>
<button class="btn" type="submit">{{_i}}Button{{/i}}</button> <button class="btn" type="submit">{{_i}}Button{{/i}}</button>
<input class="btn" type="button" value="{{_i}}Input{{/i}}"> <input class="btn" type="button" value="{{_i}}Input{{/i}}">
<input class="btn" type="submit" value="{{_i}}Submit{{/i}}"> <input class="btn" type="submit" value="{{_i}}Submit{{/i}}">
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;a class="btn" href=""&gt;{{_i}}Link{{/i}}&lt;/a&gt; &lt;a class="btn" href=""&gt;{{_i}}Link{{/i}}&lt;/a&gt;
&lt;button class="btn" type="submit"&gt; &lt;button class="btn" type="submit"&gt;
@@ -1356,13 +1347,13 @@
</pre> </pre>
<p>{{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.{{/i}}</p> <p>{{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.{{/i}}</p>
</section> </section>
<!-- Icons <!-- Icons
================================================== --> ================================================== -->
<section id="icons"> <section id="icons">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small>{{/i}}</h1> <h1>{{_i}}Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small>{{/i}}</h1>
</div> </div>
@@ -1591,7 +1582,9 @@
</div> </div>
</form> </form>
</section> </section>
</div>
</div>
</div>{{! /span9 }}
</div>{{! row}}