mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
adding more details on browser support, adding snippet of about text, changed p tags to have half the bottom margin
This commit is contained in:
Mark Otto
parent
4a567fcb10
commit
261a473a72
5 changed files with 112 additions and 104 deletions
5
bootstrap-1.0.0.css
vendored
5
bootstrap-1.0.0.css
vendored
|
|
@ -6,7 +6,7 @@
|
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Date: Fri Aug 19 22:27:16 PDT 2011
|
||||
* Date: Sat Aug 20 01:50:35 PDT 2011
|
||||
*/
|
||||
/* 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).
|
||||
|
|
@ -466,7 +466,7 @@ p {
|
|||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
margin-bottom: 18px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
p small {
|
||||
font-size: 11px;
|
||||
|
|
@ -629,6 +629,7 @@ pre {
|
|||
margin: 0 0 18px;
|
||||
line-height: 18px;
|
||||
font-size: 12px;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
|
|
|
|||
4
bootstrap-1.0.0.min.css
vendored
4
bootstrap-1.0.0.min.css
vendored
|
|
@ -54,7 +54,7 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;}a:hover{color:#0050a3;
|
|||
.btn:disabled,.btn.disabled{background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;cursor:default;}
|
||||
.btn:active{-webkit-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.1),0 1px 2px rgba(0, 0, 0, 0.05);}
|
||||
button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
|
||||
p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:18px;}p small{font-size:11px;color:#bfbfbf;}
|
||||
p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
|
||||
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}
|
||||
h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;}
|
||||
h2{font-size:24px;line-height:36px;}h2 small{font-size:14px;}
|
||||
|
|
@ -81,7 +81,7 @@ blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;c
|
|||
address{display:block;line-height:18px;margin-bottom:18px;}
|
||||
code,pre{padding:0 3px 2px;font-family:Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
|
||||
code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;}
|
||||
pre{background-color:#f5f5f5;display:block;padding:17px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre-wrap;}
|
||||
pre{background-color:#f5f5f5;display:block;padding:17px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre-wrap;}
|
||||
form{margin-bottom:18px;}form fieldset{margin-bottom:18px;padding-top:18px;}form fieldset legend{display:block;margin-left:150px;font-size:20px;line-height:1;color:#404040;}
|
||||
form div.clearfix{margin-bottom:18px;}
|
||||
form label,form input,form select,form textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:normal;}
|
||||
|
|
|
|||
BIN
docs/assets/img/browsers.png
Normal file
BIN
docs/assets/img/browsers.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
204
docs/index.html
204
docs/index.html
|
|
@ -77,25 +77,43 @@
|
|||
<p>Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.</p>
|
||||
<p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<section id="about">
|
||||
<div class="page-header">
|
||||
<h1>About Bootstrap <small>Brief history, browser support, and more</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span6 columns">
|
||||
<h2>History</h2>
|
||||
<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>
|
||||
</div> <!-- /row -->
|
||||
</section>
|
||||
|
||||
<section id="grid-system">
|
||||
<div class="page-header">
|
||||
<h1>Grid system <small>Rock the standard 940px or roll your own</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<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>
|
||||
<div class="page-header">
|
||||
<h1>Grid system <small>Rock the standard 940px or roll your own</small></h1>
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
<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>
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<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>
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
<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>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="row">
|
||||
<div class="span6 columns">
|
||||
|
|
@ -106,94 +124,82 @@
|
|||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row show-grid" title="16 column layout">
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
</div>
|
||||
|
||||
<div class="row show-grid" title="8 column layout">
|
||||
<div class="span2 columns">2</div>
|
||||
<div class="span2 columns">2</div>
|
||||
<div class="span2 columns">2</div>
|
||||
<div class="span2 columns">2</div>
|
||||
<div class="span2 columns">2</div>
|
||||
<div class="span2 columns">2</div>
|
||||
<div class="span2 columns">2</div>
|
||||
<div class="span2 columns">2</div>
|
||||
</div>
|
||||
|
||||
<div class="row show-grid" title="Example uncommon layout">
|
||||
<div class="span3 columns">3</div>
|
||||
<div class="span3 columns">3</div>
|
||||
<div class="span3 columns">3</div>
|
||||
<div class="span3 columns">3</div>
|
||||
<div class="span3 columns">3</div>
|
||||
<div class="span1 column">1</div>
|
||||
</div>
|
||||
|
||||
<div class="row show-grid" title="Four column layout">
|
||||
<div class="span4 columns">4</div>
|
||||
<div class="span4 columns">4</div>
|
||||
<div class="span4 columns">4</div>
|
||||
<div class="span4 columns">4</div>
|
||||
</div>
|
||||
|
||||
<div class="row show-grid" title="Irregular three column layout">
|
||||
<div class="span4 columns">4</div>
|
||||
<div class="span6 columns">6</div>
|
||||
<div class="span6 columns">6</div>
|
||||
</div>
|
||||
|
||||
<div class="row show-grid" title="Half and half">
|
||||
<div class="span8 columns">8</div>
|
||||
<div class="span8 columns">8</div>
|
||||
</div>
|
||||
|
||||
<div class="row show-grid" title="Example uncommon two-column layout">
|
||||
<div class="span5 columns">5</div>
|
||||
<div class="span11 columns">11</div>
|
||||
</div>
|
||||
|
||||
<div class="row show-grid" title="Unnecessary single column layout">
|
||||
<div class="span16 columns">16</div>
|
||||
</div>
|
||||
|
||||
<h4>Offsetting columns</h4>
|
||||
<div class="row show-grid">
|
||||
<div class="span4 columns">4</div>
|
||||
<div class="span8 columns offset4">8 offset 4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="span4 columns offset4">4 offset 4</div>
|
||||
<div class="span4 columns offset4">4 offset 4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="span5 columns offset3">5 offset 3</div>
|
||||
<div class="span5 columns offset3">5 offset 3</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="span10 columns offset6">10 offset 6</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row show-grid" title="16 column layout">
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
<div class="span1 column">1</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row show-grid" title="8 column layout">
|
||||
<div class="span2 columns">2</div>
|
||||
<div class="span2 columns">2</div>
|
||||
<div class="span2 columns">2</div>
|
||||
<div class="span2 columns">2</div>
|
||||
<div class="span2 columns">2</div>
|
||||
<div class="span2 columns">2</div>
|
||||
<div class="span2 columns">2</div>
|
||||
<div class="span2 columns">2</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row show-grid" title="Example uncommon layout">
|
||||
<div class="span3 columns">3</div>
|
||||
<div class="span3 columns">3</div>
|
||||
<div class="span3 columns">3</div>
|
||||
<div class="span3 columns">3</div>
|
||||
<div class="span3 columns">3</div>
|
||||
<div class="span1 column">1</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row show-grid" title="Four column layout">
|
||||
<div class="span4 columns">4</div>
|
||||
<div class="span4 columns">4</div>
|
||||
<div class="span4 columns">4</div>
|
||||
<div class="span4 columns">4</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row show-grid" title="Irregular three column layout">
|
||||
<div class="span4 columns">4</div>
|
||||
<div class="span6 columns">6</div>
|
||||
<div class="span6 columns">6</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row show-grid" title="Half and half">
|
||||
<div class="span8 columns">8</div>
|
||||
<div class="span8 columns">8</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row show-grid" title="Example uncommon two-column layout">
|
||||
<div class="span5 columns">5</div>
|
||||
<div class="span11 columns">11</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row show-grid" title="Unnecessary single column layout">
|
||||
<div class="span16 columns">16</div>
|
||||
</div> <!-- /row -->
|
||||
<h4>Offsetting columns</h4>
|
||||
<div class="row show-grid">
|
||||
<div class="span4 columns">4</div>
|
||||
<div class="span8 columns offset4">8 offset 4</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row show-grid">
|
||||
<div class="span4 columns offset4">4 offset 4</div>
|
||||
<div class="span4 columns offset4">4 offset 4</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row show-grid">
|
||||
<div class="span5 columns offset3">5 offset 3</div>
|
||||
<div class="span5 columns offset3">5 offset 3</div>
|
||||
</div> <!-- /row -->
|
||||
<div class="row show-grid">
|
||||
<div class="span10 columns offset6">10 offset 6</div>
|
||||
</div> <!-- /row -->
|
||||
</section>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
p {
|
||||
#font > .shorthand(normal,@basefont,@baseline);
|
||||
margin-bottom: @baseline;
|
||||
margin-bottom: @baseline / 2;
|
||||
small {
|
||||
font-size: 11px;
|
||||
color: @grayLight;
|
||||
|
|
@ -178,6 +178,7 @@ pre {
|
|||
margin: 0 0 @baseline;
|
||||
line-height: @baseline;
|
||||
font-size: 12px;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0,0,0,.15);
|
||||
.border-radius(3px);
|
||||
white-space: pre-wrap;
|
||||
|
|
|
|||
Loading…
Reference in a new issue