mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-17 14:54:30 +01:00
Added in mini layout docs; cleaned up layout markup and added the css for it;
This commit is contained in:
parent
8c2e128698
commit
eb3389303d
55
index.html
55
index.html
@ -12,19 +12,6 @@
|
||||
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
|
||||
<script type="text/javascript" src="http://tablesorter.com/jquery.tablesorter.min.js"></script>
|
||||
<script type="text/javascript" src="js/jquery/hashgrid.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
// Active state in top nav
|
||||
$('div.topbar ul a').click(function() {
|
||||
if ($(this).parents('li').hasClass('active')) {
|
||||
$(this).parents('li').removeClass('active');
|
||||
} else {
|
||||
$(this).parents('li').siblings().removeClass('active');
|
||||
$(this).parents('li').addClass('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Code Highlighting -->
|
||||
<script type="text/javascript" src="js/jquery/chili/jquery.chili-2.2.js"></script>
|
||||
@ -54,7 +41,7 @@
|
||||
<img src="img/twitter-logo-no-bird.png" alt="Twitter" /> <span>baseline</span>
|
||||
</a></h3>
|
||||
<ul>
|
||||
<li class="active"><a href="#">Getting Started</a></li>
|
||||
<li><a href="#getting-started">Getting Started</a></li>
|
||||
<li><a href="#bootstrap">Bootstrap</a></li>
|
||||
<li><a href="#grid-system">Grid</a></li>
|
||||
<li><a href="#layouts">Layouts</a></li>
|
||||
@ -91,7 +78,7 @@
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<section id="getting-started">
|
||||
<div class="page-header">
|
||||
<h1>Getting started</h1>
|
||||
</div>
|
||||
@ -338,10 +325,44 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
|
||||
<h2>Fixed layout</h2>
|
||||
<p>A basic 940px wide, centered container layout for just about any site or page.</p>
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
|
||||
<div class="mini-layout">
|
||||
<div class="mini-layout-body"></div>
|
||||
</div>
|
||||
<pre class="html">
|
||||
<body>
|
||||
<div class="container">
|
||||
...
|
||||
</div>
|
||||
</body>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<h2>Fluid layout</h2>
|
||||
<p>A flexible fluid or liquid page structure with min- and max-widths and a left-hand sidebar. Great for apps.</p>
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
<div class="mini-layout fluid">
|
||||
<div class="mini-layout-sidebar"></div>
|
||||
<div class="mini-layout-body"></div>
|
||||
</div>
|
||||
<pre class="html">
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<div class="sidebar">
|
||||
...
|
||||
</div>
|
||||
<div class="content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
@ -1,3 +1,13 @@
|
||||
/*
|
||||
Baseline's documentation styles
|
||||
Special styles for presenting Baseline's documentation and examples
|
||||
*/
|
||||
|
||||
|
||||
/* Body and structure
|
||||
-------------------------------------------------- */
|
||||
|
||||
// Give us a gradient background
|
||||
body {
|
||||
#gradient > .vertical-three-colors(#eee, #fff, 0.15, #fff);
|
||||
background-attachment: fixed;
|
||||
@ -5,7 +15,7 @@ body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Give us some love
|
||||
// Give us some love on HTML5 elements (hardly use these in Basline thus far though)
|
||||
header,
|
||||
section,
|
||||
footer,
|
||||
@ -14,6 +24,13 @@ aside {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Break up sections
|
||||
section {
|
||||
padding-top: @baseline * 4;
|
||||
margin-bottom: @baseline * -2;
|
||||
}
|
||||
|
||||
// Blueprint-style header and footer
|
||||
#masthead,
|
||||
#footer {
|
||||
#gradient > .vertical(darken(@blue-dark, 5%), darken(@blue, 7.5%));
|
||||
@ -69,7 +86,10 @@ aside {
|
||||
}
|
||||
}
|
||||
|
||||
// Show the grids
|
||||
|
||||
/* Special grid styles
|
||||
-------------------------------------------------- */
|
||||
|
||||
.show-grid {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
@ -89,13 +109,10 @@ aside {
|
||||
}
|
||||
}
|
||||
|
||||
// Break up sections
|
||||
section {
|
||||
padding-top: @baseline * 4;
|
||||
margin-bottom: @baseline * -2;
|
||||
}
|
||||
|
||||
// Hashgrid.js grid
|
||||
/* Hashgrid.js grid (press G & H to view)
|
||||
-------------------------------------------------- */
|
||||
|
||||
#grid {
|
||||
width: 980px;
|
||||
position: absolute;
|
||||
@ -121,3 +138,44 @@ section {
|
||||
border-color: rgba(255,0,0,.25);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Render mini layout previews
|
||||
-------------------------------------------------- */
|
||||
|
||||
div.mini-layout {
|
||||
height: 340px;
|
||||
margin-bottom: @baseline;
|
||||
padding: 9px;
|
||||
border: 1px solid rgba(0,0,0,.25);
|
||||
.border-radius(6px);
|
||||
.box-shadow(0 1px 3px rgba(0,0,0,.125));
|
||||
// Default mini layout (fixed container)
|
||||
div {
|
||||
.border-radius(3px);
|
||||
&.mini-layout-body {
|
||||
background-color: rgba(141,192,219,.25);
|
||||
margin: 0 auto;
|
||||
width: 450px;
|
||||
height: 340px;
|
||||
}
|
||||
}
|
||||
// Fluid layout (sidebar)
|
||||
&.fluid {
|
||||
div.mini-layout-sidebar,
|
||||
div.mini-layout-header,
|
||||
div.mini-layout-body {
|
||||
float: left;
|
||||
}
|
||||
div.mini-layout-sidebar {
|
||||
background-color: rgba(141,192,219,.5);
|
||||
width: 90px;
|
||||
height: 340px;
|
||||
}
|
||||
div.mini-layout-body {
|
||||
width: 400px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -41,12 +41,27 @@ body {
|
||||
.box-shadow(inset 0 1px 0 #fff);
|
||||
}
|
||||
|
||||
// Containers
|
||||
// Container (centered, fixed-width layouts)
|
||||
div.container {
|
||||
width: 940px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
|
||||
div.container-fluid {
|
||||
padding: 20px;
|
||||
.clearfix();
|
||||
div.sidebar {
|
||||
float: left;
|
||||
width: 220px;
|
||||
}
|
||||
div.content {
|
||||
min-width: 700px;
|
||||
max-width: 1180px;
|
||||
margin-left: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Base Styles
|
||||
-------------------------------------------------- */
|
||||
|
@ -11,6 +11,5 @@ http://twitter.com/mdo
|
||||
|
||||
# Todos
|
||||
|
||||
* Add the empty layout section in
|
||||
* Cross browser checks? Show this anywhere?
|
||||
* Write up brief section on browser support
|
Loading…
x
Reference in New Issue
Block a user