background-repeat: repeat-x;
}
-/* Tweak topbar brand link to be super sleek
+/* Tweak navbar brand link to be super sleek
-------------------------------------------------- */
body > .navbar-fixed .brand {
padding-right: 0;
text-decoration: none;
}
+/* Space out sub-sections more
+-------------------------------------------------- */
+.page-header {
+ margin-top: 36px;
+}
+
/* Jumbotrons
-------------------------------------------------- */
.jumbotron {
color: #999;
}
-
/* Specific jumbotrons
------------------------- */
/* supporting docs pages */
.subhead {
padding-bottom: 14px;
+ margin-bottom: 45px;
border-bottom: 3px solid #e5e5e5;
}
.subhead h1,
}
-/* Topbar special styles
--------------------------------------------------- */
-.topbar-wrapper {
- position: relative;
- height: 40px;
- margin: 5px 0 15px;
-}
-.topbar-wrapper .topbar {
- position: absolute;
- margin: 0 -20px;
-}
-.topbar-wrapper .topbar .topbar-inner {
- padding-left: 20px;
- padding-right: 20px;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
-}
-
-/* Topbar in js docs
-------------------------- */
-#bootstrap-js .topbar-wrapper {
- z-index: 1;
-}
-#bootstrap-js .topbar-wrapper .topbar {
- position: absolute;
- margin: 0 -20px;
-}
-#bootstrap-js .topbar-wrapper .topbar .topbar-inner {
- padding-left: 20px;
- padding-right: 20px;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
-}
-#bootstrap-js .topbar-wrapper .container {
- width: auto;
-}
-
-
/* Popover docs
-------------------------------------------------- */
.popover-well {
}
-/* Pretty Print
+/* Misc
-------------------------------------------------- */
+
pre.prettyprint {
overflow: hidden;
}
-
-/* Wells
--------------------------------------------------- */
.well form {
margin-bottom: 0;
}
margin-top: 5px;
}
+
/* Responsive Docs
-------------------------------------------------- */
@media (max-width: 480px) {
}
+
@media (min-width: 768px) and (max-width: 940px) {
/* Scale down the jumbotron content */
<h2>Lists</h2>
<div class="row">
<div class="span3">
- <h4>Unordered <code><ul></code></h4>
+ <h4>Unordered</h4>
+ <p><code><ul></code></p>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
</ul>
</div>
<div class="span3">
- <h4>Unstyled <code><ul.unstyled></code></h4>
+ <h4>Unstyled</h4>
+ <p><code><ul class="unstyled"></code></p>
<ul class="unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
</ul>
</div>
<div class="span3">
- <h4>Ordered <code><ol></code></h4>
+ <h4>Ordered</h4>
+ <p><code><ol></code></p>
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
</ol>
</div>
<div class="span3">
- <h4>Description <code><dl></code></h4>
+ <h4>Description</h4>
+ <p><code><dl></code></p>
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<h1>Heading</h1>
<p>Something right here...</p>
</div></pre>
- <p><strong>Note:</strong> Be sure to keep code within <code>pre</code> tags as close to the left as possible; it will render all tabs.</p>
+ <p><strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.</p>
</td>
</tr>
<tr>
<div class="row">
<div class="span3">
<h2>Block messages</h2>
- <p><code>.alert-message.block-message</code></p>
+ <p><code><div class="alert-message block-message"></code></p>
<p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p>
<p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p>
</div>
</tr>
<td>Javascript</td>
<td>
- <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>head</code>.</p>
+ <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code><head></code>.</p>
<pre class="prettyprint">
<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>
</div><!-- /col -->
<div class="span6">
<h2>Fluid layout</h2>
- <p>An alternative, flexible fluid page structure with min- and max-widths and a left-hand sidebar. Great for apps and docs.</p>
+ <p><code><div class="fluid-container"></code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
<div class="mini-layout fluid">
<div class="mini-layout-sidebar"></div>
<div class="mini-layout-body"></div>