* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Tue Jan 24 12:53:25 PST 2012
+ * Date: Tue Jan 24 13:58:10 PST 2012
*/
article,
aside,
/* Benefits list in masthead */
.benefits {
- width: 250px;
+ width: 280px;
position: absolute;
right: 0;
bottom: 0;
color: #555;
}
.benefits span {
- position: relative;
- top: -2px;
padding-right: 5px;
color: #999;
}
}
.marketing h1 {
margin: 36px 0 27px;
- font-size: 36px;
+ font-size: 40px;
font-weight: 300;
text-align: center;
}
/* Quickstart section for getting le code
-------------------------------------------------- */
-.getting-started {
- background-color: #f5f5f5;
- background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f5f5f5));
- background-image: -moz-linear-gradient(#f9f9f9, #f5f5f5);
- background-image: -ms-linear-gradient(#f9f9f9, #f5f5f5);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f5f5f5));
- background-image: -webkit-linear-gradient(#f9f9f9, #f5f5f5);
- background-image: -o-linear-gradient(#f9f9f9, #f5f5f5);
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0)";
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0);
- background-image: linear-gradient(#f9f9f9, #f5f5f5);
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
-}
-.getting-started {
- border-color: #eee;
-}
-.getting-started td {
- width: 33%;
- border-right: 1px solid #eee;
-}
-.getting-started td + td {
- border-left: 1px solid #fff;
-}
-.getting-started td:last-child {
- border-right: 0;
-}
-.quick-start {
- padding: 17px 20px;
-}
-.quick-start h3,
-.quick-start p {
+.getting-started h3,
+.getting-started p {
line-height: 18px;
text-align: center;
margin-bottom: 9px;
}
-.quick-start p {
+.getting-started p {
color: #777;
}
-.quick-start .current-version,
-.quick-start .current-version a {
+.getting-started .current-version,
+.getting-started .current-version a {
color: #999;
}
-.quick-start form {
+.getting-started form {
margin-bottom: 0;
}
-.quick-start textarea {
+.getting-started textarea {
display: block;
- width: 100%;
+ width: 95%;
height: auto;
- margin-bottom: 0;
+ margin-left: auto;
+ margin-right: auto;
line-height: 21px;
white-space: nowrap;
overflow: hidden;
margin-bottom: 5px;
}
+ /* Space out the getting started sections */
+ .getting-started .span4 {
+ margin-bottom: 18px;
+ }
+
/* Unfloat the back to top link in footer */
.footer .pull-right {
float: none;
<tr>
<td><code><pre class="prettyprint"></code></td>
<td>
- <p>Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
+ <p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
<pre class="prettyprint"><div>
<h1>Heading</h1>
<p>Something right here...</p>
<div class="span4">
<div class="form-docs">
<h3>Redesigned browser states</h3>
- <p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
+ <p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.</p>
<hr>
<h3>Form validation</h3>
<p>It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.</p>
<div class="row">
<div class="span4">
<h3>Rewritten base class</h3>
- <p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup—no <code><p></code> is required by default, just the outer <code><div></code>.</p>
+ <p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup—no <code><p></code> is required by default, just the outter <code><div></code>.</p>
<h3>Single alert message</h3>
<p>For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to <code>.alert-block</code>.</p>
<hr>
<div class="benefits">
<h4>Feature highlights</h4>
<ul>
- <li><span>×</span> Built on LESS</li>
- <li><span>×</span> Complete styleguide docs</li>
- <li><span>×</span> Fully responsive design</li>
- <li><span>×</span> Small footprint (7kb gzipped)</li>
- <li><span>×</span> Support for IE7 and up</li>
- <li><span>×</span> Custom jQuery plugins</li>
- <li><span>×</span> Dozens of components</li>
+ <li><span>✔</span> Built on LESS</li>
+ <li><span>✔</span> Complete style guide docs</li>
+ <li><span>✔</span> Fully responsive design</li>
+ <li><span>✔</span> Small CSS footprint (10kb gzipped)</li>
+ <li><span>✔</span> Support for IE7 and up</li>
+ <li><span>✔</span> Custom jQuery plugins</li>
+ <li><span>✔</span> Dozens of components</li>
</ul>
</div>
</div>
================================================== -->
<h1>Get started in no time.</h1>
<p class="marketing-byline">Quickly start using Bootstrap within your workflow and development process.</p>
- <table class="table table-bordered getting-started">
- <tbody>
- <tr>
- <td class="quick-start">
- <h3>Hotlink the CSS</h3>
-
<p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
- <form>
- <textarea class="copy-code" rows="1"><link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea>
- </form>
- </td>
- <td class="quick-start">
- <h3>Use it with LESS</h3>
- <p>A fan of using LESS? No problem, just clone the repo and add these lines:</p>
- <form>
- <textarea class="copy-code" rows="2"><link rel="stylesheet/less" href="/path/to/bootstrap.less">
- <script src="/path/to/less.js"></script></textarea>
- </form>
- </td>
- <td class="quick-start">
- <h3>Fork on GitHub</h3>
-
<p>Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.</p>
-
<p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub »</a></p>
-
<p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v2.0.0</a></p>
- </td>
- </tr>
- </tbody>
- </table>
+
+ <div class="getting-started">
+ <div class="row">
+ <div class="span4">
+ <h3>Hotlink the CSS</h3>
+ <p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
+ <form>
+ <textarea class="copy-code" rows="1"><link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea>
+ </form>
+ </div>
+ <div class="span4">
+ <h3>Use it with LESS.js</h3>
+ <p>A fan of using LESS? No problem, just download the repo and add these lines to your page:</p>
+ <form>
+ <textarea class="copy-code" rows="2"><link rel="stylesheet/less" href="/path/to/bootstrap.less">
+ <script src="/path/to/less.js"></script></textarea>
+ </form>
+ </div>
+ <div class="span4">
+ <h3>Fork on GitHub</h3>
+ <p>Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.</p>
+ <p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub »</a></p>
+ <p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v2.0.0</a></p>
+ </div>
+ </div><!-- /row -->
+ </div><!-- /getting-started -->
+
</div><!-- /.marketing -->
</div><!-- /#overview -->
<!-- Footer
<p><span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code></p>
<h3>Markup</h3>
<p>
- For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.
+ For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option.
</p>
<h3>Methods</h3>
<h4>$().popover(options)</h4>
<div class="row">
<div class="span4">
<h3>Why LESS?</h3>
- <p>Bootstrap is made with LESS at its core, a dynamic stylesheet language created by <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
+ <p>Bootstrap is made with LESS at it
's core, a dynamic stylesheet language created by <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
</div>
<div class="span4">
<h3>What's included?</h3>
<div class="benefits">
<h4>Feature highlights</h4>
<ul>
- <li><span>×</span> Built on LESS</li>
- <li><span>×</span> Complete styleguide docs</li>
- <li><span>×</span> Fully responsive design</li>
- <li><span>×</span> Small footprint (7kb gzipped)</li>
- <li><span>×</span> Support for IE7 and up</li>
- <li><span>×</span> Custom jQuery plugins</li>
- <li><span>×</span> Dozens of components</li>
+ <li><span>✔</span> Built on LESS</li>
+ <li><span>✔</span> Complete style guide docs</li>
+ <li><span>✔</span> Fully responsive design</li>
+ <li><span>✔</span> Small CSS footprint (10kb gzipped)</li>
+ <li><span>✔</span> Support for IE7 and up</li>
+ <li><span>✔</span> Custom jQuery plugins</li>
+ <li><span>✔</span> Dozens of components</li>
</ul>
</div>
</div>
================================================== -->
<h1>Get started in no time.</h1>
<p class="marketing-byline">Quickly start using Bootstrap within your workflow and development process.</p>
- <table class="table table-bordered getting-started">
- <tbody>
- <tr>
- <td class="quick-start">
- <h3>Hotlink the CSS</h3>
-
<p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
- <form>
- <textarea class="copy-code" rows="1"><link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea>
- </form>
- </td>
- <td class="quick-start">
- <h3>Use it with LESS</h3>
- <p>A fan of using LESS? No problem, just clone the repo and add these lines:</p>
- <form>
- <textarea class="copy-code" rows="2"><link rel="stylesheet/less" href="/path/to/bootstrap.less">
- <script src="/path/to/less.js"></script></textarea>
- </form>
- </td>
- <td class="quick-start">
- <h3>Fork on GitHub</h3>
-
<p>Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.</p>
-
<p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub »</a></p>
-
<p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v2.0.0</a></p>
- </td>
- </tr>
- </tbody>
- </table>
+
+ <div class="getting-started">
+ <div class="row">
+ <div class="span4">
+ <h3>Hotlink the CSS</h3>
+ <p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
+ <form>
+ <textarea class="copy-code" rows="1"><link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea>
+ </form>
+ </div>
+ <div class="span4">
+ <h3>Use it with LESS.js</h3>
+ <p>A fan of using LESS? No problem, just download the repo and add these lines to your page:</p>
+ <form>
+ <textarea class="copy-code" rows="2"><link rel="stylesheet/less" href="/path/to/bootstrap.less">
+ <script src="/path/to/less.js"></script></textarea>
+ </form>
+ </div>
+ <div class="span4">
+ <h3>Fork on GitHub</h3>
+ <p>Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.</p>
+ <p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub »</a></p>
+ <p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v2.0.0</a></p>
+ </div>
+ </div><!-- /row -->
+ </div><!-- /getting-started -->
+
</div><!-- /.marketing -->
</div><!-- /#overview -->
\ No newline at end of file
projects / thirdparty / bootstrap.git / commitdiff
