/* Nav: second level (shown on .active) */
.bs-docs-sidebar .nav .nav {
display: none;
- margin-left: 15px;
margin-bottom: 5px;
}
.bs-docs-sidebar .nav > .active > ul {
.bs-docs-sidebar .nav .nav > li > a {
padding-top: 2px;
padding-bottom: 2px;
+ padding-left: 40px;
font-size: 90%;
}
<h3>Emphasis classes</h3>
<p>Convey meaning through color with a handful of emphasis utility classes.</p>
<div class="bs-docs-example">
- <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+ <p class="text-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>
</div>
{% highlight html linenos %}
-<p class="muted">...</p>
+<p class="text-muted">...</p>
<p class="text-warning">...</p>
<p class="text-error">...</p>
<p class="text-success">...</p>
<div class="bs-docs-example bs-docs-example-submenu">
<div class="pull-left">
- <p class="muted">Default</p>
+ <p class="text-muted">Default</p>
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
</div>
<div class="pull-left">
- <p class="muted">Dropup</p>
+ <p class="text-muted">Dropup</p>
<div class="dropup">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
</div>
<div class="pull-left">
- <p class="muted">Left submenu</p>
+ <p class="text-muted">Left submenu</p>
<div class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
}
{% endhighlight %}
- <h4>.muted</h4>
- <p>Change an element's color to <code>#999</code></p>
-{% highlight html linenos %}
-<p class="muted">...</p>
-{% endhighlight %}
-{% highlight css linenos %}
-.muted {
- color: #999;
-}
-{% endhighlight %}
-
-
<h4>.clearfix</h4>
<p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
{% highlight html linenos %}
<div class="featurette">
<img class="featurette-image pull-right" src="../assets/img/examples/browser-icon-chrome.png">
- <h2 class="featurette-heading">First featurette headling. <span class="muted">It'll blow your mind.</span></h2>
+ <h2 class="featurette-heading">First featurette headling. <span class="text-muted">It'll blow your mind.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="featurette">
<img class="featurette-image pull-left" src="../assets/img/examples/browser-icon-firefox.png">
- <h2 class="featurette-heading">Oh yeah, it's that good. <span class="muted">See for yourself.</span></h2>
+ <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="featurette">
<img class="featurette-image pull-right" src="../assets/img/examples/browser-icon-safari.png">
- <h2 class="featurette-heading">And lastly, this one. <span class="muted">Checkmate.</span></h2>
+ <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
- <h3 class="muted">Project name</h3>
+ <h3 class="text-muted">Project name</h3>
</div>
<div class="jumbotron">
<div class="container">
<div class="masthead">
- <h3 class="muted">Project name</h3>
+ <h3 class="text-muted">Project name</h3>
<ul class="nav nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<div id="footer">
<div class="container">
- <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
+ <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
<div id="footer">
<div class="container">
- <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
+ <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
cite { font-style: normal; }
// Utility classes
-.muted { color: @grayLight; }
-a.muted:hover,
-a.muted:focus { color: darken(@grayLight, 10%); }
+.text-muted { color: @grayLight; }
+a.text-muted:hover,
+a.text-muted:focus { color: darken(@grayLight, 10%); }
.text-warning { color: @state-warning-text; }
a.text-warning:hover,