mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-18 05:58:25 +01:00
update diagrams to use smaller border radius, add new container-app example
This commit is contained in:
Mark Otto
parent
d0882c580d
commit
d640c3b14b
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
@ -153,7 +153,7 @@
|
||||
<a href="../examples/fluid.html"><img src="assets/img/example-diagram-02.png" class="diagram" alt="Fluid layout with static sidebar"></a>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<a href="../examples/application.html"><img src="assets/img/example-diagram-03.png" class="diagram" alt="Simple hanging container for apps"></a>
|
||||
<a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" class="diagram" alt="Simple hanging container for apps"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -961,7 +961,7 @@
|
||||
<li class="active dropdown">
|
||||
<a href="#" class="dropdown-toggle">Dropdown</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="active"><a href="#">Secondary link</a></li>
|
||||
<li><a href="#">Secondary link</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Another link</a></li>
|
||||
@ -998,7 +998,7 @@
|
||||
</div>
|
||||
<div class="span6 columns">
|
||||
<h4>Dropdowns included</h4>
|
||||
<p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done.</p>
|
||||
<p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code>li</code> tags also support <code>.active</code> for showing current page selection.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p><strong>Note:</strong> When using the topbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>body</code>.</p>
|
||||
|
||||
111
examples/container-app.html
Normal file
111
examples/container-app.html
Normal file
@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bootstrap, from Twitter</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../bootstrap-1.2.0.css" rel="stylesheet">
|
||||
<style type="text/css">
|
||||
/* Override some defaults */
|
||||
html, body {
|
||||
background-color: #eee;
|
||||
}
|
||||
body {
|
||||
padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
|
||||
}
|
||||
.container > footer p {
|
||||
text-align: center; /* center align it with the container */
|
||||
}
|
||||
.container {
|
||||
width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
|
||||
}
|
||||
|
||||
/* The white background content wrapper */
|
||||
.content {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
|
||||
-webkit-border-radius: 0 0 6px 6px;
|
||||
-moz-border-radius: 0 0 6px 6px;
|
||||
border-radius: 0 0 6px 6px;
|
||||
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
|
||||
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.15);
|
||||
}
|
||||
|
||||
/* Page header tweaks */
|
||||
.page-header {
|
||||
background-color: #f5f5f5;
|
||||
padding: 20px 20px 10px;
|
||||
margin: -20px -20px 20px;
|
||||
}
|
||||
|
||||
/* Styles you shouldn't keep as they are for displaying this base example only */
|
||||
.content .span10,
|
||||
.content .span4 {
|
||||
min-height: 500px;
|
||||
}
|
||||
/* Give a quick and non-cross-browser friendly divider */
|
||||
.content .span4 {
|
||||
margin-left: 0;
|
||||
padding-left: 19px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="shortcut icon" href="images/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="topbar">
|
||||
<div class="fill">
|
||||
<div class="container">
|
||||
<h3><a href="#">Project name</a></h3>
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
<p class="pull-right">Logged in as <a href="#">username</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="content">
|
||||
<div class="page-header">
|
||||
<h1>Page name <small>Supporting text or tagline</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span10">
|
||||
<h2>Main content</h2>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3>Secondary content</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>© Company 2011</p>
|
||||
</footer>
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user