mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-12 00:24:03 +02:00
Code Issues Releases Wiki Activity

docs updates to make the getting started section more responsive, updated the benefits to be clearer and swap x for checkmark

Browse Source
This commit is contained in:
Mark Otto
2012-01-24 14:25:30 -08:00
parent 3f54db9c6a
commit fecd4ddd13
8 changed files with 91 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
bootstrap.css vendored
View File

@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* 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: Tue Jan 24 12:53:25 PST 2012 * Date: Tue Jan 24 13:58:10 PST 2012
*/ */
article, article,
aside, aside,

62
docs/assets/css/docs.css
View File

@@ -83,7 +83,7 @@ section {
/* Benefits list in masthead */ /* Benefits list in masthead */
.benefits { .benefits {
width: 250px; width: 280px;
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
@@ -105,8 +105,6 @@ section {
color: #555; color: #555;
} }
.benefits span { .benefits span {
position: relative;
top: -2px;
padding-right: 5px; padding-right: 5px;
color: #999; color: #999;
} }
@@ -200,7 +198,7 @@ section {
} }
.marketing h1 { .marketing h1 {
margin: 36px 0 27px; margin: 36px 0 27px;
font-size: 36px; font-size: 40px;
font-weight: 300; font-weight: 300;
text-align: center; text-align: center;
} }
@@ -227,59 +225,28 @@ section {
/* Quickstart section for getting le code /* Quickstart section for getting le code
-------------------------------------------------- */ -------------------------------------------------- */
.getting-started { .getting-started h3,
background-color: #f5f5f5; .getting-started p {
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 {
line-height: 18px; line-height: 18px;
text-align: center; text-align: center;
margin-bottom: 9px; margin-bottom: 9px;
} }
.quick-start p { .getting-started p {
color: #777; color: #777;
} }
.quick-start .current-version, .getting-started .current-version,
.quick-start .current-version a { .getting-started .current-version a {
color: #999; color: #999;
} }
.quick-start form { .getting-started form {
margin-bottom: 0; margin-bottom: 0;
} }
.quick-start textarea { .getting-started textarea {
display: block; display: block;
width: 100%; width: 95%;
height: auto; height: auto;
margin-bottom: 0; margin-left: auto;
margin-right: auto;
line-height: 21px; line-height: 21px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@@ -629,6 +596,11 @@ form.well {
margin-bottom: 5px; margin-bottom: 5px;
} }
/* Space out the getting started sections */
.getting-started .span4 {
margin-bottom: 18px;
}
/* Unfloat the back to top link in footer */ /* Unfloat the back to top link in footer */
.footer .pull-right { .footer .pull-right {
float: none; float: none;

4
docs/base-css.html
View File

@@ -366,7 +366,7 @@
<tr> <tr>
<td><code>&lt;pre class="prettyprint"&gt;</code></td> <td><code>&lt;pre class="prettyprint"&gt;</code></td>
<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">&lt;div&gt; <pre class="prettyprint">&lt;div&gt;
&lt;h1&gt;Heading&lt;/h1&gt; &lt;h1&gt;Heading&lt;/h1&gt;
&lt;p&gt;Something right here...&lt;/p&gt; &lt;p&gt;Something right here...&lt;/p&gt;
@@ -1105,7 +1105,7 @@
<div class="span4"> <div class="span4">
<div class="form-docs"> <div class="form-docs">
<h3>Redesigned browser states</h3> <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> <hr>
<h3>Form validation</h3> <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> <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>

2
docs/components.html
View File

@@ -1088,7 +1088,7 @@
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h3>Rewritten base class</h3> <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&mdash;no <code>&lt;p&gt;</code> is required by default, just the outer <code>&lt;div&gt;</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&mdash;no <code>&lt;p&gt;</code> is required by default, just the outter <code>&lt;div&gt;</code>.</p>
<h3>Single alert message</h3> <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> <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> <hr>

42
docs/index.html
View File

@@ -74,13 +74,13 @@
<div class="benefits"> <div class="benefits">
<h4>Feature highlights</h4> <h4>Feature highlights</h4>
<ul> <ul>
<li><span>&times;</span> Built on LESS</li> <li><span>&#10004;</span> Built on LESS</li>
<li><span>&times;</span> Complete styleguide docs</li> <li><span>&#10004;</span> Complete style guide docs</li>
<li><span>&times;</span> Fully responsive design</li> <li><span>&#10004;</span> Fully responsive design</li>
<li><span>&times;</span> Small footprint (7kb gzipped)</li> <li><span>&#10004;</span> Small CSS footprint (10kb gzipped)</li>
<li><span>&times;</span> Support for IE7 and up</li> <li><span>&#10004;</span> Support for IE7 and up</li>
<li><span>&times;</span> Custom jQuery plugins</li> <li><span>&#10004;</span> Custom jQuery plugins</li>
<li><span>&times;</span> Dozens of components</li> <li><span>&#10004;</span> Dozens of components</li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -217,33 +217,33 @@
================================================== --> ================================================== -->
<h1>Get started in no time.</h1> <h1>Get started in no time.</h1>
<p class="marketing-byline">Quickly start using Bootstrap within your workflow and development process.</p> <p class="marketing-byline">Quickly start using Bootstrap within your workflow and development process.</p>
<table class="table table-bordered getting-started">
<tbody> <div class="getting-started">
<tr> <div class="row">
<td class="quick-start"> <div class="span4">
<h3>Hotlink the CSS</h3> <h3>Hotlink the CSS</h3>
<p>For the quickest and easiest start, just copy this snippet into your webpage.</p> <p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
<form> <form>
<textarea class="copy-code" rows="1">&lt;link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea> <textarea class="copy-code" rows="1">&lt;link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea>
</form> </form>
</td> </div>
<td class="quick-start"> <div class="span4">
<h3>Use it with LESS</h3> <h3>Use it with LESS.js</h3>
<p>A fan of using LESS? No problem, just clone the repo and add these lines:</p> <p>A fan of using LESS? No problem, just download the repo and add these lines to your page:</p>
<form> <form>
<textarea class="copy-code" rows="2">&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt; <textarea class="copy-code" rows="2">&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;</textarea> &lt;script src="/path/to/less.js"&gt;&lt;/script&gt;</textarea>
</form> </form>
</td> </div>
<td class="quick-start"> <div class="span4">
<h3>Fork on GitHub</h3> <h3>Fork on GitHub</h3>
<p>Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.</p> <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 &raquo;</a></p> <p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub &raquo;</a></p>
<p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v2.0.0</a></p> <p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v2.0.0</a></p>
</td> </div>
</tr> </div><!-- /row -->
</tbody> </div><!-- /getting-started -->
</table>
</div><!-- /.marketing --> </div><!-- /.marketing -->
</div><!-- /#overview --> </div><!-- /#overview -->
<!-- Footer <!-- Footer

2
docs/javascript.html
View File

@@ -856,7 +856,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<p><span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code></p> <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> <h3>Markup</h3>
<p> <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> </p>
<h3>Methods</h3> <h3>Methods</h3>
<h4>$().popover(options)</h4> <h4>$().popover(options)</h4>

2
docs/less.html
View File

@@ -75,7 +75,7 @@
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<h3>Why LESS?</h3> <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>
<div class="span4"> <div class="span4">
<h3>What's included?</h3> <h3>What's included?</h3>

42
docs/templates/pages/index.mustache vendored
View File

@@ -14,13 +14,13 @@
<div class="benefits"> <div class="benefits">
<h4>Feature highlights</h4> <h4>Feature highlights</h4>
<ul> <ul>
<li><span>&times;</span> Built on LESS</li> <li><span>&#10004;</span> Built on LESS</li>
<li><span>&times;</span> Complete styleguide docs</li> <li><span>&#10004;</span> Complete style guide docs</li>
<li><span>&times;</span> Fully responsive design</li> <li><span>&#10004;</span> Fully responsive design</li>
<li><span>&times;</span> Small footprint (7kb gzipped)</li> <li><span>&#10004;</span> Small CSS footprint (10kb gzipped)</li>
<li><span>&times;</span> Support for IE7 and up</li> <li><span>&#10004;</span> Support for IE7 and up</li>
<li><span>&times;</span> Custom jQuery plugins</li> <li><span>&#10004;</span> Custom jQuery plugins</li>
<li><span>&times;</span> Dozens of components</li> <li><span>&#10004;</span> Dozens of components</li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -157,32 +157,32 @@
================================================== --> ================================================== -->
<h1>Get started in no time.</h1> <h1>Get started in no time.</h1>
<p class="marketing-byline">Quickly start using Bootstrap within your workflow and development process.</p> <p class="marketing-byline">Quickly start using Bootstrap within your workflow and development process.</p>
<table class="table table-bordered getting-started">
<tbody> <div class="getting-started">
<tr> <div class="row">
<td class="quick-start"> <div class="span4">
<h3>Hotlink the CSS</h3> <h3>Hotlink the CSS</h3>
<p>For the quickest and easiest start, just copy this snippet into your webpage.</p> <p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
<form> <form>
<textarea class="copy-code" rows="1">&lt;link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea> <textarea class="copy-code" rows="1">&lt;link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea>
</form> </form>
</td> </div>
<td class="quick-start"> <div class="span4">
<h3>Use it with LESS</h3> <h3>Use it with LESS.js</h3>
<p>A fan of using LESS? No problem, just clone the repo and add these lines:</p> <p>A fan of using LESS? No problem, just download the repo and add these lines to your page:</p>
<form> <form>
<textarea class="copy-code" rows="2">&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt; <textarea class="copy-code" rows="2">&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;</textarea> &lt;script src="/path/to/less.js"&gt;&lt;/script&gt;</textarea>
</form> </form>
</td> </div>
<td class="quick-start"> <div class="span4">
<h3>Fork on GitHub</h3> <h3>Fork on GitHub</h3>
<p>Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.</p> <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 &raquo;</a></p> <p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub &raquo;</a></p>
<p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v2.0.0</a></p> <p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v2.0.0</a></p>
</td> </div>
</tr> </div><!-- /row -->
</tbody> </div><!-- /getting-started -->
</table>
</div><!-- /.marketing --> </div><!-- /.marketing -->
</div><!-- /#overview --> </div><!-- /#overview -->