line-height: 20px;
}
-.bs-docs-container {
- max-width: 780px;
- margin: 0 auto;
-}
/* Tweak navbar brand link to be super sleek
-------------------------------------------------- */
border: 0;
}
+/* Table of contents */
+.bs-docs-content {
+ color: #999;
+}
+.bs-docs-contents ol {
+ margin-top: 5px;
+ margin-bottom: 0;
+}
+.bs-docs-contents li {
+ line-height: 25px;
+ color: #999;
+}
+
/* Jumbotrons
-------------------------------------------------- */
}
.jumbotron h1 {
margin-bottom: 9px;
- font-size: 81px;
+ font-size: 80px;
font-weight: bold;
letter-spacing: -1px;
line-height: 1;
margin-bottom: 18px;
}
.masthead p {
- margin-left: 5%;
- margin-right: 5%;
font-size: 30px;
line-height: 36px;
}
.footer {
padding: 35px 0 36px;
margin-top: 45px;
- text-align: center;
border-top: 1px solid #e5e5e5;
}
.footer p {
+ margin-bottom: 5px;
color: #555;
}
------------------------- */
.bs-docs-grid {
width: 940px;
- margin-left: -80px;
+ margin-left: -240px;
}
.bs-docs-grid {
width: 1170px;
- margin-left: -195px;
+ margin-left: -300px;
}
}
</div>
</div>
- <div class="bs-docs-container">
+ <div class="container">
<!-- Masthead
================================================== -->
<!-- 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 -->
</div>
</div>
- <div class="bs-docs-container">
+ <div class="container">
<!-- Masthead
================================================== -->
<!-- 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 -->
</div>
</div>
- <div class="bs-docs-container">
+ <div class="container">
<!-- Masthead
================================================== -->
<!-- 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 -->
</div>
</div>
- <div class="bs-docs-container">
+ <div class="container">
<!-- Masthead
================================================== -->
<!-- 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 -->
</div>
</div>
- <div class="bs-docs-container">
+ <div class="container">
<!-- Masthead
================================================== -->
<!-- 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 -->
</div>
</div>
- <div class="bs-docs-container">
+ <div class="container">
<!-- Masthead
================================================== -->
<!-- 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 -->
</div>
</div>
- <div class="bs-docs-container">
+ <div class="container">
<!-- Masthead
================================================== -->
<!-- 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 -->
</div>
</div>
- <div class="bs-docs-container">
+ <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">
<!-- Masthead
================================================== -->
<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="bs-docs-contents">
- <h4>Contents</h4>
- <ul>
- <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>
- </ul>
- </div>
<!-- <div class="subnav">
<ul class="nav nav-pills">
</div>
</div>
- <div class="row">
- <div class="span4">
- <p>The default grid system provided in Bootstrap utilizes <strong>12 columns</strong> that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically. </p>
- </div><!-- /.span -->
- <div class="span4">
+ <p>The default grid system provided in Bootstrap utilizes <strong>12 columns</strong> that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically. </p>
<pre class="prettyprint linenums">
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
</pre>
- </div><!-- /.span -->
- <div class="span4">
- <p>As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 foundational columns we defined as part of our grid system.</p>
- </div><!-- /.span -->
- </div><!-- /.row -->
+
+ <p>As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 foundational columns we defined as part of our grid system.</p>
<br>
</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 -->
</div>
</div>
- <div class="bs-docs-container">
+ <div class="container">
{{>body}}
<!-- 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 -->
+<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="bs-docs-contents">
- <h4>Contents</h4>
- <ul>
- <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>
- </ul>
- </div>
<!-- <div class="subnav">
<ul class="nav nav-pills">
</div>
</div>
- <div class="row">
- <div class="span4">
- <p>{{_i}}The default grid system provided in Bootstrap utilizes <strong>12 columns</strong> that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically. {{/i}}</p>
- </div><!-- /.span -->
- <div class="span4">
+ <p>{{_i}}The default grid system provided in Bootstrap utilizes <strong>12 columns</strong> that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically. {{/i}}</p>
<pre class="prettyprint linenums">
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
</pre>
- </div><!-- /.span -->
- <div class="span4">
- <p>{{_i}}As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 foundational columns we defined as part of our grid system.{{/i}}</p>
- </div><!-- /.span -->
- </div><!-- /.row -->
+
+ <p>{{_i}}As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 foundational columns we defined as part of our grid system.{{/i}}</p>
<br>
</ul>
</section>
+
+ </div>
+</div>
\ No newline at end of file
</div>
</div>
- <div class="bs-docs-container">
+ <div class="container">
<!-- Masthead
================================================== -->
<!-- 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 -->