mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
480 lines
20 KiB
HTML
480 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Scaffolding · Twitter Bootstrap</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
|
|
<!-- Le styles -->
|
|
<link href="assets/css/bootstrap.css" rel="stylesheet">
|
|
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
|
|
<link href="assets/css/docs.css" rel="stylesheet">
|
|
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
|
|
|
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
|
<!--[if lt IE 9]>
|
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
|
|
<!-- Le fav and touch icons -->
|
|
<link rel="shortcut icon" href="assets/ico/favicon.ico">
|
|
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
|
|
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
|
|
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
|
|
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
|
|
|
|
</head>
|
|
|
|
<body data-spy="scroll" data-target=".bs-docs-sidebar">
|
|
|
|
<!-- Navbar
|
|
================================================== -->
|
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
|
<div class="container">
|
|
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="brand" href="./index.html">Bootstrap</a>
|
|
<div class="nav-collapse collapse">
|
|
<ul class="nav">
|
|
<li class="">
|
|
<a href="./index.html">Home</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="./getting-started.html">Get started</a>
|
|
</li>
|
|
<li class="active">
|
|
<a href="./scaffolding.html">Scaffolding</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="./base-css.html">Base CSS</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="./components.html">Components</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="./javascript.html">JavaScript</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="./customize.html">Customize</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Subhead
|
|
================================================== -->
|
|
<header class="jumbotron subhead" id="overview">
|
|
<div class="container">
|
|
<h1>Scaffolding</h1>
|
|
<p class="lead">Bootstrap is built on responsive 12-column grids, layouts, and components.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container">
|
|
|
|
<!-- Docs nav
|
|
================================================== -->
|
|
<div class="row">
|
|
<div class="span3 bs-docs-sidebar">
|
|
<ul class="nav nav-list bs-docs-sidenav">
|
|
<li><a href="#global"><i class="icon-chevron-right"></i> Global styles</a></li>
|
|
<li><a href="#gridSystem"><i class="icon-chevron-right"></i> Grid system</a></li>
|
|
<li><a href="#layouts"><i class="icon-chevron-right"></i> Layouts</a></li>
|
|
<li><a href="#responsive"><i class="icon-chevron-right"></i> Responsive design</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="span9">
|
|
|
|
|
|
|
|
<!-- Global Bootstrap settings
|
|
================================================== -->
|
|
<section id="global">
|
|
<div class="page-header">
|
|
<h1>Global settings</h1>
|
|
</div>
|
|
|
|
<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">
|
|
...
|
|
</html>
|
|
</pre>
|
|
|
|
<h3>Typography and links</h3>
|
|
<p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
|
|
<ul>
|
|
<li>Remove <code>margin</code> on the body</li>
|
|
<li>Set <code>background-color: white;</code> on the <code>body</code></li>
|
|
<li>Use the <code>@baseFontFamily</code>, <code>@baseFontSize</code>, and <code>@baseLineHeight</code> attributes as our typographic base</li>
|
|
<li>Set the global link color via <code>@linkColor</code> and apply link underlines only on <code>:hover</code></li>
|
|
</ul>
|
|
<p>These styles can be found within <strong>scaffolding.less</strong>.</p>
|
|
|
|
<h3>Reset via Normalize</h3>
|
|
<p>With Bootstrap 2, the old reset block has been dropped in favor of <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.</p>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Grid system
|
|
================================================== -->
|
|
<section id="gridSystem">
|
|
<div class="page-header">
|
|
<h1>Default grid system</h1>
|
|
</div>
|
|
|
|
<h2>Live grid example</h2>
|
|
<p>The default Bootstrap grid system utilizes <strong>12 columns</strong>, making for a 940px wide container without <a href="./scaffolding.html#responsive">responsive features</a> enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.</p>
|
|
<div class="bs-docs-grid">
|
|
<div class="row show-grid">
|
|
<div class="span1">1</div>
|
|
<div class="span1">1</div>
|
|
<div class="span1">1</div>
|
|
<div class="span1">1</div>
|
|
<div class="span1">1</div>
|
|
<div class="span1">1</div>
|
|
<div class="span1">1</div>
|
|
<div class="span1">1</div>
|
|
<div class="span1">1</div>
|
|
<div class="span1">1</div>
|
|
<div class="span1">1</div>
|
|
<div class="span1">1</div>
|
|
</div>
|
|
<div class="row show-grid">
|
|
<div class="span4">4</div>
|
|
<div class="span4">4</div>
|
|
<div class="span4">4</div>
|
|
</div>
|
|
<div class="row show-grid">
|
|
<div class="span6">6</div>
|
|
<div class="span6">6</div>
|
|
</div>
|
|
<div class="row show-grid">
|
|
<div class="span12">12</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Basic grid HTML</h3>
|
|
<p>For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.span*</code> columns. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).</p>
|
|
<pre class="prettyprint linenums">
|
|
<div class="row">
|
|
<div class="span4">...</div>
|
|
<div class="span8">...</div>
|
|
</div>
|
|
</pre>
|
|
<p>Given this example, we have <code>.span4</code> and <code>.span8</code>, making for 12 total columns and a complete row.</p>
|
|
|
|
<h2>Offsetting columns</h2>
|
|
<p>Move columns to the right using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> over four columns.</p>
|
|
<div class="bs-docs-grid">
|
|
<div class="row show-grid">
|
|
<div class="span4">4</div>
|
|
<div class="span4 offset4">4 offset 4</div>
|
|
</div><!-- /row -->
|
|
<div class="row show-grid">
|
|
<div class="span3 offset3">3 offset 3</div>
|
|
<div class="span3 offset3">3 offset 3</div>
|
|
</div><!-- /row -->
|
|
<div class="row show-grid">
|
|
<div class="span6 offset6">6 offset 6</div>
|
|
</div><!-- /row -->
|
|
</div>
|
|
<pre class="prettyprint linenums">
|
|
<div class="row">
|
|
<div class="span4">...</div>
|
|
<div class="span4 offset4">...</div>
|
|
</div>
|
|
</pre>
|
|
|
|
|
|
<h2>Nesting columns</h2>
|
|
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.</p>
|
|
<div class="row show-grid">
|
|
<div class="span9">
|
|
Level 1 column
|
|
<div class="row show-grid">
|
|
<div class="span6">
|
|
Level 2
|
|
</div>
|
|
<div class="span6">
|
|
Level 2
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<pre class="prettyprint linenums">
|
|
<div class="row">
|
|
<div class="span9">
|
|
Level 1 column
|
|
<div class="row">
|
|
<div class="span6">Level 2</div>
|
|
<div class="span3">Level 2</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</pre>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Layouts (Default and fluid)
|
|
================================================== -->
|
|
<section id="layouts">
|
|
<div class="page-header">
|
|
<h1>Layouts</h1>
|
|
</div>
|
|
|
|
<h2>Fixed layout</h2>
|
|
<p>Provides a common fixed-width (and optionally responsive) layout with only <code><div class="container"></code> required.</p>
|
|
<div class="mini-layout">
|
|
<div class="mini-layout-body"></div>
|
|
</div>
|
|
<pre class="prettyprint linenums">
|
|
<body>
|
|
<div class="container">
|
|
...
|
|
</div>
|
|
</body>
|
|
</pre>
|
|
|
|
<h2>Fluid layout</h2>
|
|
<p>Create a fluid, two-column page with <code><div class="container-fluid"></code>—great for applications and docs.</p>
|
|
<div class="mini-layout fluid">
|
|
<div class="mini-layout-sidebar"></div>
|
|
<div class="mini-layout-body"></div>
|
|
</div>
|
|
<pre class="prettyprint linenums">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="span2">
|
|
<!--Sidebar content-->
|
|
</div>
|
|
<div class="span10">
|
|
<!--Body content-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</pre>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Responsive design
|
|
================================================== -->
|
|
<section id="responsive">
|
|
<div class="page-header">
|
|
<h1>Responsive design</h1>
|
|
</div>
|
|
|
|
<h2>Enabling responsive features</h2>
|
|
<p>Responsive CSS requires the following meta tag in the <code><head></code> of your pages.</p>
|
|
<pre class="prettyprint linenums">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
</pre>
|
|
|
|
<h2>About responsive Bootstrap</h2>
|
|
<img src="assets/img/responsive-illustrations.png" alt="Responsive devices" style="float: right; margin: 0 0 20px 20px;">
|
|
<p>Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around <code>min-width</code> and <code>max-width</code>.</p>
|
|
<ul>
|
|
<li>Modify the width of column in our grid</li>
|
|
<li>Stack elements instead of float wherever necessary</li>
|
|
<li>Resize headings and text to be more appropriate for devices</li>
|
|
</ul>
|
|
<p>Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.</p>
|
|
|
|
<h2>Supported devices</h2>
|
|
<p>Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
|
|
<table class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Label</th>
|
|
<th>Layout width</th>
|
|
<th>Column width</th>
|
|
<th>Gutter width</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Large display</td>
|
|
<td>1200px and up</td>
|
|
<td>70px</td>
|
|
<td>30px</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Default</td>
|
|
<td>980px and up</td>
|
|
<td>60px</td>
|
|
<td>20px</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Portrait tablets</td>
|
|
<td>768px and above</td>
|
|
<td>42px</td>
|
|
<td>20px</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Phones to tablets</td>
|
|
<td>767px and below</td>
|
|
<td class="muted" colspan="2">Fluid columns, no fixed widths</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Phones</td>
|
|
<td>480px and below</td>
|
|
<td class="muted" colspan="2">Fluid columns, no fixed widths</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<pre class="prettyprint linenums">
|
|
/* Large desktop */
|
|
@media (min-width: 1200px) { ... }
|
|
|
|
/* Portrait tablet to landscape and desktop */
|
|
@media (min-width: 768px) and (max-width: 979px) { ... }
|
|
|
|
/* Landscape phone to portrait tablet */
|
|
@media (max-width: 767px) { ... }
|
|
|
|
/* Landscape phones and down */
|
|
@media (max-width: 480px) { ... }
|
|
</pre>
|
|
|
|
|
|
<h2>Responsive utility classes</h2>
|
|
<p>For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in <code>responsive.less</code>.</p>
|
|
<table class="table table-bordered table-striped responsive-utilities">
|
|
<thead>
|
|
<tr>
|
|
<th>Class</th>
|
|
<th>Phones <small>767px and below</small></th>
|
|
<th>Tablets <small>979px to 768px</small></th>
|
|
<th>Desktops <small>Default</small></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><code>.visible-phone</code></th>
|
|
<td class="is-visible">Visible</td>
|
|
<td class="is-hidden">Hidden</td>
|
|
<td class="is-hidden">Hidden</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.visible-tablet</code></th>
|
|
<td class="is-hidden">Hidden</td>
|
|
<td class="is-visible">Visible</td>
|
|
<td class="is-hidden">Hidden</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.visible-desktop</code></th>
|
|
<td class="is-hidden">Hidden</td>
|
|
<td class="is-hidden">Hidden</td>
|
|
<td class="is-visible">Visible</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.hidden-phone</code></th>
|
|
<td class="is-hidden">Hidden</td>
|
|
<td class="is-visible">Visible</td>
|
|
<td class="is-visible">Visible</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.hidden-tablet</code></th>
|
|
<td class="is-visible">Visible</td>
|
|
<td class="is-hidden">Hidden</td>
|
|
<td class="is-visible">Visible</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.hidden-desktop</code></th>
|
|
<td class="is-visible">Visible</td>
|
|
<td class="is-visible">Visible</td>
|
|
<td class="is-hidden">Hidden</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>When to use</h3>
|
|
<p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.</p>
|
|
|
|
<h3>Responsive utilities test case</h3>
|
|
<p>Resize your browser or load on different devices to test the above classes.</p>
|
|
<h4>Visible on...</h4>
|
|
<p>Green checkmarks indicate that class is visible in your current viewport.</p>
|
|
<ul class="responsive-utilities-test">
|
|
<li>Phone<span class="visible-phone">✔ Phone</span></li>
|
|
<li>Tablet<span class="visible-tablet">✔ Tablet</span></li>
|
|
<li>Desktop<span class="visible-desktop">✔ Desktop</span></li>
|
|
</ul>
|
|
<h4>Hidden on...</h4>
|
|
<p>Here, green checkmarks indicate that class is hidden in your current viewport.</p>
|
|
<ul class="responsive-utilities-test hidden-on">
|
|
<li>Phone<span class="hidden-phone">✔ Phone</span></li>
|
|
<li>Tablet<span class="hidden-tablet">✔ Tablet</span></li>
|
|
<li>Desktop<span class="hidden-desktop">✔ Desktop</span></li>
|
|
</ul>
|
|
|
|
</section>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Footer
|
|
================================================== -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<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>
|
|
<ul class="footer-links">
|
|
<li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
|
|
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li>
|
|
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
|
|
<!-- Le javascript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
|
|
<script src="assets/js/jquery.js"></script>
|
|
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
|
<script src="assets/js/bootstrap-transition.js"></script>
|
|
<script src="assets/js/bootstrap-alert.js"></script>
|
|
<script src="assets/js/bootstrap-modal.js"></script>
|
|
<script src="assets/js/bootstrap-dropdown.js"></script>
|
|
<script src="assets/js/bootstrap-scrollspy.js"></script>
|
|
<script src="assets/js/bootstrap-tab.js"></script>
|
|
<script src="assets/js/bootstrap-tooltip.js"></script>
|
|
<script src="assets/js/bootstrap-popover.js"></script>
|
|
<script src="assets/js/bootstrap-button.js"></script>
|
|
<script src="assets/js/bootstrap-collapse.js"></script>
|
|
<script src="assets/js/bootstrap-carousel.js"></script>
|
|
<script src="assets/js/bootstrap-typeahead.js"></script>
|
|
<script src="assets/js/bootstrap-affix.js"></script>
|
|
<script src="assets/js/application.js"></script>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|