Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
container-app.html 3.60 KiB
1 
<!DOCTYPE html>
2 
<html lang="en">
3 
  <head>
4 
    <meta charset="utf-8">
5 
    <title>Bootstrap, from Twitter</title>
6 
    <meta name="description" content="">
7 
    <meta name="author" content="">
8
9 
    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
10 
    <!--[if lt IE 9]>
11 
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
12 
    <![endif]-->
13
14 
    <!-- Le styles -->
15 
    <link href="../bootstrap-1.3.0.css" rel="stylesheet">
16 
    <style type="text/css">
17 
      /* Override some defaults */
18 
      html, body {
19 
        background-color: #eee;
20 
      }
21 
      body {
22 
        padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
23 
      }
24 
      .container > footer p {
25 
        text-align: center; /* center align it with the container */
26 
      }
27 
      .container {
28 
        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. */
29 
      }
30
31 
      /* The white background content wrapper */
32 
      .content {
33 
        background-color: #fff;
34 
        padding: 20px;
35 
        margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
36 
        -webkit-border-radius: 0 0 6px 6px;
37 
           -moz-border-radius: 0 0 6px 6px;
38 
                border-radius: 0 0 6px 6px;
39 
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
40 
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
41 
                box-shadow: 0 1px 2px rgba(0,0,0,.15);
42 
      }
43
44 
      /* Page header tweaks */
45 
      .page-header {
46 
        background-color: #f5f5f5;
47 
        padding: 20px 20px 10px;
48 
        margin: -20px -20px 20px;
49 
      }
50
51 
      /* Styles you shouldn't keep as they are for displaying this base example only */
52 
      .content .span10,
53 
      .content .span4 {
54 
        min-height: 500px;
55 
      }
56 
      /* Give a quick and non-cross-browser friendly divider */
57 
      .content .span4 {
58 
        margin-left: 0;
59 
        padding-left: 19px;
60 
        border-left: 1px solid #eee;
61 
      }
62
63 
      .topbar .btn {
64 
        border: 0;
65 
      }
66
67 
    </style>
68
69 
    <!-- Le fav and touch icons -->
70 
    <link rel="shortcut icon" href="images/favicon.ico">
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
<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> <form action="" class="pull-right"> <input class="input-small" type="text" placeholder="Username"> <input class="input-small" type="password" placeholder="Password"> <button class="btn" type="submit">Sign in</button> </form> </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>&copy; Company 2011</p> </footer> </div> <!-- /container --> </body> </html>