.row .offset11{margin-left:680px !important;}.row .offset11:first-child{margin-left:660px !important;}
.row .offset12{margin-left:740px !important;}.row .offset12:first-child{margin-left:720px !important;}
html,body{background-color:#fff;}
-body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#808080;text-rendering:optimizeLegibility;}
+body{margin:60px 0 0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#808080;text-rendering:optimizeLegibility;}
div.container{width:940px;margin:0 auto;}
-div.container-fluid{padding:20px;zoom:1;}div.container-fluid:before,div.container-fluid:after{display:table;content:"";}
+div.container-fluid{padding:0 20px;zoom:1;}div.container-fluid:before,div.container-fluid:after{display:table;content:"";}
div.container-fluid:after{clear:both;}
div.container-fluid div.sidebar{float:left;width:220px;}
div.container-fluid div.content{min-width:700px;max-width:1180px;margin-left:240px;}
div.topbar ul li ul{background-color:#333;float:left;display:none;position:absolute;top:40px;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:0;text-align:left;border:0;zoom:1;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);}div.topbar ul li ul li{float:none;clear:both;display:block;background:none;font-size:12px;}div.topbar ul li ul li a{display:block;padding:6px 15px;clear:both;font-weight:normal;line-height:19px;color:#bbb;}div.topbar ul li ul li a:hover{background-color:#333;background-color:rgba(255, 255, 255, 0.25);color:#fff;}
div.topbar ul li ul li.divider{height:1px;overflow:hidden;background:rgba(0, 0, 0, 0.2);border-bottom:1px solid rgba(255, 255, 255, 0.1);margin:5px 0;}
div.topbar ul li ul li span{clear:both;display:block;background:rgba(0, 0, 0, 0.2);padding:6px 15px;cursor:default;color:#808080;border-top:1px solid rgba(0, 0, 0, 0.2);}
+.hero-unit{background-color:#f5f5f5;margin-bottom:30px;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;}
+.hero-unit p{font-size:18px;font-weight:200;line-height:27px;}
div.page-header{margin-bottom:17px;border-bottom:1px solid #ddd;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}div.page-header h1{margin-bottom:8px;}
div.alert-message{background-color:rgba(0, 0, 0, 0.15);background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.15)));background-image:-moz-linear-gradient(transparent, rgba(0, 0, 0, 0.15));background-image:-ms-linear-gradient(transparent, rgba(0, 0, 0, 0.15));background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.15)));background-image:-webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.15));background-image:-o-linear-gradient(transparent, rgba(0, 0, 0, 0.15));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='rgba(0, 0, 0, 0.15)', GradientType=0)";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='rgba(0, 0, 0, 0.15)', GradientType=0);background-image:linear-gradient(transparent, rgba(0, 0, 0, 0.15));background-color:#e6e6e6;margin-bottom:18px;padding:8px 15px;color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-bottom:1px solid rgba(0, 0, 0, 0.25);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}div.alert-message p{color:#fff;margin-bottom:0;}div.alert-message p+p{margin-top:5px;}
div.alert-message.error{background-color:#e06359;}
div.pagination ul li a:hover,div.pagination ul li.active a{background-color:#c7eefe;}
div.pagination ul li.disabled a,div.pagination ul li.disabled a:hover{background-color:none;color:#bfbfbf;}
div.pagination ul li.next a,div.pagination ul li:last-child a{border:0;}
-div.well{background:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}
+.well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);}
div.modal-backdrop{background-color:rgba(0, 0, 0, 0.5);position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;}
div.modal{position:fixed;top:50%;left:50%;z-index:2000;width:560px;margin:-280px 0 0 -250px;background-color:#ffffff;border:1px solid rgba(0, 0, 0, 0.3);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding;-moz-background-clip:padding;background-clip:padding;}div.modal .modal-header{border-bottom:1px solid #eee;padding:5px 20px;}div.modal .modal-header a.close{position:absolute;right:10px;top:10px;color:#999;line-height:10px;font-size:18px;}
div.modal .modal-body{padding:20px;}
<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]>
<!-- Le styles -->
<link href="../bootstrap-1.0.0.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
+ <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le javascript -->
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
- <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/application.js"></script>
+
+ <!-- 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 onload="prettyPrint()">
+ <body onload="prettyPrint();">
<div class="topbar">
- <div class="container fixed">
+ <div class="container">
<h3><a href="#">Bootstrap</a></h3>
<ul>
<li class="active"><a href="#masthead">Overview</a></li>
+ <li><a href="#about">About</a></li>
<li><a href="#grid-system">Grid</a></li>
<li><a href="#layouts">Layouts</a></li>
<li><a href="#typography">Typography</a></li>
Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.<br />
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br />
</p>
- <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed to work out of the gate with only modern browsers in mind.</p>
+ <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed to work out of the gate with modern browsers in mind.</p>
</div> <!-- /container -->
</div>
</div>
</div>
<div class="row">
<div class="span6 columns">
- <h2>History</h2>
+ <h3>History</h3>
<p>In the earlier days of Twitter, engineers used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented and development quickly accelerated during Twitter’s first Hackweek.</p>
<p>With the help and feedback of many engineers at Twitter, Bootstrap has grown significantly to encompass not only basic styles, but more elegant and durable front-end design patterns.</p>
<p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p>
</div>
- <div class="span6 columns">
- <h2>Browser support</h2>
- <p>Bootstrap is tested and supported most thoroughly in modern browsers like Chrome, Safari, and Firefox. Full support for versions of Internet Explorer is in the works.</p>
- <img src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, and Firefox">
+ <div class="span5 columns">
+ <h3>Browser support</h3>
+ <p>Bootstrap is tested and supported in modern browsers like Chrome, Safari, and Firefox. Full support for some versions of Internet Explorer is in the works.</p>
+ <img src="assets/img/browsers.png" width="220px" height="48px" alt="Tested and supported in Chrome, Safari, and Firefox">
+ <ul>
+ <li>Latest Safari</li>
+ <li>Latest Google Chrome</li>
+ <li>Firefox v4</li>
+ </ul>
+ </div>
+ <div class="span5 columns">
+ <h3>What's included</h3>
+ <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p>
+ <ul>
+ <li>All original .less files</li>
+ <li>Fully compiled and minified CSS</li>
+ <li>Complete styleguide documentation</li>
+ <li>Example page template (more to come soon)</li>
+ </ul>
</div>
</div> <!-- /row -->
</section>
<p><a href="#">Fusce dapibus</a>, <strong>tellus ac cursus commodo</strong>, <em>tortor mauris condimentum nibh</em>, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.</p>
<p><strong>Note:</strong> It’s still okay to use <code><b></code> and <code><i></code> tags in HTML5, but they don’t come with inherent styles anymore. <code><b></code> is meant to convey importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
<h3>Addresses</h3>
- <p>The <code>address</code> element is used for contact information for its nearest ancestor, or the entire body of work. Here’s how it looks:</p>
+ <p>The <code><address></code> element is used for contact information for its nearest ancestor, or the entire body of work. Here’s how it looks:</p>
<address>
<strong>Twitter, Inc.</strong><br />
795 Folsom Ave, Suite 600<br />
San Francisco, CA 94107<br />
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
- <p><strong>Note:</strong> Each line in an <code>address</code> must end with a line-break (<code><br /></code>) or be wrapped in a block-level tag (e.g., <code>p</code>) to properly structure the content.</p>
+ <p><strong>Note:</strong> Each line in an <code><address></code> must end with a line-break (<code><br /></code>) or be wrapped in a block-level tag (e.g., <code><p></code>) to properly structure the content.</p>
<h3>Abbreviations</h3>
- <p>For abbreviations and acronyms, use the <code>
abbr</code> tag (<code>acronym</code> is deprecated in <abbr title="HyperText Markup Langugage 5">HTML5</abbr>). Put the shorthand form within the tag and set a title for the complete name.</p>
+ <p>For abbreviations and acronyms, use the <code>
<abbr></code> tag (<code><acronym></code> is deprecated in <abbr title="HyperText Markup Langugage 5">HTML5</abbr>). Put the shorthand form within the tag and set a title for the complete name.</p>
</div>
</div>
</p>
</div>
<div class="span12 columns">
- <p>Be sure to wrap your <code>blockquote</code> around <code>paragraph</code> and <code>small</code> tags. When citing a source, use the <code>small</code> element. The CSS will automatically preface a name with an em dash (&mdash;).</p>
+ <p>Be sure to wrap your <code><blockquote></code> around <code><p></code> and <code><small></code> tags. When citing a source, use the <code><small></code> element. The CSS will automatically preface a name with an em dash (&mdash;).</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua…</p>
<small>Dr. Julius Hibbert</small>
<code><caption></code>
</p>
<p>Tables are great—for a lot of things. Great tables, however, need a bit of markup love to be useful, scalable, and readable (at the code level). Here are a few tips to help.</p>
- <p>Always wrap your column headers in a <code>thead</code> such that hierarchy is <code>thead</code> > <code>tr</code> > <code>th</code>.</p>
- <p>Similar to the column headers, all your table’s body content should be wrapped in a <code>tbody</code> so your hierarchy is <code>tbody</code> > <code>tr</code> > <code>td</code>.</p>
+ <p>Always wrap your column headers in a <code><thead></code> such that hierarchy is <code><thead></code> > <code><tr></code> > <code><th></code>.</p>
+ <p>Similar to the column headers, all your table’s body content should be wrapped in a <code><tbody></code> so your hierarchy is <code><tbody></code> > <code><tr></code> > <code><td></code>.</p>
</ul>
</div>
<div class="span12 columns">
</div>
<div class="span12 columns">
<h3>Example buttons</h3>
- <p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code>a</code>, <code>button</code>, and select <code>input</code> elements. Here’s how it looks:</p>
+ <p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code><a></code>, <code><button></code>, and select <code><input></code> elements. Here’s how it looks:</p>
<div class="well" style="padding: 14px 19px;">
<button type="submit" class="btn primary">Submit</button>
<button type="submit" class="btn">Cancel</button>
<a href="#" class="btn small">Action</a>
</div>
<h3>Disabled state</h3>
- <p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code>button</code> elements.</p>
+ <p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code><button></code> elements.</p>
<h4>Links</h4>
<div class="well">
<a href="#" class="btn large primary disabled">Primary action</a>
<div class="row">
<div class="span4 columns">
<h2>Tabs and pills</h2>
- <p>Create simple secondary navigation with a <code>ul</code>. Swap between tabs or pills by adding the appropriate class.</p>
+ <p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p>
<p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
</div>
<div class="span12 columns">
</div>
<div class="span12 columns">
<div class="well" style="background-color: rgba(0,0,0,0.5); border: none; padding: 40px;">
+ <!-- Modal -->
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
<div class="modal-header">
<h3>Modal Heading</h3>
</div>
</div>
</div>
- </div> <!-- /row -->
- <div class="row">
- <div class="span4 columns">
- <h2>Tool Tips</h2>
- <p>Twipsies are super useful for aiding a confused user and pointing them in the right direction.</p>
- </div>
- <div class="span12 columns">
- <div class="twipsies well">
- <div style="position: relative">
- <p class="muted" style="margin-bottom: 0">
+ </div>
+ </div> <!-- /row -->
+
+ <div class="row">
+ <div class="span4 columns">
+ <h2>Tool Tips</h2>
+ <p>Twipsies are super useful for aiding a confused user and pointing them in the right direction.</p>
+ </div>
+ <div class="span12 columns">
+ <div class="twipsies well">
+ <div style="position: relative">
+ <p class="muted" style="margin-bottom: 0">
Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <a href="#" title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="above">rem</a> quae aut veritatis quasi quae.
- </p>
- <div class="twipsy below">
- <div class="twipsy-arrow"></div>
- <div class="twipsy-inner">below!</div>
- </div>
- <div class="twipsy right">
- <div class="twipsy-arrow"></div>
- <div class="twipsy-inner">right!</div>
- </div>
- <div class="twipsy left">
- <div class="twipsy-arrow"></div>
- <div class="twipsy-inner">left!</div>
- </div>
- <div class="twipsy above">
- <div class="twipsy-arrow"></div>
- <div class="twipsy-inner">above!</div>
- </div>
+ </p>
+ <div class="twipsy below">
+ <div class="twipsy-arrow"></div>
+ <div class="twipsy-inner">below!</div>
+ </div>
+ <div class="twipsy right">
+ <div class="twipsy-arrow"></div>
+ <div class="twipsy-inner">right!</div>
+ </div>
+ <div class="twipsy left">
+ <div class="twipsy-arrow"></div>
+ <div class="twipsy-inner">left!</div>
+ </div>
+ <div class="twipsy above">
+ <div class="twipsy-arrow"></div>
+ <div class="twipsy-inner">above!</div>
</div>
</div>
</div>
</div>
</div>
</div>
- <img class="large-bird" src="assets/img/bird.png">
+ <img class="large-bird" src="assets/img/bird.png" width="220px" height="48px">
</div>
</div>
</div>
projects / thirdparty / bootstrap.git / commitdiff
