Skip to content
GitLab
Commit 22918f8f authored by Mark Otto's avatar Mark Otto
Browse files

more tweaks to layouts and some docs styles

parent dd127611
Hide whitespace changes
Inline Side-by-side
Showing
with 323 additions and 183 deletions
+323 -183
docs/assets/css/docs.css
+ 11
- 8
View file @ 22918f8f
......@@ -23,6 +23,10 @@ li {
line-height: 20px;
}
.bs-docs-container {
max-width: 780px;
margin: 0 auto;
}
/* Tweak navbar brand link to be super sleek
-------------------------------------------------- */
......@@ -64,16 +68,14 @@ hr.soften {
}
/* Table of contents */
.bs-docs-content {
.bs-docs-contents {
color: #999;
}
.bs-docs-contents ol {
margin-top: 5px;
margin-bottom: 0;
.bs-docs-contents h3 {
}
.bs-docs-contents li {
line-height: 25px;
color: #999;
}
......@@ -130,6 +132,7 @@ hr.soften {
.subhead {
padding-bottom: 0;
margin-bottom: 9px;
border-bottom: 1px solid #ddd;
}
.subhead h1 {
font-size: 54px;
......@@ -297,10 +300,10 @@ hr.soften {
.footer {
padding: 35px 0 36px;
margin-top: 45px;
text-align: center;
border-top: 1px solid #e5e5e5;
}
.footer p {
margin-bottom: 5px;
color: #555;
}
......@@ -696,7 +699,7 @@ form.well {
------------------------- */
.bs-docs-grid {
width: 940px;
margin-left: -240px;
margin-left: -80px;
}
......@@ -915,7 +918,7 @@ form.well {
.bs-docs-grid {
width: 1170px;
margin-left: -300px;
margin-left: -195px;
}
}
docs/base-css.html
+ 104
- 60
View file @ 22918f8f
......@@ -74,14 +74,14 @@
</div>
</div>
<div class="container">
<div class="bs-docs-container">
<!-- Masthead
================================================== -->
<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="subnav">
<!-- <div class="subnav">
<ul class="nav nav-pills">
<li><a href="#typography">Typography</a></li>
<li><a href="#code">Code</a></li>
......@@ -91,9 +91,23 @@
<li><a href="#icons">Icons by Glyphicons</a></li>
</ul>
</div>
</header>
--></header>
<section id="contents">
<div class="bs-docs-contents">
<h3>Contents</h3>
<ol>
<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>
</ol>
</div>
</section>
<!-- Typography
================================================== -->
<section id="typography">
......@@ -288,7 +302,7 @@
<h2>Lists</h2>
<h3>Unordered</h3>
<p>A list of items in which the order does not explicitly matter.</p>
<p>A list of items in which the order does <em>not</em> explicitly matter.</p>
<div class="bs-docs-example">
<ul>
<li>Lorem ipsum dolor sit amet</li>
......@@ -314,64 +328,94 @@
&lt;/ul&gt;
</pre>
<h3>Unstyled</h3>
<p><code>&lt;ul class="unstyled"&gt;</code></p>
<ul class="unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
<h3>Ordered</h3>
<p><code>&lt;ol&gt;</code></p>
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
<p>A list of items in which the order <em>does</em> explicitly matter.</p>
<div class="bs-docs-example">
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
</div>
<pre class="prettyprint linenums">
&lt;ol&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ol&gt;
</pre>
<h3>Unstyled</h3>
<p>A list of items with no <code>list-style</code> or additional left padding.</p>
<div class="bs-docs-example">
<ul class="unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</div>
<pre class="prettyprint linenums">
&lt;ul class="unstyled"&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h3>Description</h3>
<p><code>&lt;dl&gt;</code></p>
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
<h3>Horizontal description</h3>
<p><code>&lt;dl class="dl-horizontal"&gt;</code></p>
<dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
<p>A list of terms with their associated descriptions.</p>
<div class="bs-docs-example">
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
<pre class="prettyprint linenums">
&lt;dl&gt;
&lt;dt&gt;...&lt;/dt&gt;
&lt;dd&gt;...&lt;/dd&gt;
&lt;/dl&gt;
</pre>
<h4>Horizontal description</h4>
<p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p>
<div class="bs-docs-example">
<dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
</div>
<pre class="prettyprint linenums">
&lt;dl class="dl-horizontal"&gt;
&lt;dt&gt;...&lt;/dt&gt;
&lt;dd&gt;...&lt;/dd&gt;
&lt;/dl&gt;
</pre>
<hr>
<p>
<span class="label label-info">Heads up!</span>
......@@ -1592,10 +1636,10 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<!-- Footer
================================================== -->
<footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p><a href="#">Back to top</a></p>
</footer>
</div><!-- /container -->
......
docs/components.html
+ 2
- 2
View file @ 22918f8f
......@@ -74,7 +74,7 @@
</div>
</div>
<div class="container">
<div class="bs-docs-container">
<!-- Masthead
================================================== -->
......@@ -1847,10 +1847,10 @@ class="clearfix"
<!-- Footer
================================================== -->
<footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p><a href="#">Back to top</a></p>
</footer>
</div><!-- /container -->
......
docs/download.html
+ 2
- 2
View file @ 22918f8f
......@@ -74,7 +74,7 @@
</div>
</div>
<div class="container">
<div class="bs-docs-container">
<!-- Masthead
================================================== -->
......@@ -421,10 +421,10 @@
<!-- Footer
================================================== -->
<footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p><a href="#">Back to top</a></p>
</footer>
</div><!-- /container -->
......
docs/examples.html
+ 2
- 2
View file @ 22918f8f
......@@ -74,7 +74,7 @@
</div>
</div>
<div class="container">
<div class="bs-docs-container">
<!-- Masthead
================================================== -->
......@@ -112,10 +112,10 @@
<!-- Footer
================================================== -->
<footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p><a href="#">Back to top</a></p>
</footer>
</div><!-- /container -->
......
docs/index.html
+ 2
- 2
View file @ 22918f8f
......@@ -74,7 +74,7 @@
</div>
</div>
<div class="container">
<div class="bs-docs-container">
<!-- Masthead
================================================== -->
......@@ -187,10 +187,10 @@
<!-- Footer
================================================== -->
<footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p><a href="#">Back to top</a></p>
</footer>
</div><!-- /container -->
......
docs/javascript.html
+ 2
- 2
View file @ 22918f8f
......@@ -74,7 +74,7 @@
</div>
</div>
<div class="container">
<div class="bs-docs-container">
<!-- Masthead
================================================== -->
......@@ -1508,10 +1508,10 @@ $('.carousel').carousel({
<!-- Footer
================================================== -->
<footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p><a href="#">Back to top</a></p>
</footer>
</div><!-- /container -->
......
docs/less.html
+ 2
- 2
View file @ 22918f8f
......@@ -74,7 +74,7 @@
</div>
</div>
<div class="container">
<div class="bs-docs-container">
<!-- Masthead
================================================== -->
......@@ -1025,10 +1025,10 @@
<!-- Footer
================================================== -->
<footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p><a href="#">Back to top</a></p>
</footer>
</div><!-- /container -->
......
docs/scaffolding.html
+ 46
- 21
View file @ 22918f8f
......@@ -74,23 +74,7 @@
</div>
</div>
<div class="container">
<div class="row">
<div class="span3">
<div class="bs-docs-contents well">
<h3>Contents</h3>
<ol>
<li><a href="#global">Global styles</a></li>
<li><a href="#gridSystem">Grid system</a></li>
<li><a href="#fluidGridSystem">Fluid grid system</a></li>
<li><a href="#gridCustomization">Customizing</a></li>
<li><a href="#layouts">Layouts</a></li>
<li><a href="#responsive">Responsive design</a></li>
</ol>
</div>
</div>
<div class="span9">
<div class="bs-docs-container">
<!-- Masthead
================================================== -->
......@@ -98,7 +82,6 @@
<h1>Scaffolding</h1>
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
<!-- <div class="subnav">
<ul class="nav nav-pills">
<li><a href="#global">Global styles</a></li>
......@@ -112,6 +95,50 @@
--></header>
<section class="bs-docs-contents">
<h3>Contents</h3>
<ol>
<li>
<a href="#global">Global styles</a>
<ul>
<li><a href="#global-1">Requires HTML5 doctype</a></li>
<li><a href="#global-2">Typography and links</a></li>
<li><a href="#global-3">Reset via Normalize</a></li>
</ul>
</li>
<li>
<a href="#gridSystem">Grid system</a>
<ul>
<li><a href="#gridSystem-1">Offsetting columns</a></li>
<li><a href="#gridSystem-2">Nesting columns</a></li>
</ul>
</li>
<li>
<a href="#fluidGridSystem">Fluid grid system</a>
<ul>
<li><a href="#fluidGridSystem-1">Nesting fluid columns</a></li>
</ul>
</li>
<li>
<a href="#gridCustomization">Grid Customization</a>
</li>
<li>
<a href="#layouts">Layouts</a>
<ul>
<li><a href="#layouts-1">Fixed layout</a></li>
<li><a href="#layouts-1">Fluid layout</a></li>
</ul>
</li>
<li>
<a href="#responsive">Responsive design</a>
<ul>
<li><a href="#responsive-1">Responsive utility classes</a></li>
<li><a href="#responsive-2">Responsive tests</a></li>
</ul>
</li>
</ol>
</section>
<!-- Global Bootstrap settings
......@@ -609,16 +636,14 @@
</section>
</div>
</div>
<!-- Footer
================================================== -->
<footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p><a href="#">Back to top</a></p>
</footer>
</div><!-- /container -->
......
docs/templates/layout.mustache
+ 2
- 2
View file @ 22918f8f
......@@ -86,7 +86,7 @@
</div>
</div>
<div class="container">
<div class="bs-docs-container">
{{>body}}
......@@ -94,10 +94,10 @@
<!-- Footer
================================================== -->
<footer class="footer">
<p class="pull-right"><a href="#">{{_i}}Back to top{{/i}}</a></p>
<p>{{_i}}Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.{{/i}}</p>
<p>{{_i}}Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p>
<p>{{_i}}Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p>
<p><a href="#">{{_i}}Back to top{{/i}}</a></p>
</footer>
</div><!-- /container -->
......
docs/templates/pages/base-css.mustache
+ 102
- 58
View file @ 22918f8f
......@@ -3,7 +3,7 @@
<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="subnav">
<!-- <div class="subnav">
<ul class="nav nav-pills">
<li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
<li><a href="#code">{{_i}}Code{{/i}}</a></li>
......@@ -13,9 +13,23 @@
<li><a href="#icons">{{_i}}Icons by Glyphicons{{/i}}</a></li>
</ul>
</div>
</header>
--></header>
<section id="contents">
<div class="bs-docs-contents">
<h3>{{_i}}Contents{{/i}}</h3>
<ol>
<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>
</ol>
</div>
</section>
<!-- Typography
================================================== -->
<section id="typography">
......@@ -219,7 +233,7 @@
<h2>{{_i}}Lists{{/i}}</h2>
<h3>{{_i}}Unordered{{/i}}</h3>
<p>{{_i}}A list of items in which the order does not explicitly matter.{{/i}}</p>
<p>{{_i}}A list of items in which the order does <em>not</em> explicitly matter.{{/i}}</p>
<div class="bs-docs-example">
<ul>
<li>Lorem ipsum dolor sit amet</li>
......@@ -245,64 +259,94 @@
&lt;/ul&gt;
</pre>
<h3>{{_i}}Unstyled{{/i}}</h3>
<p><code>&lt;ul class="unstyled"&gt;</code></p>
<ul class="unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
<h3>{{_i}}Ordered{{/i}}</h3>
<p><code>&lt;ol&gt;</code></p>
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
<p>{{_i}}A list of items in which the order <em>does</em> explicitly matter.{{/i}}</p>
<div class="bs-docs-example">
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
</div>
<pre class="prettyprint linenums">
&lt;ol&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ol&gt;
</pre>
<h3>{{_i}}Unstyled{{/i}}</h3>
<p>{{_i}}A list of items with no <code>list-style</code> or additional left padding.{{/i}}</p>
<div class="bs-docs-example">
<ul class="unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</div>
<pre class="prettyprint linenums">
&lt;ul class="unstyled"&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h3>{{_i}}Description{{/i}}</h3>
<p><code>&lt;dl&gt;</code></p>
<dl>
<dt>{{_i}}Description lists{{/i}}</dt>
<dd>{{_i}}A description list is perfect for defining terms.{{/i}}</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
<h3>{{_i}}Horizontal description{{/i}}</h3>
<p><code>&lt;dl class="dl-horizontal"&gt;</code></p>
<dl class="dl-horizontal">
<dt>{{_i}}Description lists{{/i}}</dt>
<dd>{{_i}}A description list is perfect for defining terms.{{/i}}</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
<p>{{_i}}A list of terms with their associated descriptions.{{/i}}</p>
<div class="bs-docs-example">
<dl>
<dt>{{_i}}Description lists{{/i}}</dt>
<dd>{{_i}}A description list is perfect for defining terms.{{/i}}</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
<pre class="prettyprint linenums">
&lt;dl&gt;
&lt;dt&gt;...&lt;/dt&gt;
&lt;dd&gt;...&lt;/dd&gt;
&lt;/dl&gt;
</pre>
<h4>{{_i}}Horizontal description{{/i}}</h4>
<p>{{_i}}Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.{{/i}}</p>
<div class="bs-docs-example">
<dl class="dl-horizontal">
<dt>{{_i}}Description lists{{/i}}</dt>
<dd>{{_i}}A description list is perfect for defining terms.{{/i}}</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
</div>
<pre class="prettyprint linenums">
&lt;dl class="dl-horizontal"&gt;
&lt;dt&gt;...&lt;/dt&gt;
&lt;dd&gt;...&lt;/dd&gt;
&lt;/dl&gt;
</pre>
<hr>
<p>
<span class="label label-info">{{_i}}Heads up!{{/i}}</span>
......
docs/templates/pages/scaffolding.mustache
+ 44
- 20
View file @ 22918f8f
<div class="row">
<div class="span3">
<div class="bs-docs-contents well">
<h3>{{_i}}Contents{{/i}}</h3>
<ol>
<li><a href="#global">{{_i}}Global styles{{/i}}</a></li>
<li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
<li><a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}}</a></li>
<li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
<li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
<li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
</ol>
</div>
</div>
<div class="span9">
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>{{_i}}Scaffolding{{/i}}</h1>
<p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
<!-- <div class="subnav">
<ul class="nav nav-pills">
<li><a href="#global">{{_i}}Global styles{{/i}}</a></li>
......@@ -34,6 +17,50 @@
--></header>
<!-- <section class="bs-docs-contents">
<h3>{{_i}}Contents{{/i}}</h3>
<ol>
<li>
<a href="#global">{{_i}}Global styles{{/i}}</a>
<ul>
<li><a href="#global-1">{{_i}}Requires HTML5 doctype{{/i}}</a></li>
<li><a href="#global-2">{{_i}}Typography and links{{/i}}</a></li>
<li><a href="#global-3">{{_i}}Reset via Normalize{{/i}}</a></li>
</ul>
</li>
<li>
<a href="#gridSystem">{{_i}}Grid system{{/i}}</a>
<ul>
<li><a href="#gridSystem-1">{{_i}}Offsetting columns{{/i}}</a></li>
<li><a href="#gridSystem-2">{{_i}}Nesting columns{{/i}}</a></li>
</ul>
</li>
<li>
<a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}}</a>
<ul>
<li><a href="#fluidGridSystem-1">{{_i}}Nesting fluid columns{{/i}}</a></li>
</ul>
</li>
<li>
<a href="#gridCustomization">{{_i}}Grid Customization{{/i}}</a>
</li>
<li>
<a href="#layouts">{{_i}}Layouts{{/i}}</a>
<ul>
<li><a href="#layouts-1">{{_i}}Fixed layout{{/i}}</a></li>
<li><a href="#layouts-1">{{_i}}Fluid layout{{/i}}</a></li>
</ul>
</li>
<li>
<a href="#responsive">{{_i}}Responsive design{{/i}}</a>
<ul>
<li><a href="#responsive-1">{{_i}}Responsive utility classes{{/i}}</a></li>
<li><a href="#responsive-2">{{_i}}Responsive tests{{/i}}</a></li>
</ul>
</li>
</ol>
</section>
-->
<!-- Global Bootstrap settings
......@@ -530,6 +557,3 @@
</ul>
</section>
</div>
</div>
\ No newline at end of file
docs/upgrading.html
+ 2
- 2
View file @ 22918f8f
......@@ -74,7 +74,7 @@
</div>
</div>
<div class="container">
<div class="bs-docs-container">
<!-- Masthead
================================================== -->
......@@ -275,10 +275,10 @@
<!-- Footer
================================================== -->
<footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p><a href="#">Back to top</a></p>
</footer>
</div><!-- /container -->
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment