mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
Start pygmentizing css.html; add new theme for pygments
This commit is contained in:
Mark Otto
parent
d709dba284
commit
5f0ecb740a
@ -16,7 +16,7 @@
|
||||
|
||||
<!-- Documentation extras -->
|
||||
<link href="/assets/css/docs.css" rel="stylesheet">
|
||||
<link href="/assets/css/pygments_monokai.css" rel="stylesheet">
|
||||
<link href="/assets/css/pygments-manni.css" rel="stylesheet">
|
||||
<link href="/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
|
||||
@ -214,7 +214,8 @@ section > ul li {
|
||||
}
|
||||
|
||||
/* Tweak display of the examples */
|
||||
.bs-docs-example + .prettyprint {
|
||||
.bs-docs-example + .prettyprint,
|
||||
.bs-docs-example + .highlight {
|
||||
margin-top: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
@ -486,9 +487,12 @@ input.focused {
|
||||
}
|
||||
|
||||
.highlight {
|
||||
padding: 9px 14px;
|
||||
margin-bottom: 14px;
|
||||
padding: 14px;
|
||||
border-radius: 5px;
|
||||
background-color: #f7f7f9;
|
||||
border: 1px solid #e1e1e8;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
|
||||
}
|
||||
.highlight pre {
|
||||
padding: 0;
|
||||
@ -497,7 +501,16 @@ input.focused {
|
||||
border: 0;
|
||||
}
|
||||
.highlight pre code {
|
||||
color: #ccc;
|
||||
font-size: inherit;
|
||||
color: #333; /* Effectively the base text color */
|
||||
}
|
||||
.highlight pre .lineno {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
padding-right: 5px;
|
||||
margin-right: 10px;
|
||||
text-align: right;
|
||||
color: #bebec5;
|
||||
}
|
||||
|
||||
|
||||
|
||||
62
docs/assets/css/pygments-manni.css
Normal file
62
docs/assets/css/pygments-manni.css
Normal file
@ -0,0 +1,62 @@
|
||||
.hll { background-color: #ffffcc }
|
||||
{ background: #f0f3f3; }
|
||||
.c { color: #0099FF; font-style: italic } /* Comment */
|
||||
.err { color: #AA0000; background-color: #FFAAAA } /* Error */
|
||||
.k { color: #006699; } /* Keyword */
|
||||
.o { color: #555555 } /* Operator */
|
||||
.cm { color: #0099FF; font-style: italic } /* Comment.Multiline */
|
||||
.cp { color: #009999 } /* Comment.Preproc */
|
||||
.c1 { color: #0099FF; font-style: italic } /* Comment.Single */
|
||||
.cs { color: #0099FF;; font-style: italic } /* Comment.Special */
|
||||
.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
|
||||
.ge { font-style: italic } /* Generic.Emph */
|
||||
.gr { color: #FF0000 } /* Generic.Error */
|
||||
.gh { color: #003300; } /* Generic.Heading */
|
||||
.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
|
||||
.go { color: #AAAAAA } /* Generic.Output */
|
||||
.gp { color: #000099; } /* Generic.Prompt */
|
||||
.gs { } /* Generic.Strong */
|
||||
.gu { color: #003300; } /* Generic.Subheading */
|
||||
.gt { color: #99CC66 } /* Generic.Traceback */
|
||||
.kc { color: #006699; } /* Keyword.Constant */
|
||||
.kd { color: #006699; } /* Keyword.Declaration */
|
||||
.kn { color: #006699; } /* Keyword.Namespace */
|
||||
.kp { color: #006699 } /* Keyword.Pseudo */
|
||||
.kr { color: #006699; } /* Keyword.Reserved */
|
||||
.kt { color: #007788; } /* Keyword.Type */
|
||||
.m { color: #FF6600 } /* Literal.Number */
|
||||
.s { color: #CC3300 } /* Literal.String */
|
||||
.na { color: #330099 } /* Name.Attribute */
|
||||
.nb { color: #336666 } /* Name.Builtin */
|
||||
.nc { color: #00AA88; } /* Name.Class */
|
||||
.no { color: #336600 } /* Name.Constant */
|
||||
.nd { color: #9999FF } /* Name.Decorator */
|
||||
.ni { color: #999999; } /* Name.Entity */
|
||||
.ne { color: #CC0000; } /* Name.Exception */
|
||||
.nf { color: #CC00FF } /* Name.Function */
|
||||
.nl { color: #9999FF } /* Name.Label */
|
||||
.nn { color: #00CCFF; } /* Name.Namespace */
|
||||
.nt { color: #330099; } /* Name.Tag */
|
||||
.nv { color: #003333 } /* Name.Variable */
|
||||
.ow { color: #000000; } /* Operator.Word */
|
||||
.w { color: #bbbbbb } /* Text.Whitespace */
|
||||
.mf { color: #FF6600 } /* Literal.Number.Float */
|
||||
.mh { color: #FF6600 } /* Literal.Number.Hex */
|
||||
.mi { color: #FF6600 } /* Literal.Number.Integer */
|
||||
.mo { color: #FF6600 } /* Literal.Number.Oct */
|
||||
.sb { color: #CC3300 } /* Literal.String.Backtick */
|
||||
.sc { color: #CC3300 } /* Literal.String.Char */
|
||||
.sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
|
||||
.s2 { color: #CC3300 } /* Literal.String.Double */
|
||||
.se { color: #CC3300; } /* Literal.String.Escape */
|
||||
.sh { color: #CC3300 } /* Literal.String.Heredoc */
|
||||
.si { color: #AA0000 } /* Literal.String.Interpol */
|
||||
.sx { color: #CC3300 } /* Literal.String.Other */
|
||||
.sr { color: #33AAAA } /* Literal.String.Regex */
|
||||
.s1 { color: #CC3300 } /* Literal.String.Single */
|
||||
.ss { color: #FFCC33 } /* Literal.String.Symbol */
|
||||
.bp { color: #336666 } /* Name.Builtin.Pseudo */
|
||||
.vc { color: #003333 } /* Name.Variable.Class */
|
||||
.vg { color: #003333 } /* Name.Variable.Global */
|
||||
.vi { color: #003333 } /* Name.Variable.Instance */
|
||||
.il { color: #FF6600 } /* Literal.Number.Integer.Long */
|
||||
@ -1,60 +0,0 @@
|
||||
.highlight .hll { background-color: #49483e }
|
||||
.highlight { background: #272822; color: #f8f8f2 }
|
||||
.highlight .c { color: #75715e } /* Comment */
|
||||
.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
|
||||
.highlight .k { color: #66d9ef } /* Keyword */
|
||||
.highlight .l { color: #ae81ff } /* Literal */
|
||||
.highlight .n { color: #f8f8f2 } /* Name */
|
||||
.highlight .o { color: #f92672 } /* Operator */
|
||||
.highlight .p { color: #f8f8f2 } /* Punctuation */
|
||||
.highlight .cm { color: #75715e } /* Comment.Multiline */
|
||||
.highlight .cp { color: #75715e } /* Comment.Preproc */
|
||||
.highlight .c1 { color: #75715e } /* Comment.Single */
|
||||
.highlight .cs { color: #75715e } /* Comment.Special */
|
||||
.highlight .ge { font-style: italic } /* Generic.Emph */
|
||||
.highlight .gs { font-weight: bold } /* Generic.Strong */
|
||||
.highlight .kc { color: #66d9ef } /* Keyword.Constant */
|
||||
.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
|
||||
.highlight .kn { color: #f92672 } /* Keyword.Namespace */
|
||||
.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
|
||||
.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
|
||||
.highlight .kt { color: #66d9ef } /* Keyword.Type */
|
||||
.highlight .ld { color: #e6db74 } /* Literal.Date */
|
||||
.highlight .m { color: #ae81ff } /* Literal.Number */
|
||||
.highlight .s { color: #e6db74 } /* Literal.String */
|
||||
.highlight .na { color: #a6e22e } /* Name.Attribute */
|
||||
.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
|
||||
.highlight .nc { color: #a6e22e } /* Name.Class */
|
||||
.highlight .no { color: #66d9ef } /* Name.Constant */
|
||||
.highlight .nd { color: #a6e22e } /* Name.Decorator */
|
||||
.highlight .ni { color: #f8f8f2 } /* Name.Entity */
|
||||
.highlight .ne { color: #a6e22e } /* Name.Exception */
|
||||
.highlight .nf { color: #a6e22e } /* Name.Function */
|
||||
.highlight .nl { color: #f8f8f2 } /* Name.Label */
|
||||
.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
|
||||
.highlight .nx { color: #a6e22e } /* Name.Other */
|
||||
.highlight .py { color: #f8f8f2 } /* Name.Property */
|
||||
.highlight .nt { color: #f92672 } /* Name.Tag */
|
||||
.highlight .nv { color: #f8f8f2 } /* Name.Variable */
|
||||
.highlight .ow { color: #f92672 } /* Operator.Word */
|
||||
.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
|
||||
.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
|
||||
.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
|
||||
.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
|
||||
.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
|
||||
.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
|
||||
.highlight .sc { color: #e6db74 } /* Literal.String.Char */
|
||||
.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
|
||||
.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
|
||||
.highlight .se { color: #ae81ff } /* Literal.String.Escape */
|
||||
.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
|
||||
.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
|
||||
.highlight .sx { color: #e6db74 } /* Literal.String.Other */
|
||||
.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
|
||||
.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
|
||||
.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
|
||||
.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
|
||||
.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
|
||||
.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
|
||||
.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
|
||||
.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
|
||||
191
docs/css.html
191
docs/css.html
@ -46,17 +46,21 @@ title: CSS
|
||||
|
||||
<h3>Requires HTML5 doctype</h3>
|
||||
<p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
{% highlight html linenos %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
...
|
||||
</html>
|
||||
</pre>
|
||||
</html>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Mobile first</h3>
|
||||
<p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
|
||||
<p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code><head></code>.</p>
|
||||
<pre class="prettyprint linenums"><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre>
|
||||
|
||||
{% highlight html linenos %}
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Typography and links</h3>
|
||||
<p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
|
||||
@ -103,7 +107,9 @@ title: CSS
|
||||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
|
||||
</div>
|
||||
<pre class="prettyprint"><p>...</p></pre>
|
||||
{% highlight html linenos %}
|
||||
<p>...</p>
|
||||
{% endhighlight %}
|
||||
|
||||
<!-- Body copy .lead -->
|
||||
<h3>Lead body copy</h3>
|
||||
@ -111,7 +117,9 @@ title: CSS
|
||||
<div class="bs-docs-example">
|
||||
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
|
||||
</div>
|
||||
<pre class="prettyprint"><p class="lead">...</p></pre>
|
||||
{% highlight html linenos %}
|
||||
<p class="lead">...</p>
|
||||
{% endhighlight %}
|
||||
|
||||
<!-- Using LESS -->
|
||||
<h3>Built with Less</h3>
|
||||
@ -127,25 +135,28 @@ title: CSS
|
||||
<div class="bs-docs-example">
|
||||
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
||||
</div>
|
||||
<pre class="prettyprint">
|
||||
<p>
|
||||
<small>This line of text is meant to be treated as fine print.</small>
|
||||
</p>
|
||||
</pre>
|
||||
{% highlight html linenos %}
|
||||
<small>This line of text is meant to be treated as fine print.</small>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h3>Bold</h3>
|
||||
<p>For emphasizing a snippet of text with a heavier font-weight.</p>
|
||||
<div class="bs-docs-example">
|
||||
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
|
||||
</div>
|
||||
<pre class="prettyprint"><strong>rendered as bold text</strong></pre>
|
||||
{% highlight html linenos %}
|
||||
<strong>rendered as bold text</strong>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Italics</h3>
|
||||
<p>For emphasizing a snippet of text with italics.</p>
|
||||
<div class="bs-docs-example">
|
||||
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
|
||||
</div>
|
||||
<pre class="prettyprint"><em>rendered as italicized text</em></pre>
|
||||
{% highlight html linenos %}
|
||||
<em>rendered as italicized text</em>
|
||||
{% endhighlight %}
|
||||
|
||||
<p>Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
||||
|
||||
@ -156,11 +167,11 @@ title: CSS
|
||||
<p class="text-center">Center aligned text.</p>
|
||||
<p class="text-right">Right aligned text.</p>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<p class="text-left">Left aligned text.</p>
|
||||
<p class="text-center">Center aligned text.</p>
|
||||
<p class="text-right">Right aligned text.</p>
|
||||
</pre>
|
||||
{% highlight html linenos %}
|
||||
<p class="text-left">Left aligned text.</p>
|
||||
<p class="text-center">Center aligned text.</p>
|
||||
<p class="text-right">Right aligned text.</p>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Emphasis classes</h3>
|
||||
<p>Convey meaning through color with a handful of emphasis utility classes.</p>
|
||||
@ -170,12 +181,13 @@ title: CSS
|
||||
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
||||
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||||
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
</pre>
|
||||
{% highlight html linenos %}
|
||||
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
||||
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||||
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<!-- Abbreviations -->
|
||||
@ -187,14 +199,18 @@ title: CSS
|
||||
<div class="bs-docs-example">
|
||||
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
|
||||
</div>
|
||||
<pre class="prettyprint"><abbr title="attribute">attr</abbr></pre>
|
||||
{% highlight html linenos %}
|
||||
<abbr title="attribute">attr</abbr>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3><code><abbr class="initialism"></code></h3>
|
||||
<p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
|
||||
<div class="bs-docs-example">
|
||||
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
|
||||
</div>
|
||||
<pre class="prettyprint"><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></pre>
|
||||
{% highlight html linenos %}
|
||||
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<!-- Addresses -->
|
||||
@ -215,19 +231,19 @@ title: CSS
|
||||
<a href="mailto:#">first.last@example.com</a>
|
||||
</address>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<address>
|
||||
<strong>Twitter, Inc.</strong><br>
|
||||
795 Folsom Ave, Suite 600<br>
|
||||
San Francisco, CA 94107<br>
|
||||
<abbr title="Phone">P:</abbr> (123) 456-7890
|
||||
</address>
|
||||
{% highlight html linenos %}
|
||||
<address>
|
||||
<strong>Twitter, Inc.</strong><br>
|
||||
795 Folsom Ave, Suite 600<br>
|
||||
San Francisco, CA 94107<br>
|
||||
<abbr title="Phone">P:</abbr> (123) 456-7890
|
||||
</address>
|
||||
|
||||
<address>
|
||||
<strong>Full Name</strong><br>
|
||||
<a href="mailto:#">first.last@example.com</a>
|
||||
</address>
|
||||
</pre>
|
||||
<address>
|
||||
<strong>Full Name</strong><br>
|
||||
<a href="mailto:#">first.last@example.com</a>
|
||||
</address>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<!-- Blockquotes -->
|
||||
@ -241,11 +257,11 @@ title: CSS
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</blockquote>
|
||||
</pre>
|
||||
{% highlight html linenos %}
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</blockquote>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Blockquote options</h3>
|
||||
<p>Style and content changes for simple variations on a standard blockquote.</p>
|
||||
@ -258,12 +274,12 @@ title: CSS
|
||||
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
|
||||
</blockquote>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
|
||||
</blockquote>
|
||||
</pre>
|
||||
{% highlight html linenos %}
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
|
||||
</blockquote>
|
||||
{% endhighlight %}
|
||||
|
||||
<h4>Alternate displays</h4>
|
||||
<p>Use <code>.pull-right</code> for a floated, right-aligned blockquote.</p>
|
||||
@ -273,11 +289,11 @@ title: CSS
|
||||
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
|
||||
</blockquote>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<blockquote class="pull-right">
|
||||
{% highlight html linenos %}
|
||||
<blockquote class="pull-right">
|
||||
...
|
||||
</blockquote>
|
||||
</pre>
|
||||
</blockquote>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<!-- Lists -->
|
||||
@ -304,11 +320,11 @@ title: CSS
|
||||
<li>Eget porttitor lorem</li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul>
|
||||
<li>...</li>
|
||||
</ul>
|
||||
</pre>
|
||||
{% highlight html linenos %}
|
||||
<ul>
|
||||
<li>...</li>
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Ordered</h3>
|
||||
<p>A list of items in which the order <em>does</em> explicitly matter.</p>
|
||||
@ -324,11 +340,11 @@ title: CSS
|
||||
<li>Eget porttitor lorem</li>
|
||||
</ol>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ol>
|
||||
<li>...</li>
|
||||
</ol>
|
||||
</pre>
|
||||
{% highlight html linenos %}
|
||||
<ol>
|
||||
<li>...</li>
|
||||
</ol>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Unstyled</h3>
|
||||
<p>Remove the default <code>list-style</code> and left padding on list items (immediate children only).</p>
|
||||
@ -351,11 +367,11 @@ title: CSS
|
||||
<li>Eget porttitor lorem</li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="list-unstyled">
|
||||
<li>...</li>
|
||||
</ul>
|
||||
</pre>
|
||||
{% highlight html linenos %}
|
||||
<ul class="list-unstyled">
|
||||
<li>...</li>
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Inline</h3>
|
||||
<p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p>
|
||||
@ -366,11 +382,11 @@ title: CSS
|
||||
<li>Nulla volutpat</li>
|
||||
</ul>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="list-inline">
|
||||
<li>...</li>
|
||||
</ul>
|
||||
</pre>
|
||||
{% highlight html linenos %}
|
||||
<ul class="list-inline">
|
||||
<li>...</li>
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Description</h3>
|
||||
<p>A list of terms with their associated descriptions.</p>
|
||||
@ -385,12 +401,12 @@ title: CSS
|
||||
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<dl>
|
||||
<dt>...</dt>
|
||||
<dd>...</dd>
|
||||
</dl>
|
||||
</pre>
|
||||
{% highlight html linenos %}
|
||||
<dl>
|
||||
<dt>...</dt>
|
||||
<dd>...</dd>
|
||||
</dl>
|
||||
{% endhighlight %}
|
||||
|
||||
<h4>Horizontal description</h4>
|
||||
<p>Make terms and descriptions in <code><dl></code> line up side-by-side.</p>
|
||||
@ -407,12 +423,13 @@ title: CSS
|
||||
<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>
|
||||
{% highlight html linenos %}
|
||||
<dl class="dl-horizontal">
|
||||
<dt>...</dt>
|
||||
<dd>...</dd>
|
||||
</dl>
|
||||
{% endhighlight %}
|
||||
|
||||
<h5>Auto-truncating</h5>
|
||||
<p>
|
||||
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.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user