mirror of
https://github.com/twbs/bootstrap.git
synced 2025-05-25 00:04:18 -04:00
overhaul docs on sub pages, clean up css and copy
This commit is contained in:
Mark Otto
parent
549d61fc28
commit
a12f0e551f
@ -12,12 +12,8 @@
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
padding-top: 80px;
|
||||
padding-top: 40px;
|
||||
font-size: 14px;
|
||||
background-color: #fff;
|
||||
background-image: url(../img/grid-20px.png);
|
||||
background-repeat: repeat-x;
|
||||
background-position: 0 40px;
|
||||
}
|
||||
|
||||
/* Code in headings */
|
||||
@ -87,7 +83,22 @@ hr.soften {
|
||||
------------------------- */
|
||||
.jumbotron {
|
||||
position: relative;
|
||||
padding: 40px 0;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 5px rgba(0,0,0,.25), 0 0 30px rgba(0,0,0,.075);
|
||||
background: #020031; /* Old browsers */
|
||||
background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* IE10+ */
|
||||
background: linear-gradient(45deg, #020031 0%,#6d3353 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
|
||||
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
|
||||
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
|
||||
|
||||
}
|
||||
.jumbotron h1 {
|
||||
font-size: 80px;
|
||||
@ -118,22 +129,8 @@ hr.soften {
|
||||
------------------------- */
|
||||
.masthead {
|
||||
padding: 50px 0 60px;
|
||||
margin-top: -40px;
|
||||
margin-bottom: 0;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 5px rgba(0,0,0,.25), 0 0 30px rgba(0,0,0,.075);
|
||||
background: #020031; /* Old browsers */
|
||||
background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* IE10+ */
|
||||
background: linear-gradient(45deg, #020031 0%,#6d3353 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
|
||||
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
|
||||
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
|
||||
}
|
||||
.masthead h1 {
|
||||
font-size: 120px;
|
||||
@ -211,6 +208,9 @@ hr.soften {
|
||||
.subhead h1 {
|
||||
font-size: 60px;
|
||||
}
|
||||
.subhead p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.subhead .navbar {
|
||||
display: none;
|
||||
}
|
||||
@ -736,7 +736,7 @@ form.bs-docs-example {
|
||||
padding-top: 0;
|
||||
}
|
||||
/* Widen masthead and social buttons to fill body padding */
|
||||
.masthead {
|
||||
.jumbotron {
|
||||
margin-top: -20px; /* Offset bottom margin on .navbar */
|
||||
}
|
||||
}
|
||||
@ -750,7 +750,7 @@ form.bs-docs-example {
|
||||
}
|
||||
|
||||
/* Widen masthead and social buttons to fill body padding */
|
||||
.masthead {
|
||||
.jumbotron {
|
||||
padding: 40px 20px;
|
||||
margin-top: -20px; /* Offset bottom margin on .navbar */
|
||||
margin-right: -20px;
|
||||
|
||||
@ -66,20 +66,21 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<div class="container">
|
||||
<h1>Base CSS</h1>
|
||||
<p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
|
||||
<p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<div class="span3 bs-docs-sidebar">
|
||||
<ul class="nav nav-list bs-docs-sidenav">
|
||||
<li><a href="#typography">Typography <i class="icon-chevron-right"></i></a></li>
|
||||
@ -150,9 +151,9 @@
|
||||
<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>
|
||||
<pre class="prettyprint">
|
||||
<em>rendered as italicized text</em>
|
||||
</pre>
|
||||
|
||||
<p><span class="label label-info">Heads up!</span> 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>
|
||||
|
||||
@ -1669,10 +1670,10 @@ For example, <code>section</code> should be wrapped as inline.
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Footer
|
||||
|
||||
@ -66,20 +66,21 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<div class="container">
|
||||
<h1>Components</h1>
|
||||
<p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p>
|
||||
<p class="lead">Dozens of reusable components built to provide navigation, alerts, popovers, and more.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<div class="span3 bs-docs-sidebar">
|
||||
<ul class="nav nav-list bs-docs-sidenav">
|
||||
<li><a href="#dropdowns">Dropdowns <i class="icon-chevron-right"></i></a></li>
|
||||
@ -89,8 +90,7 @@
|
||||
<li><a href="#navbar">Navbar <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#breadcrumbs">Breadcrumbs <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#pagination">Pagination <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#labels">Labels <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#badges">Badges <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#labels-badges">Labels and badges <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#typography">Typography <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#thumbnails">Thumbnails <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#alerts">Alerts <i class="icon-chevron-right"></i></a></li>
|
||||
@ -824,7 +824,7 @@
|
||||
<li class="divider"></li>
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
</pre>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
@ -1492,12 +1492,13 @@
|
||||
|
||||
|
||||
|
||||
<!-- Labels
|
||||
<!-- Labels and badges
|
||||
================================================== -->
|
||||
<section id="labels">
|
||||
<section id="labels-badges">
|
||||
<div class="page-header">
|
||||
<h1>Inline labels <small>Label and annotate text</small></h1>
|
||||
<h1>Labels and badges</h1>
|
||||
</div>
|
||||
<h3>Labels</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -1556,21 +1557,8 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Badges
|
||||
================================================== -->
|
||||
<section id="badges">
|
||||
<div class="page-header">
|
||||
<h1>Badges <small>Indicators and unread counts</small></h1>
|
||||
</div>
|
||||
|
||||
<h3>About</h3>
|
||||
<p>Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.</p>
|
||||
|
||||
<h3>Available classes</h3>
|
||||
<h3>Badges</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -1657,11 +1645,11 @@
|
||||
================================================== -->
|
||||
<section id="typography">
|
||||
<div class="page-header">
|
||||
<h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1>
|
||||
<h1>Typographic components</h1>
|
||||
</div>
|
||||
|
||||
<h2>Hero unit</h2>
|
||||
<p>A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.</p>
|
||||
<p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="hero-unit">
|
||||
<h1>Hello, world!</h1>
|
||||
@ -1778,7 +1766,7 @@
|
||||
<h3>Uses grid column sizes</h3>
|
||||
<p>Lastly, the thumbnails component uses existing grid system classes—like <code>.span2</code> or <code>.span3</code>—for control of thumbnail dimensions.</p>
|
||||
|
||||
<h2>The markup</h2>
|
||||
<h2>Markup</h2>
|
||||
<p>As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="thumbnails">
|
||||
@ -1812,9 +1800,9 @@
|
||||
<img src="http://placehold.it/360x268" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span2">
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/160x120" alt="">
|
||||
<img src="http://placehold.it/260x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span2">
|
||||
@ -1822,19 +1810,9 @@
|
||||
<img src="http://placehold.it/160x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span2">
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/160x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span2">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/160x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span2">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/160x120" alt="">
|
||||
<img src="http://placehold.it/260x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span2">
|
||||
@ -2194,10 +2172,10 @@ class="clearfix"
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Footer
|
||||
|
||||
@ -66,8 +66,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Masthead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
@ -416,8 +414,6 @@
|
||||
</section><!-- /download -->
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Footer
|
||||
|
||||
@ -66,8 +66,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Masthead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
@ -100,8 +98,6 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Footer
|
||||
|
||||
@ -66,20 +66,21 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<div class="container">
|
||||
<h1>Extending Bootstrap</h1>
|
||||
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
|
||||
<div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<div class="span3 bs-docs-sidebar">
|
||||
<ul class="nav nav-list bs-docs-sidenav">
|
||||
<li><a href="#built-with-less">Built with LESS <i class="icon-chevron-right"></i></a></li>
|
||||
@ -170,10 +171,10 @@
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Footer
|
||||
|
||||
@ -66,15 +66,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
</div>
|
||||
<!-- Masthead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<div class="container">
|
||||
<h1>Getting started</h1>
|
||||
<p class="lead">Overview of the project, it's contents, and how to get started with a simple template.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span3 bs-docs-sidebar">
|
||||
<ul class="nav nav-list bs-docs-sidenav">
|
||||
@ -211,8 +213,6 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Footer
|
||||
|
||||
@ -66,16 +66,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="jumbotron masthead">
|
||||
<div class="container">
|
||||
<h1>Bootstrap</h1>
|
||||
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
|
||||
<p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" >Download Bootstrap</a></p>
|
||||
<ul class="masthead-links">
|
||||
<li><a href="./getting-started.html" >Getting started</a></li>
|
||||
<li><a href="./download.html" >Customize</a></li>
|
||||
<li><a href="http://github.com/twitter/bootstrap" >GitHub project</a></li>
|
||||
<li>Version 2.1.0</li>
|
||||
@ -158,7 +155,7 @@
|
||||
|
||||
</div><!-- /.marketing -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -66,20 +66,21 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<div class="container">
|
||||
<h1>Javascript for Bootstrap</h1>
|
||||
<p class="lead">Bring Bootstrap's components to life—now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.
|
||||
<p class="lead">Bring Bootstrap's components to life—now with 12 custom jQuery plugins.
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<div class="span3 bs-docs-sidebar">
|
||||
<ul class="nav nav-list bs-docs-sidenav">
|
||||
<li><a href="#transitions">Transitions <i class="icon-chevron-right"></i></a></li>
|
||||
@ -296,7 +297,7 @@
|
||||
<td>path</td>
|
||||
<td>false</td>
|
||||
<td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
|
||||
<pre class="prettyprint linenums"><code><a data-toggle="modal" href="remote.html" data-target="#modal">click me</a></code></pre></td>
|
||||
<pre class="prettyprint linenums"><code><a data-toggle="modal" href="remote.html" data-target="#modal">click me</a></code></pre></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -348,7 +349,8 @@ $('#myModal').modal({
|
||||
<pre class="prettyprint linenums">
|
||||
$('#myModal').on('hidden', function () {
|
||||
// do something…
|
||||
})</pre>
|
||||
})
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
|
||||
@ -695,7 +697,8 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
|
||||
$(function () {
|
||||
$('#myTab a:last').tab('show');
|
||||
})
|
||||
</script></pre>
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<h3>Events</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
@ -720,7 +723,8 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
|
||||
$('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
e.target // activated tab
|
||||
e.relatedTarget // previous tab
|
||||
})</pre>
|
||||
})
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
|
||||
@ -756,7 +760,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
|
||||
<h2>Usage</h2>
|
||||
<p>Trigger the tooltip via javascript:</p>
|
||||
<pre class="prettyprint linenums">$('#example').tooltip(options)</pre>
|
||||
<pre class="prettyprint linenums">$('#example').tooltip(options)</pre>
|
||||
|
||||
<h3>Options</h3>
|
||||
<p>Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
|
||||
@ -825,9 +829,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
|
||||
<h3>Markup</h3>
|
||||
<p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<a href="#" rel="tooltip" title="first tooltip">hover over me</a>
|
||||
</pre>
|
||||
<pre class="prettyprint linenums">
|
||||
<a href="#" rel="tooltip" title="first tooltip">hover over me</a>
|
||||
</pre>
|
||||
|
||||
<h3>Methods</h3>
|
||||
<h4>$().tooltip(options)</h4>
|
||||
@ -1074,7 +1078,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<pre class="prettyprint linenums">
|
||||
$('#my-alert').bind('closed', function () {
|
||||
// do something…
|
||||
})</pre>
|
||||
})
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
|
||||
@ -1586,10 +1591,10 @@ $('.carousel').carousel({
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Footer
|
||||
|
||||
@ -66,26 +66,27 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<div class="container">
|
||||
<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>
|
||||
<p class="lead">Bootstrap is built on a responsive 12-column grid and includes fixed- and fluid-width layouts.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<div class="span3 bs-docs-sidebar">
|
||||
<ul class="nav nav-list bs-docs-sidenav">
|
||||
<li><a href="#global">Global styles <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#gridSystem">Grid system <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#fluidGridSystem">Fluid grid system <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#gridCustomization">Customizing <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#layouts">Layouts <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#responsive">Responsive design <i class="icon-chevron-right"></i></a></li>
|
||||
</ul>
|
||||
@ -101,7 +102,7 @@
|
||||
<h1>Global styles <small>for CSS reset, typography, and links</small></h1>
|
||||
</div>
|
||||
|
||||
<h2>Requires HTML5 doctype</h2>
|
||||
<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>
|
||||
@ -110,7 +111,7 @@
|
||||
</html>
|
||||
</pre>
|
||||
|
||||
<h2>Typography and links</h2>
|
||||
<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>
|
||||
@ -120,7 +121,7 @@
|
||||
</ul>
|
||||
<p>These styles can be found within <strong>scaffolding.less</strong>.</p>
|
||||
|
||||
<h2>Reset via Normalize</h2>
|
||||
<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>
|
||||
@ -331,61 +332,6 @@
|
||||
|
||||
|
||||
|
||||
<!-- Customizaton
|
||||
================================================== -->
|
||||
<section id="gridCustomization">
|
||||
<div class="page-header">
|
||||
<h1>Grid customization</h1>
|
||||
</div>
|
||||
|
||||
<h2>Variables in LESS</h2>
|
||||
<p>The default grid is built on a few variables for easy customization via LESS. All variables can be found in <strong>variables.less</strong>.</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Variable</th>
|
||||
<th>Default value</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@gridColumns</code></td>
|
||||
<td>12</td>
|
||||
<td>Number of columns</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gridColumnWidth</code></td>
|
||||
<td>60px</td>
|
||||
<td>Width of each column</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gridGutterWidth</code></td>
|
||||
<td>20px</td>
|
||||
<td>Negative space between columns</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@fluidGridColumnWidth</code></td>
|
||||
<td>6.382978723%</td>
|
||||
<td>Width of each fluid column</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@fluidGridGutterWidth</code></td>
|
||||
<td>2.127659574%</td>
|
||||
<td>Negative space between fluid columns</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>How to customize</h3>
|
||||
<p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in <strong>variables.less</strong> and use one of the <a href="less.html#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in <strong>grid.less</strong>.</p>
|
||||
|
||||
<h2>Staying responsive</h2>
|
||||
<p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to manually customize the grids in <strong>responsive.less</strong> until a future update improves this.</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Layouts (Default and fluid)
|
||||
================================================== -->
|
||||
@ -588,10 +534,10 @@
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Footer
|
||||
|
||||
4
docs/templates/layout.mustache
vendored
4
docs/templates/layout.mustache
vendored
@ -78,12 +78,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
{{>body}}
|
||||
|
||||
</div>{{! /container }}
|
||||
|
||||
|
||||
|
||||
<!-- Footer
|
||||
|
||||
21
docs/templates/pages/base-css.mustache
vendored
21
docs/templates/pages/base-css.mustache
vendored
@ -1,15 +1,18 @@
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<div class="container">
|
||||
<h1>{{_i}}Base CSS{{/i}}</h1>
|
||||
<p class="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}</p>
|
||||
<p class="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes.{{/i}}</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<div class="span3 bs-docs-sidebar">
|
||||
<ul class="nav nav-list bs-docs-sidenav">
|
||||
<li><a href="#typography">{{_i}}Typography{{/i}} <i class="icon-chevron-right"></i></a></li>
|
||||
@ -85,9 +88,9 @@
|
||||
<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>
|
||||
<pre class="prettyprint">
|
||||
<em>rendered as italicized text</em>
|
||||
</pre>
|
||||
|
||||
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}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.{{/i}}</p>
|
||||
|
||||
@ -1607,4 +1610,6 @@
|
||||
|
||||
|
||||
</div>{{! /span9 }}
|
||||
</div>{{! row}}
|
||||
</div>{{! row}}
|
||||
|
||||
</div>{{! /container }}
|
||||
|
||||
66
docs/templates/pages/components.mustache
vendored
66
docs/templates/pages/components.mustache
vendored
@ -1,15 +1,18 @@
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<div class="container">
|
||||
<h1>{{_i}}Components{{/i}}</h1>
|
||||
<p class="lead">{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}</p>
|
||||
<p class="lead">{{_i}}Dozens of reusable components built to provide navigation, alerts, popovers, and more.{{/i}}</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<div class="span3 bs-docs-sidebar">
|
||||
<ul class="nav nav-list bs-docs-sidenav">
|
||||
<li><a href="#dropdowns">{{_i}}Dropdowns{{/i}} <i class="icon-chevron-right"></i></a></li>
|
||||
@ -19,8 +22,7 @@
|
||||
<li><a href="#navbar">{{_i}}Navbar{{/i}} <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#breadcrumbs">{{_i}}Breadcrumbs{{/i}} <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#pagination">{{_i}}Pagination{{/i}} <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#labels">{{_i}}Labels{{/i}} <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#badges">{{_i}}Badges{{/i}} <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#labels-badges">{{_i}}Labels and badges{{/i}} <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#typography">{{_i}}Typography{{/i}} <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#thumbnails">{{_i}}Thumbnails{{/i}} <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#alerts">{{_i}}Alerts{{/i}} <i class="icon-chevron-right"></i></a></li>
|
||||
@ -754,7 +756,7 @@
|
||||
<li class="divider"></li>
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
</pre>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
@ -1422,12 +1424,13 @@
|
||||
|
||||
|
||||
|
||||
<!-- Labels
|
||||
<!-- Labels and badges
|
||||
================================================== -->
|
||||
<section id="labels">
|
||||
<section id="labels-badges">
|
||||
<div class="page-header">
|
||||
<h1>{{_i}}Inline labels{{/i}} <small>{{_i}}Label and annotate text{{/i}}</small></h1>
|
||||
<h1>{{_i}}Labels and badges{{/i}}</h1>
|
||||
</div>
|
||||
<h3>{{_i}}Labels{{/i}}</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -1486,21 +1489,8 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Badges
|
||||
================================================== -->
|
||||
<section id="badges">
|
||||
<div class="page-header">
|
||||
<h1>{{_i}}Badges{{/i}} <small>{{_i}}Indicators and unread counts{{/i}}</small></h1>
|
||||
</div>
|
||||
|
||||
<h3>About</h3>
|
||||
<p>{{_i}}Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.{{/i}}</p>
|
||||
|
||||
<h3>Available classes</h3>
|
||||
<h3>{{_i}}Badges{{/i}}</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -1587,11 +1577,11 @@
|
||||
================================================== -->
|
||||
<section id="typography">
|
||||
<div class="page-header">
|
||||
<h1>{{_i}}Typographic components{{/i}} <small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1>
|
||||
<h1>{{_i}}Typographic components{{/i}}</h1>
|
||||
</div>
|
||||
|
||||
<h2>{{_i}}Hero unit{{/i}}</h2>
|
||||
<p>{{_i}}A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}</p>
|
||||
<p>{{_i}}A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.{{/i}}</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="hero-unit">
|
||||
<h1>{{_i}}Hello, world!{{/i}}</h1>
|
||||
@ -1708,7 +1698,7 @@
|
||||
<h3>{{_i}}Uses grid column sizes{{/i}}</h3>
|
||||
<p>{{_i}}Lastly, the thumbnails component uses existing grid system classes—like <code>.span2</code> or <code>.span3</code>—for control of thumbnail dimensions.{{/i}}</p>
|
||||
|
||||
<h2>{{_i}}The markup{{/i}}</h2>
|
||||
<h2>{{_i}}Markup{{/i}}</h2>
|
||||
<p>{{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="thumbnails">
|
||||
@ -1742,9 +1732,9 @@
|
||||
<img src="http://placehold.it/360x268" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span2">
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/160x120" alt="">
|
||||
<img src="http://placehold.it/260x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span2">
|
||||
@ -1752,19 +1742,9 @@
|
||||
<img src="http://placehold.it/160x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span2">
|
||||
<li class="span3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/160x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span2">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/160x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span2">
|
||||
<a href="#" class="thumbnail">
|
||||
<img src="http://placehold.it/160x120" alt="">
|
||||
<img src="http://placehold.it/260x120" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<li class="span2">
|
||||
@ -2124,4 +2104,6 @@ class="clearfix"
|
||||
|
||||
|
||||
</div>{{! /span9 }}
|
||||
</div>{{! row}}
|
||||
</div>{{! row}}
|
||||
|
||||
</div>{{! /container }}
|
||||
|
||||
13
docs/templates/pages/extend.mustache
vendored
13
docs/templates/pages/extend.mustache
vendored
@ -1,15 +1,18 @@
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<div class="container">
|
||||
<h1>{{_i}}Extending Bootstrap{{/i}}</h1>
|
||||
<p class="lead">{{_i}}Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.{{/i}}</p>
|
||||
<div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<div class="span3 bs-docs-sidebar">
|
||||
<ul class="nav nav-list bs-docs-sidenav">
|
||||
<li><a href="#built-with-less">{{_i}}Built with LESS{{/i}} <i class="icon-chevron-right"></i></a></li>
|
||||
@ -100,4 +103,6 @@
|
||||
|
||||
|
||||
</div>{{! /span9 }}
|
||||
</div>{{! row}}
|
||||
</div>{{! row}}
|
||||
|
||||
</div>{{! /container }}
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
</div>
|
||||
<!-- Masthead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<div class="container">
|
||||
<h1>{{_i}}Getting started{{/i}}</h1>
|
||||
<p class="lead">{{_i}}Overview of the project, it's contents, and how to get started with a simple template.{{/i}}</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span3 bs-docs-sidebar">
|
||||
<ul class="nav nav-list bs-docs-sidenav">
|
||||
|
||||
5
docs/templates/pages/index.mustache
vendored
5
docs/templates/pages/index.mustache
vendored
@ -1,11 +1,10 @@
|
||||
</div>
|
||||
|
||||
<div class="jumbotron masthead">
|
||||
<div class="container">
|
||||
<h1>Bootstrap</h1>
|
||||
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
|
||||
<p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.1.0']);"{{/production}}>{{_i}}Download Bootstrap{{/i}}</a></p>
|
||||
<ul class="masthead-links">
|
||||
<li><a href="./getting-started.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Getting started']);"{{/production}}>Getting started</a></li>
|
||||
<li><a href="./download.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Customize']);"{{/production}}>Customize</a></li>
|
||||
<li><a href="http://github.com/twitter/bootstrap" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);"{{/production}}>GitHub project</a></li>
|
||||
<li>Version 2.1.0</li>
|
||||
@ -87,3 +86,5 @@
|
||||
</div>
|
||||
|
||||
</div><!-- /.marketing -->
|
||||
|
||||
</div>{{! /container }}
|
||||
|
||||
37
docs/templates/pages/javascript.mustache
vendored
37
docs/templates/pages/javascript.mustache
vendored
@ -1,15 +1,18 @@
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<div class="container">
|
||||
<h1>{{_i}}Javascript for Bootstrap{{/i}}</h1>
|
||||
<p class="lead">{{_i}}Bring Bootstrap's components to life—now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.{{/i}}
|
||||
<p class="lead">{{_i}}Bring Bootstrap's components to life—now with 12 custom jQuery plugins.{{/i}}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<div class="span3 bs-docs-sidebar">
|
||||
<ul class="nav nav-list bs-docs-sidenav">
|
||||
<li><a href="#transitions">{{_i}}Transitions{{/i}} <i class="icon-chevron-right"></i></a></li>
|
||||
@ -228,7 +231,7 @@
|
||||
<td>{{_i}}path{{/i}}</td>
|
||||
<td>{{_i}}false{{/i}}</td>
|
||||
<td><p>{{_i}}If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:{{/i}}</p>
|
||||
<pre class="prettyprint linenums"><code><a data-toggle="modal" href="remote.html" data-target="#modal">click me</a></code></pre></td>
|
||||
<pre class="prettyprint linenums"><code><a data-toggle="modal" href="remote.html" data-target="#modal">click me</a></code></pre></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -280,7 +283,8 @@ $('#myModal').modal({
|
||||
<pre class="prettyprint linenums">
|
||||
$('#myModal').on('hidden', function () {
|
||||
// {{_i}}do something…{{/i}}
|
||||
})</pre>
|
||||
})
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
|
||||
@ -627,7 +631,8 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
|
||||
$(function () {
|
||||
$('#myTab a:last').tab('show');
|
||||
})
|
||||
</script></pre>
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Events{{/i}}</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
@ -652,7 +657,8 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
|
||||
$('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
e.target // activated tab
|
||||
e.relatedTarget // previous tab
|
||||
})</pre>
|
||||
})
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
|
||||
@ -688,7 +694,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
|
||||
<h2>{{_i}}Usage{{/i}}</h2>
|
||||
<p>{{_i}}Trigger the tooltip via javascript:{{/i}}</p>
|
||||
<pre class="prettyprint linenums">$('#example').tooltip({{_i}}options{{/i}})</pre>
|
||||
<pre class="prettyprint linenums">$('#example').tooltip({{_i}}options{{/i}})</pre>
|
||||
|
||||
<h3>{{_i}}Options{{/i}}</h3>
|
||||
<p>{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.{{/i}}</p>
|
||||
@ -757,9 +763,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
|
||||
<h3>{{_i}}Markup{{/i}}</h3>
|
||||
<p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a>
|
||||
</pre>
|
||||
<pre class="prettyprint linenums">
|
||||
<a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Methods{{/i}}</h3>
|
||||
<h4>$().tooltip({{_i}}options{{/i}})</h4>
|
||||
@ -1006,7 +1012,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<pre class="prettyprint linenums">
|
||||
$('#my-alert').bind('closed', function () {
|
||||
// {{_i}}do something…{{/i}}
|
||||
})</pre>
|
||||
})
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
|
||||
@ -1518,4 +1525,6 @@ $('.carousel').carousel({
|
||||
|
||||
|
||||
</div>{{! /span9 }}
|
||||
</div>{{! row}}
|
||||
</div>{{! row}}
|
||||
|
||||
</div>{{! /container }}
|
||||
|
||||
78
docs/templates/pages/scaffolding.mustache
vendored
78
docs/templates/pages/scaffolding.mustache
vendored
@ -1,21 +1,24 @@
|
||||
<!-- Subhead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
<div class="container">
|
||||
<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>
|
||||
<p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid and includes fixed- and fluid-width layouts.{{/i}}</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
|
||||
<!-- Docs nav
|
||||
================================================== -->
|
||||
<div class="row">
|
||||
<div class="span3 bs-docs-sidebar">
|
||||
<ul class="nav nav-list bs-docs-sidenav">
|
||||
<li><a href="#global">{{_i}}Global styles{{/i}} <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#gridSystem">{{_i}}Grid system{{/i}} <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}} <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#gridCustomization">{{_i}}Customizing{{/i}} <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#layouts">{{_i}}Layouts{{/i}} <i class="icon-chevron-right"></i></a></li>
|
||||
<li><a href="#responsive">{{_i}}Responsive design{{/i}} <i class="icon-chevron-right"></i></a></li>
|
||||
</ul>
|
||||
@ -31,7 +34,7 @@
|
||||
<h1>{{_i}}Global styles <small>for CSS reset, typography, and links</small>{{/i}}</h1>
|
||||
</div>
|
||||
|
||||
<h2>{{_i}}Requires HTML5 doctype{{/i}}</h2>
|
||||
<h3>{{_i}}Requires HTML5 doctype{{/i}}</h3>
|
||||
<p>{{_i}}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.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<!DOCTYPE html>
|
||||
@ -40,7 +43,7 @@
|
||||
</html>
|
||||
</pre>
|
||||
|
||||
<h2>{{_i}}Typography and links{{/i}}</h2>
|
||||
<h3>{{_i}}Typography and links{{/i}}</h3>
|
||||
<p>{{_i}}Bootstrap sets basic global display, typography, and link styles. Specifically, we:{{/i}}</p>
|
||||
<ul>
|
||||
<li>{{_i}}Remove <code>margin</code> on the body{{/i}}</li>
|
||||
@ -50,7 +53,7 @@
|
||||
</ul>
|
||||
<p>{{_i}}These styles can be found within <strong>scaffolding.less</strong>.{{/i}}</p>
|
||||
|
||||
<h2>{{_i}}Reset via Normalize{{/i}}</h2>
|
||||
<h3>{{_i}}Reset via Normalize{{/i}}</h3>
|
||||
<p>{{_i}}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.{{/i}}</p>
|
||||
|
||||
</section>
|
||||
@ -261,61 +264,6 @@
|
||||
|
||||
|
||||
|
||||
<!-- Customizaton
|
||||
================================================== -->
|
||||
<section id="gridCustomization">
|
||||
<div class="page-header">
|
||||
<h1>{{_i}}Grid customization{{/i}}</h1>
|
||||
</div>
|
||||
|
||||
<h2>{{_i}}Variables in LESS{{/i}}</h2>
|
||||
<p>{{_i}}The default grid is built on a few variables for easy customization via LESS. All variables can be found in <strong>variables.less</strong>.{{/i}}</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{_i}}Variable{{/i}}</th>
|
||||
<th>{{_i}}Default value{{/i}}</th>
|
||||
<th>{{_i}}Description{{/i}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@gridColumns</code></td>
|
||||
<td>12</td>
|
||||
<td>{{_i}}Number of columns{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gridColumnWidth</code></td>
|
||||
<td>60px</td>
|
||||
<td>{{_i}}Width of each column{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@gridGutterWidth</code></td>
|
||||
<td>20px</td>
|
||||
<td>{{_i}}Negative space between columns{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@fluidGridColumnWidth</code></td>
|
||||
<td>6.382978723%</td>
|
||||
<td>{{_i}}Width of each fluid column{{/i}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@fluidGridGutterWidth</code></td>
|
||||
<td>2.127659574%</td>
|
||||
<td>{{_i}}Negative space between fluid columns{{/i}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>{{_i}}How to customize{{/i}}</h3>
|
||||
<p>{{_i}}Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in <strong>variables.less</strong> and use one of the <a href="less.html#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in <strong>grid.less</strong>.{{/i}}</p>
|
||||
|
||||
<h2>{{_i}}Staying responsive{{/i}}</h2>
|
||||
<p>{{_i}}Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to manually customize the grids in <strong>responsive.less</strong> until a future update improves this.{{/i}}</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Layouts (Default and fluid)
|
||||
================================================== -->
|
||||
@ -522,4 +470,6 @@
|
||||
|
||||
|
||||
</div>{{! /span9 }}
|
||||
</div>{{! row}}
|
||||
</div>{{! row}}
|
||||
|
||||
</div>{{! /container }}
|
||||
|
||||
@ -66,8 +66,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Masthead
|
||||
================================================== -->
|
||||
<header class="jumbotron subhead" id="overview">
|
||||
@ -263,8 +261,6 @@
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Footer
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user