mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-25 21:09:06 +02:00
more tweaks to layouts and some docs styles
This commit is contained in:
Mark Otto
@@ -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 @@
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>Unstyled</h3>
|
||||
<p><code><ul class="unstyled"></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><ol></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">
|
||||
<ol>
|
||||
<li>...</li>
|
||||
</ol>
|
||||
</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">
|
||||
<ul class="unstyled">
|
||||
<li>...</li>
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>Description</h3>
|
||||
<p><code><dl></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>
|
||||
<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">
|
||||
<dl>
|
||||
<dt>...</dt>
|
||||
<dd>...</dd>
|
||||
</dl>
|
||||
</pre>
|
||||
|
||||
<h3>Horizontal description</h3>
|
||||
<p><code><dl class="dl-horizontal"></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>
|
||||
<h4>Horizontal description</h4>
|
||||
<p>Make terms and descriptions in <code><dl></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">
|
||||
<dl class="dl-horizontal">
|
||||
<dt>...</dt>
|
||||
<dd>...</dd>
|
||||
</dl>
|
||||
</pre>
|
||||
<hr>
|
||||
<p>
|
||||
<span class="label label-info">Heads up!</span>
|
||||
@@ -1592,10 +1636,10 @@ For example, <code>section</code> 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 -->
|
||||
|
||||
Reference in New Issue
Block a user