adding note in the masthead about less.js and browser support

This commit is contained in:
Mark Otto 2011-06-30 00:31:56 -07:00
parent 9e33ab20ab
commit ced32d5ceb
2 changed files with 28 additions and 18 deletions

View File

@ -27,38 +27,42 @@ section {
}
#masthead div.inner, #footer div.inner {
background: transparent url(../img/grid-18px.png) top center;
padding: 45px 0 54px;
padding: 45px 0;
-webkit-box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.25);
}
#masthead h1,
#footer h1,
#masthead h4,
#footer h4,
#masthead p,
#footer p,
#masthead small,
#footer small {
#footer p {
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
#masthead p a,
#footer p a {
color: #fff;
font-weight: bold;
}
#masthead {
margin-top: 40px;
}
#masthead h1,
#masthead p {
text-align: center;
margin-bottom: 9px;
}
#masthead h1 {
font-size: 54px;
line-height: 1;
text-align: center;
margin-bottom: 9px;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
#masthead p {
font-weight: 300;
}
#masthead p.lead {
font-size: 20px;
font-weight: 300;
line-height: 27px;
text-align: center;
margin: 0;
}
div.quickstart {
@ -79,6 +83,9 @@ div.quickstart {
}
div.quickstart div.row {
margin: 0 -20px;
-webkit-box-shadow: 1px 0 0 #f9f9f9;
-moz-box-shadow: 1px 0 0 #f9f9f9;
box-shadow: 1px 0 0 #f9f9f9;
}
div.quickstart div.columns {
width: 285px;
@ -86,6 +93,9 @@ div.quickstart div.columns {
margin-left: 0;
padding: 17px 20px 26px;
border-left: 1px solid #eee;
-webkit-box-shadow: inset 1px 0 0 #f9f9f9;
-moz-box-shadow: inset 1px 0 0 #f9f9f9;
box-shadow: inset 1px 0 0 #f9f9f9;
}
div.quickstart div.columns:last-child {
border-right: 1px solid #eee;
@ -121,10 +131,6 @@ div.quickstart form textarea {
margin-bottom: 0;
color: rgba(255,255,255,.8)
}
#footer p a {
color: #fff;
font-weight: bold;
}
/* Special grid styles
-------------------------------------------------- */
.show-grid {

View File

@ -25,7 +25,7 @@
<img src="assets/img/twitter-logo-no-bird.png" alt="Twitter" /> <span>bootstrap</span>
</a></h3>
<ul>
<li><a href="#masthead">Overview</a></li>
<li class="active"><a href="#masthead">Overview</a></li>
<li><a href="#grid-system">Grid</a></li>
<li><a href="#layouts">Layouts</a></li>
<li><a href="#typography">Typography</a></li>
@ -47,7 +47,11 @@
<div class="span11 columns">
-->
<h1>Twitter Bootstrap</h1>
<p class="lead">Bootstrap is Twitter's toolkit for kickstarting CSS for websites, apps, and more. It includes base CSS styles for typography, forms, buttons, tables, grids, navigation, alerts, and more.</p>
<p class="lead">
Bootstrap is a toolkit from Twitter designed to kickstart development of websites and apps.<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>
<!--
</div>
<div class="span5 columns">
@ -1101,7 +1105,7 @@
<section id="preboot">
<section id="less">
<div class="page-header">
<h1>Using Bootstrap with LESS <small>Supercharge your CSS with variables, mixins, and functions</small></h1>
</div>