rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

fix up jumbotron example

Browse Source
This commit is contained in:
Mark Otto 2013-01-17 20:35:59 -08:00
parent 6466fe00a1
commit caed3a9dbb
2 changed files with 56 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/css/docs.css
View File

@ -473,7 +473,7 @@ input.focused {
/* Account for fixed navbar */ /* Account for fixed navbar */
body { body {
padding-top: 44px; padding-top: 52px;
} }
/* Tweak display of docs jumbotrons */ /* Tweak display of docs jumbotrons */

101
docs/examples/jumbotron.html
View File

@ -2,24 +2,22 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Bootstrap, from Twitter</title> <title>Jumbotron template &middot; Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<!-- Le styles --> <!-- Bootstrap core CSS -->
<link href="../assets/css/bootstrap.css" rel="stylesheet"> <link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!-- Documentation extras -->
<link href="../assets/css/docs.css" rel="stylesheet">
<link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script> <script src="../assets/js/html5shiv.js"></script>
<script src="../assets/js/respond/respond.min.js"></script>
<![endif]--> <![endif]-->
<!-- Fav and touch icons --> <!-- Fav and touch icons -->
@ -28,51 +26,60 @@
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-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"> <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png"> <link rel="shortcut icon" href="../assets/ico/favicon.png">
<!-- Custom styles for this template -->
<style>
.navbar-form input[type="text"],
.navbar-form input[type="password"] {
width: 180px;
}
.jumbotron {
margin-top: 20px;
}
</style>
</head> </head>
<body> <body>
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner"> <div class="container">
<div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<a 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>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> </a>
</a> <a class="brand" href="#">Project name</a>
<a class="brand" href="#">Project name</a> <div class="nav-collapse collapse">
<div class="nav-collapse collapse"> <ul class="nav">
<ul class="nav"> <li class="active"><a href="#">Home</a></li>
<li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li>
<li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li>
<li><a href="#contact">Contact</a></li> <li class="dropdown">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu">
<ul class="dropdown-menu"> <li><a href="#">Action</a></li>
<li><a href="#">Action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li>
<li><a href="#">Something else here</a></li> <li class="divider"></li>
<li class="divider"></li> <li class="nav-header">Nav header</li>
<li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li>
<li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li>
<li><a href="#">One more separated link</a></li> </ul>
</ul> </li>
</li> </ul>
</ul> <form class="navbar-form pull-right">
<form class="navbar-form pull-right"> <input type="text" placeholder="Email">
<input class="span2" type="text" placeholder="Email"> <input type="password" placeholder="Password">
<input class="span2" type="password" placeholder="Password"> <button type="submit" class="btn">Sign in</button>
<button type="submit" class="btn">Sign in</button> </form>
</form> </div><!--/.nav-collapse -->
</div><!--/.nav-collapse -->
</div>
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<!-- Main hero unit for a primary marketing message or call to action --> <!-- Main jumbotron for a primary marketing message or call to action -->
<div class="hero-unit"> <div class="jumbotron">
<h1>Hello, world!</h1> <h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p> <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
@ -105,7 +112,9 @@
</div> <!-- /container --> </div> <!-- /container -->
<!-- Le javascript
<!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script> <script src="../assets/js/jquery.js"></script>