mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-20 04:11:39 +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">
<!-- Masthead
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<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>
<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>
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
@@ -103,9 +94,9 @@
<!-- Typography
================================================== -->
<section id="typography">
<!-- Typography
================================================== -->
<section id="typography">
<div class="page-header">
<h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
</div>
@@ -159,9 +150,9 @@
<div class="bs-docs-example">
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
</div>
<pre class="prettyprint">
&lt;em&gt;rendered as italicized text&lt;/em&gt;
</pre>
<pre class="prettyprint">
&lt;em&gt;rendered as italicized text&lt;/em&gt;
</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>
@@ -404,13 +395,13 @@
<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.
</p>
</section>
</section>
<!-- Code
================================================== -->
<section id="code">
<!-- Code
================================================== -->
<section id="code">
<div class="page-header">
<h1>Code <small>Inline and block code snippets</small></h1>
</div>
@@ -433,13 +424,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</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>
</section>
</section>
<!-- Tables
================================================== -->
<section id="tables">
<!-- Tables
================================================== -->
<section id="tables">
<div class="page-header">
<h1>Tables <small>For, you guessed it, tabular data</small></h1>
</div>
@@ -747,13 +738,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;/table&gt;
</pre>
</section>
</section>
<!-- Forms
================================================== -->
<section id="forms">
<!-- Forms
================================================== -->
<section id="forms">
<div class="page-header">
<h1>Forms</h1>
</div>
@@ -1279,13 +1270,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;/div&gt;
</pre>
</section>
</section>
<!-- Buttons
================================================== -->
<section id="buttons">
<!-- Buttons
================================================== -->
<section id="buttons">
<div class="page-header">
<h1>Buttons</h1>
</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>
<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>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">
</form>
</form>
<pre class="prettyprint linenums">
&lt;a class="btn" href=""&gt;Link&lt;/a&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>
<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
================================================== -->
<section id="icons">
<!-- Icons
================================================== -->
<section id="icons">
<div class="page-header">
<h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
</div>
@@ -1653,10 +1644,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</div>
</form>
</section>
</section>
</div>
</div>
</div>
<!-- Footer
================================================== -->

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

@@ -1,23 +1,14 @@
<!-- Masthead
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<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>
<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>
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
@@ -33,9 +24,9 @@
<!-- Typography
================================================== -->
<section id="typography">
<!-- Typography
================================================== -->
<section id="typography">
<div class="page-header">
<h1>{{_i}}Typography <small>Headings, paragraphs, lists, and other inline type elements</small>{{/i}}</h1>
</div>
@@ -94,9 +85,9 @@
<div class="bs-docs-example">
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
</div>
<pre class="prettyprint">
&lt;em&gt;rendered as italicized text&lt;/em&gt;
</pre>
<pre class="prettyprint">
&lt;em&gt;rendered as italicized text&lt;/em&gt;
</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>
@@ -342,13 +333,13 @@
<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}}
</p>
</section>
</section>
<!-- Code
================================================== -->
<section id="code">
<!-- Code
================================================== -->
<section id="code">
<div class="page-header">
<h1>{{_i}}Code{{/i}} <small>{{_i}}Inline and block code snippets{{/i}}</small></h1>
</div>
@@ -371,13 +362,13 @@
</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>
</section>
</section>
<!-- Tables
================================================== -->
<section id="tables">
<!-- Tables
================================================== -->
<section id="tables">
<div class="page-header">
<h1>{{_i}}Tables <small>For, you guessed it, tabular data</small>{{/i}}</h1>
</div>
@@ -685,13 +676,13 @@
&lt;/table&gt;
</pre>
</section>
</section>
<!-- Forms
================================================== -->
<section id="forms">
<!-- Forms
================================================== -->
<section id="forms">
<div class="page-header">
<h1>{{_i}}Forms{{/i}}</h1>
</div>
@@ -1217,13 +1208,13 @@
&lt;/div&gt;
</pre>
</section>
</section>
<!-- Buttons
================================================== -->
<section id="buttons">
<!-- Buttons
================================================== -->
<section id="buttons">
<div class="page-header">
<h1>{{_i}}Buttons{{/i}}</h1>
</div>
@@ -1338,12 +1329,12 @@
<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>
<form class="bs-docs-example">
<form class="bs-docs-example">
<a class="btn" href="">{{_i}}Link{{/i}}</a>
<button class="btn" type="submit">{{_i}}Button{{/i}}</button>
<input class="btn" type="button" value="{{_i}}Input{{/i}}">
<input class="btn" type="submit" value="{{_i}}Submit{{/i}}">
</form>
</form>
<pre class="prettyprint linenums">
&lt;a class="btn" href=""&gt;{{_i}}Link{{/i}}&lt;/a&gt;
&lt;button class="btn" type="submit"&gt;
@@ -1356,13 +1347,13 @@
</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>
</section>
</section>
<!-- Icons
================================================== -->
<section id="icons">
<!-- Icons
================================================== -->
<section id="icons">
<div class="page-header">
<h1>{{_i}}Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small>{{/i}}</h1>
</div>
@@ -1591,7 +1582,9 @@
</div>
</form>
</section>
</section>
</div>
</div>
</div>{{! /span9 }}
</div>{{! row}}