* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Sat Oct 15 17:19:53 PDT 2011
* Date: Sun Oct 16 02:59:54 PDT 2011
*/
*/
/* Reset.less
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
...
@@ -261,7 +261,6 @@ a:hover {
...
@@ -261,7 +261,6 @@ a:hover {
}
}
.row{
.row{
zoom:1;
zoom:1;
margin-left:-20px;
}
}
.row:before,.row:after{
.row:before,.row:after{
display:table;
display:table;
...
@@ -277,125 +276,77 @@ a:hover {
...
@@ -277,125 +276,77 @@ a:hover {
float:left;
float:left;
margin-left:20px;
margin-left:20px;
}
}
.row>[class*="span"]:first-child{
margin-left:0;
}
.span1{
.span1{
width:40px;
width:60px;
}
}
.span2{
.span2{
width:100px;
width:140px;
}
}
.span3{
.span3{
width:160px;
width:220px;
}
}
.span4{
.span4{
width:220px;
width:300px;
}
}
.span5{
.span5{
width:280px;
width:380px;
}
}
.span6{
.span6{
width:340px;
width:460px;
}
}
.span7{
.span7{
width:400px;
width:540px;
}
}
.span8{
.span8{
width:460px;
width:620px;
}
}
.span9{
.span9{
width:520px;
width:700px;
}
}
.span10{
.span10{
width:580px;
width:780px;
}
}
.span11{
.span11{
width:640px;
width:860px;
}
}
.span12{
.span12{
width:700px;
}
.span13{
width:760px;
}
.span14{
width:820px;
}
.span15{
width:880px;
}
.span16{
width:940px;
width:940px;
}
}
.span17{
width:1000px;
}
.span18{
width:1060px;
}
.span19{
width:1120px;
}
.span20{
width:1180px;
}
.span21{
width:1240px;
}
.span22{
width:1300px;
}
.span23{
width:1360px;
}
.span24{
width:1420px;
}
.offset1{
.offset1{
margin-left:80px;
margin-left:100px;
}
}
.offset2{
.offset2{
margin-left:140px;
margin-left:180px;
}
}
.offset3{
.offset3{
margin-left:200px;
margin-left:260px;
}
}
.offset4{
.offset4{
margin-left:260px;
margin-left:340px;
}
}
.offset5{
.offset5{
margin-left:320px;
margin-left:420px;
}
}
.offset6{
.offset6{
margin-left:380px;
margin-left:500px;
}
}
.offset7{
.offset7{
margin-left:440px;
margin-left:580px;
}
}
.offset8{
.offset8{
margin-left:500px;
margin-left:660px;
}
}
.offset9{
.offset9{
margin-left:560px;
margin-left:740px;
}
}
.offset10{
.offset10{
margin-left:620px;
margin-left:820px;
}
}
.offset11{
.offset11{
margin-left:680px;
margin-left:900px;
}
.offset12{
margin-left:740px;
}
.span-one-third{
width:300px;
}
.span-two-thirds{
width:620px;
}
.offset-one-third{
margin-left:340px;
}
.offset-two-thirds{
margin-left:660px;
}
}
/* Typography.less
/* Typography.less
* Headings, body text, lists, code, and more for a versatile and durable typography system
* Headings, body text, lists, code, and more for a versatile and durable typography system
Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.<br>
<divclass="inner">
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br>
<h1>Bootstrap, from Twitter</h1>
</p>
<ahref="#"class="btn btn-large pull-right">Download on GitHub</a>
<p><strong>Nerd alert:</strong> Bootstrap is <ahref="#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>
<pclass="lead">Bootstrap is a frontend toolkit from Twitter designed to kickstart web development, complete with core HTML, CSS, and JS for grids, type, forms, navigation, and many more components.</p>
</div>
<p><strong>Nerd alert:</strong> Bootstrap is <ahref="#less"title="Read about using Bootstrap with Less">built with Less</a> and was designed with modern browsers in mind.</p>
<p>Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.</p>
<sectionid="about">
<p>Read more on <ahref="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p>
<divclass="page-header">
</div>
<h1>About Bootstrap <small>Brief history, browser support, and more</small></h1>
<divclass="span4">
</div>
<h2>Cross-everything</h2>
<divclass="row">
<p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p>
<divclass="span-one-third">
<imgsrc="assets/img/browsers.png"alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox">
<h3>History</h3>
<ul>
<p>Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.</p>
<li>Latest Safari</li>
<p>Read more on <ahref="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p>
<li>Latest Google Chrome</li>
</div>
<li>Firefox 4+</li>
<divclass="span-one-third">
<li>Internet Explorer 7+</li>
<h3>Browser support</h3>
<li>Opera 11</li>
<p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p>
</ul>
<imgsrc="assets/img/browsers.png"alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox">
</div>
<ul>
<divclass="span4">
<li>Latest Safari</li>
<h2>What's included</h2>
<li>Latest Google Chrome</li>
<p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p>
<li>Firefox 4+</li>
<ul>
<li>Internet Explorer 7+</li>
<li><spanclass="label">New in 1.3</span><ahref="./javascript.html">Javascript plugins</a></li>
<li>Opera 11</li>
<li>All original .less files</li>
</ul>
<li>Fully <ahref="../bootstrap.css">compiled</a> and <ahref="../bootstrap.min.css">minified</a> CSS</li>
</div>
<li>Complete styleguide documentation</li>
<divclass="span-one-third">
<li>Three example pages with different layouts</li>
<h3>What's included</h3>
</ul>
<p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p>
</div>
<ul>
</div><!-- /row -->
<li><spanclass="label">New in 1.3</span><ahref="./javascript.html">Javascript plugins</a></li>
<li>All original .less files</li>
<li>Fully <ahref="../bootstrap.css">compiled</a> and <ahref="../bootstrap.min.css">minified</a> CSS</li>
<li>Complete styleguide documentation</li>
<li>Three example pages with different layouts</li>
</ul>
</div>
</div><!-- /row -->
<divclass="row">
<divclass="span12">
<h3>Quick-start examples</h3>
<h3>Quick-start examples</h3>
<p>Need some quick templates? Check out these basic examples we've put together:</p>
<p>Need some quick templates? Check out these basic examples we've put together:</p>
<ulclass="media-grid">
<ulclass="media-grid">
...
@@ -174,10 +163,8 @@
...
@@ -174,10 +163,8 @@
<ahref="../examples/container-app.html"><imgsrc="assets/img/example-diagram-03.png"alt="Simple hanging container for apps"></a>
<ahref="../examples/container-app.html"><imgsrc="assets/img/example-diagram-03.png"alt="Simple hanging container for apps"></a>
</li>
</li>
</ul>
</ul>
</div>
</div><!-- /row -->
</section>
</div><!-- /#overview -->
<!-- Grid system
<!-- Grid system
...
@@ -187,11 +174,11 @@
...
@@ -187,11 +174,11 @@
<h1>Grid system <small>Rock the standard 940px or roll your own</small></h1>
<h1>Grid system <small>Rock the standard 940px or roll your own</small></h1>
</div>
</div>
<divclass="row">
<divclass="row">
<divclass="span4">
<divclass="span3">
<h2>Default grid</h2>
<h2>Default grid</h2>
<p>The default grid system provided as part of Bootstrap is a 940px wide 16-column grid. It’s a flavor of the popular 960 grid system, but without the additional margin/padding on the left and right sides.</p>
<p>The default grid system provided as part of Bootstrap is a 940px wide 16-column grid. It’s a flavor of the popular 960 grid system, but without the additional margin/padding on the left and right sides.</p>
</div>
</div>
<divclass="span12">
<divclass="span9">
<h3>Example grid markup</h3>
<h3>Example grid markup</h3>
<p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 16 foundational columns we defined as part of our grid system. See the examples below for more variations.</p>
<p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 16 foundational columns we defined as part of our grid system. See the examples below for more variations.</p>
@@ -2009,17 +1952,17 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
...
@@ -2009,17 +1952,17 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</section>
</section>
</div><!-- /container -->
<footerclass="footer">
<footerclass="footer">
<divclass="container">
<pclass="pull-right"><ahref="#">Back to top</a></p>
<pclass="pull-right"><ahref="#">Back to top</a></p>
<p>
<p>
Designed and built with all the love in the world <ahref="http://twitter.com/twitter"target="_blank">@twitter</a> by <ahref="http://twitter.com/mdo"target="_blank">@mdo</a> and <ahref="http://twitter.com/fat"target="_blank">@fat</a>.<br>
Designed and built with all the love in the world <ahref="http://twitter.com/twitter"target="_blank">@twitter</a> by <ahref="http://twitter.com/mdo"target="_blank">@mdo</a> and <ahref="http://twitter.com/fat"target="_blank">@fat</a>.<br>
Code licensed under the <ahref="http://www.apache.org/licenses/LICENSE-2.0"target="_blank">Apache License v2.0</a>. Documentation licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
Code licensed under the <ahref="http://www.apache.org/licenses/LICENSE-2.0"target="_blank">Apache License v2.0</a>. Documentation licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
