rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases 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
Show Stats 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
*
* 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,

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

@ -83,7 +83,7 @@ section {
/* Benefits list in masthead */
.benefits {
width: 250px;
width: 280px;
position: absolute;
right: 0;
bottom: 0;
@ -105,8 +105,6 @@ section {
color: #555;
}
.benefits span {
position: relative;
top: -2px;
padding-right: 5px;
color: #999;
}
@ -200,7 +198,7 @@ section {
}
.marketing h1 {
margin: 36px 0 27px;
font-size: 36px;
font-size: 40px;
font-weight: 300;
text-align: center;
}
@ -227,59 +225,28 @@ section {
/* 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;
@ -629,6 +596,11 @@ form.well {
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;

4
docs/base-css.html
View File

@ -366,7 +366,7 @@
<tr>
<td><code>&lt;pre class="prettyprint"&gt;</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">&lt;div&gt;
&lt;h1&gt;Heading&lt;/h1&gt;
&lt;p&gt;Something right here...&lt;/p&gt;
@ -1105,7 +1105,7 @@
<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>

2
docs/components.html
View File

@ -1088,7 +1088,7 @@
<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&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>
<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>

68
docs/index.html
View File

@ -74,13 +74,13 @@
<div class="benefits">
<h4>Feature highlights</h4>
<ul>
<li><span>&times;</span> Built on LESS</li>
<li><span>&times;</span> Complete styleguide docs</li>
<li><span>&times;</span> Fully responsive design</li>
<li><span>&times;</span> Small footprint (7kb gzipped)</li>
<li><span>&times;</span> Support for IE7 and up</li>
<li><span>&times;</span> Custom jQuery plugins</li>
<li><span>&times;</span> Dozens of components</li>
<li><span>&#10004;</span> Built on LESS</li>
<li><span>&#10004;</span> Complete style guide docs</li>
<li><span>&#10004;</span> Fully responsive design</li>
<li><span>&#10004;</span> Small CSS footprint (10kb gzipped)</li>
<li><span>&#10004;</span> Support for IE7 and up</li>
<li><span>&#10004;</span> Custom jQuery plugins</li>
<li><span>&#10004;</span> Dozens of components</li>
</ul>
</div>
</div>
@ -217,33 +217,33 @@
================================================== -->
<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">&lt;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">&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;</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 &raquo;</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">&lt;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">&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;</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 &raquo;</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

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>
<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>

2
docs/less.html
View File

@ -75,7 +75,7 @@
<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>

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

@ -14,13 +14,13 @@
<div class="benefits">
<h4>Feature highlights</h4>
<ul>
<li><span>&times;</span> Built on LESS</li>
<li><span>&times;</span> Complete styleguide docs</li>
<li><span>&times;</span> Fully responsive design</li>
<li><span>&times;</span> Small footprint (7kb gzipped)</li>
<li><span>&times;</span> Support for IE7 and up</li>
<li><span>&times;</span> Custom jQuery plugins</li>
<li><span>&times;</span> Dozens of components</li>
<li><span>&#10004;</span> Built on LESS</li>
<li><span>&#10004;</span> Complete style guide docs</li>
<li><span>&#10004;</span> Fully responsive design</li>
<li><span>&#10004;</span> Small CSS footprint (10kb gzipped)</li>
<li><span>&#10004;</span> Support for IE7 and up</li>
<li><span>&#10004;</span> Custom jQuery plugins</li>
<li><span>&#10004;</span> Dozens of components</li>
</ul>
</div>
</div>
@ -157,32 +157,32 @@
================================================== -->
<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">&lt;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">&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;</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 &raquo;</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">&lt;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">&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;</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 &raquo;</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 -->