mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
Updated documentation; added stacked forms; cleaned up spacing; moved all ids to the section element instead of the page header to fix spacing with bookmarked links;
This commit is contained in:
Mark Otto
parent
b9d6acf766
commit
b95e99a173
178
index.html
178
index.html
@ -55,6 +55,9 @@
|
||||
</a></h3>
|
||||
<ul>
|
||||
<li class="active"><a href="#">Getting Started</a></li>
|
||||
<li><a href="#bootstrap">Bootstrap</a></li>
|
||||
<li><a href="#grid-system">Grid</a></li>
|
||||
<li><a href="#layouts">Layouts</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#tables">Tables</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
@ -64,13 +67,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="masthead">
|
||||
<div id="masthead">
|
||||
<div class="inner">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span11 columns">
|
||||
<h1>Twitter Baseline</h1>
|
||||
<p>Baseline 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">Baseline 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>
|
||||
</div>
|
||||
<div class="span5 columns">
|
||||
<a href="" class="btn large primary">Download Zip »</a>
|
||||
@ -82,7 +85,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
@ -90,7 +93,7 @@
|
||||
|
||||
<section>
|
||||
<div class="page-header">
|
||||
<h1>Getting Started</h1>
|
||||
<h1>Getting started</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
@ -99,30 +102,30 @@
|
||||
<div class="span12 columns">
|
||||
<h3>1. Compiled CSS</h3>
|
||||
<p>Use this option if you want all the styles of Baseline, but none of the extra power of LESS.</p>
|
||||
<pre class="html"><link type="text/css" href="css/Baseline.css" media="all" /></pre>
|
||||
<pre class="html"><link type="text/css" href="css/baseline.css" media="all" /></pre>
|
||||
<h3>2. Run with LESS.js</h3>
|
||||
<p>Use this option to make full use of Baseline's LESS variables, mixins, and nesting in CSS.</p>
|
||||
<pre class="html">
|
||||
<link rel="stylesheet/less" type="text/css" href="less/Baseline.less" media="all" />
|
||||
<link rel="stylesheet/less" type="text/css" href="less/baseline.less" media="all" />
|
||||
<script type="text/javascript" src="js/less-1.0.41.min.js"></script></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section>
|
||||
<section id="bootstrap">
|
||||
<div class="page-header">
|
||||
<h1>Fully Bootstrapped <small>Supercharged CSS with variables, mixins, and functions</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<p><a href="http://markdotto.com/bootstrap/">Bootstrap</a> is a super awesome pack of mixins and variables to be used in conjunction with LESS, a CSS preprocessor for faster and easier web development.</p>
|
||||
<p><a href="http://markdotto.com/bootstrap/">Bootstrap</a> is a super awesome pack of mixins and variables to be used in conjunction with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor for faster and easier web development, that we used to build Baseline.</p>
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
<h2>What's included</h2>
|
||||
<p>Here's a rundown of what's included in Twitter Baseline as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.</p>
|
||||
<p>Here are some of the highlights of what's included in Twitter Baseline as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.</p>
|
||||
<h3>Color variables</h3>
|
||||
<p>Variables in LESS are perfect for maintaining and updating your CSS. When you want to change a color value, update it in one spot and you're set.</p>
|
||||
<p>Variables in LESS are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you're set.</p>
|
||||
<pre class="css">
|
||||
// Links
|
||||
@link-color: #0069d6;
|
||||
@ -145,15 +148,20 @@
|
||||
@orange: #f89406;
|
||||
@pink: #c3325f;
|
||||
@purple: #7a43b6;
|
||||
|
||||
// Baseline
|
||||
@baseline: 20px;
|
||||
</pre>
|
||||
|
||||
<h3>Two Comment Styles</h3>
|
||||
<h3>Commenting</h3>
|
||||
<p>LESS also provides another style of commenting in addition to CSS's normal <code>/* ... */</code> syntax.</p>
|
||||
<pre class="css">
|
||||
// This is a comment
|
||||
/* No, this is a comment */
|
||||
/* This is also a comment */
|
||||
</pre>
|
||||
|
||||
<h3>Mixins up the wazoo</h3>
|
||||
<p>Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They're great for vendor prefixed properties like <code>box-shadow</code>, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap in Baseline.</p>
|
||||
<pre class="css">
|
||||
// Font Stacks
|
||||
.font(@weight: normal, @size: 14px, @lineheight: 20px) {
|
||||
@ -202,8 +210,10 @@
|
||||
}
|
||||
</pre>
|
||||
|
||||
<h3>Operations and grid system</h4>
|
||||
<h3>Operations and grid system</h3>
|
||||
<p>Get fancy and perform some match to generate flexible and powerful mixins like the one below.</p>
|
||||
<pre class="css">
|
||||
// Roll your own grid system
|
||||
@grid_columns: 16;
|
||||
@grid_column_width: 40px;
|
||||
@grid_gutter_width: 20px;
|
||||
@ -224,26 +234,26 @@
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<section id="grid-system">
|
||||
<div class="page-header">
|
||||
<h1>Customizable Grid System <small>Rock the standard 940px or roll your own</small></h1>
|
||||
<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>
|
||||
<h2>Default grid</h2>
|
||||
<p>The default grid system provided as part of Baseline 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>
|
||||
<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="html">
|
||||
<div class="row">
|
||||
<div class="span6 columns">
|
||||
...
|
||||
</div>
|
||||
<div class="span10 columns">
|
||||
...
|
||||
</div>
|
||||
<div class="span6 columns">
|
||||
...
|
||||
</div>
|
||||
<div class="span10 columns">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
@ -322,8 +332,24 @@
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<div class="page-header" id="typography">
|
||||
<section id="layouts">
|
||||
<div class="page-header">
|
||||
<h1>Layouts <small>Basic templates to create webpages</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section id="typography">
|
||||
<div class="page-header">
|
||||
<h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
|
||||
</div>
|
||||
|
||||
@ -440,7 +466,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span4 columns">
|
||||
<h4>Ordered lists <code><ol></code></h4>
|
||||
<h4>Ordered <code><ol></code></h4>
|
||||
<ol>
|
||||
<li>Jeremy Bixby</li>
|
||||
<li>Robert Dezure</li>
|
||||
@ -461,7 +487,7 @@
|
||||
</ol>
|
||||
</div>
|
||||
<div class="span4 columns">
|
||||
<h4>Description lists <code>dl</code></h4>
|
||||
<h4>Description <code>dl</code></h4>
|
||||
<dl>
|
||||
<dt>Description lists</dt>
|
||||
<dd>A description list is perfect for defining terms.</dd>
|
||||
@ -477,8 +503,8 @@
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<div class="page-header" id="tables">
|
||||
<section id="tables">
|
||||
<div class="page-header">
|
||||
<h1>Tables <small>For, you guessed it, tabular data</small></h1>
|
||||
</div>
|
||||
|
||||
@ -629,7 +655,7 @@
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<section id="forms">
|
||||
<! -- JS for the prepend and append boxes -->
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
@ -642,13 +668,14 @@
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<div class="page-header" id="forms">
|
||||
<h1>Forms and buttons</h1>
|
||||
<div class="page-header">
|
||||
<h1>Forms</h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<p>All forms are given default styles to present them in a readable and scalable way.</p>
|
||||
<h2>Default styles</h2>
|
||||
<p>All forms are given default styles to present them in a readable and scalable way. Styles are provided for text inputs, select lists, textareas, radio buttons and checkboxes, and buttons.</p>
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
<form>
|
||||
@ -825,6 +852,69 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<h2>Stacked forms</h2>
|
||||
<p>Add <code>.form-stacked</code> to your form's HTML and you'll have labels on top of their fields instead of to their left. This works great if your forms are short or you have two columns of inputs for heavier forms.</p>
|
||||
</div>
|
||||
<div class="span12 columns">
|
||||
<form action="" class="form-stacked">
|
||||
<fieldset>
|
||||
<legend>Example form legend</legend>
|
||||
<div class="clearfix">
|
||||
<label for="">X-Large Input</label>
|
||||
<div class="input">
|
||||
<input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" />
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
<div class="clearfix">
|
||||
<label for="">Select</label>
|
||||
<div class="input">
|
||||
<select>
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Example form legend</legend>
|
||||
<div class="clearfix">
|
||||
<label id="optionsCheckboxes">List of Options</label>
|
||||
<div class="input">
|
||||
<ul class="inputs-list">
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox" name="optionsCheckboxes" value="option1" />
|
||||
<span>Option one is this and that—be sure to include why it's great</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox" name="optionsCheckboxes" value="option2" />
|
||||
<span>Option two can also be checked and included in form results</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<span class="help-block">
|
||||
<strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
|
||||
</span>
|
||||
</div>
|
||||
</div> <!-- /clearfix -->
|
||||
</fieldset>
|
||||
<div class="actions">
|
||||
<button type="submit" class="btn primary">Save Changes</button>
|
||||
<button type="reset" class="btn">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4 columns">
|
||||
<h2>Buttons</h2>
|
||||
@ -854,8 +944,8 @@
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<div class="page-header" id="navigation">
|
||||
<section id="navigation">
|
||||
<div class="page-header">
|
||||
<h1>Navigation</h1>
|
||||
</div>
|
||||
|
||||
@ -968,8 +1058,8 @@
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<div class="page-header" id="alerts">
|
||||
<section id="alerts">
|
||||
<div class="page-header">
|
||||
<h1>Alerts & Errors <small>Styles for success, warning, and error messages or alerts</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
@ -1028,9 +1118,15 @@
|
||||
|
||||
|
||||
|
||||
<footer>
|
||||
<p></p>
|
||||
</footer>
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
<div id="footer">
|
||||
<div class="inner">
|
||||
<div class="container">
|
||||
<p>Copyright and all that stuff.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
@ -13,22 +13,27 @@ article,
|
||||
aside {
|
||||
display: block;
|
||||
}
|
||||
#masthead {
|
||||
margin-top: @baseline * -1;
|
||||
|
||||
#masthead,
|
||||
#footer {
|
||||
#gradient > .vertical(darken(@blue-dark, 5%), darken(@blue, 7.5%));
|
||||
div.inner {
|
||||
background: transparent url(../img/grid-20px.png) 0 -1px;
|
||||
padding: 40px 0;
|
||||
.box-shadow(inset 0 10px 30px rgba(0,0,0,.25));
|
||||
}
|
||||
h1, p, small {
|
||||
color: #fff;
|
||||
text-shadow: 0 2px 0 rgba(0,0,0,.25);
|
||||
}
|
||||
}
|
||||
#masthead {
|
||||
margin-top: @baseline * 2;
|
||||
margin-bottom: @baseline * -2;
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h1, p {
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,.25);
|
||||
}
|
||||
p {
|
||||
p.lead {
|
||||
.font(300,20px,30px);
|
||||
margin: 5px 0;
|
||||
}
|
||||
@ -42,6 +47,7 @@ aside {
|
||||
border: 0;
|
||||
@shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.4);
|
||||
.box-shadow(@shadow);
|
||||
.transition(all .2s linear);
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
@ -55,9 +61,9 @@ aside {
|
||||
}
|
||||
}
|
||||
|
||||
// Body
|
||||
#body {
|
||||
padding: 0 0 40px;
|
||||
// Page footer
|
||||
#footer {
|
||||
margin-top: @baseline * 4;
|
||||
}
|
||||
|
||||
// Show the grids
|
||||
@ -82,7 +88,8 @@ aside {
|
||||
|
||||
// Break up sections
|
||||
section {
|
||||
margin-bottom: 40px;
|
||||
padding-top: @baseline * 4;
|
||||
margin-bottom: @baseline * -2;
|
||||
}
|
||||
|
||||
// Hashgrid.js grid
|
||||
|
||||
@ -4,11 +4,11 @@
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* Global form styles
|
||||
-------------------------------------------------- */
|
||||
|
||||
form {
|
||||
margin-bottom: @baseline;
|
||||
// Groups of fields with labels on top (legends)
|
||||
fieldset {
|
||||
margin-bottom: @baseline;
|
||||
@ -64,11 +64,13 @@ form {
|
||||
border: 1px solid #bbb;
|
||||
.border-radius(3px);
|
||||
}
|
||||
select,
|
||||
input[type=file] {
|
||||
select {
|
||||
height: @baseline * 1.5;
|
||||
line-height: @baseline * 1.5;
|
||||
}
|
||||
input[type=file] {
|
||||
line-height: @baseline * 1.5;
|
||||
}
|
||||
textarea {
|
||||
height: auto;
|
||||
}
|
||||
@ -300,42 +302,13 @@ ul.inputs-list {
|
||||
}
|
||||
}
|
||||
|
||||
/* Disabled states for form elements, containing elements, and help text */
|
||||
div.disabled span {
|
||||
color: #aaa;
|
||||
}
|
||||
div.disabled input[type=text],
|
||||
div.disabled input[type=passsword],
|
||||
div.disabled textarea {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
ul.options label.disabled,
|
||||
ul.options label.disabled span,
|
||||
ul.options label.disabled small,
|
||||
ul.options label.disabled strong {
|
||||
color: #aaa !important;
|
||||
}
|
||||
|
||||
|
||||
// Stacked forms
|
||||
form.stacked-form {
|
||||
h4, p {
|
||||
margin: 0 0 2px;
|
||||
color: rgba(0,0,0,.5);
|
||||
}
|
||||
form.form-stacked {
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 19px 0 0;
|
||||
border-top-color: rgba(0,0,0,.1);
|
||||
}
|
||||
div.actions {
|
||||
margin-left: 0;
|
||||
padding: 19px 0 30px 180px;
|
||||
border-top: 1px solid rgba(0,0,0,.1);
|
||||
}
|
||||
padding-top: @baseline / 2;
|
||||
}
|
||||
legend {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
@ -346,16 +319,14 @@ form.stacked-form {
|
||||
line-height: 20px;
|
||||
padding-top: 1px;
|
||||
}
|
||||
div.input {
|
||||
margin: 0;
|
||||
}
|
||||
div.clearfix {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: @baseline / 2;
|
||||
div.input {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
div.six.columns input, div.six.columns textarea, div.six.columns select {
|
||||
width: 320px;
|
||||
}
|
||||
div.three.columns input, div.three.columns textarea, div.three.columns select {
|
||||
width: 150px;
|
||||
ul.inputs-list li label {
|
||||
font-weight: normal;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,10 +7,6 @@
|
||||
/* Top bar
|
||||
-------------------------------------------------- */
|
||||
|
||||
body {
|
||||
padding-top: 60px;
|
||||
background-position: 0 40px;
|
||||
}
|
||||
div.topbar {
|
||||
#gradient > .vertical(#333, #222);
|
||||
position: fixed;
|
||||
@ -33,6 +29,7 @@ div.topbar {
|
||||
float: left;
|
||||
padding: 0 10px;
|
||||
line-height: 40px;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
}
|
||||
// Logo
|
||||
a#logo {
|
||||
@ -41,7 +38,6 @@ div.topbar {
|
||||
color: @gray-light;
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
img {
|
||||
float: left;
|
||||
margin-top: 9px;
|
||||
@ -56,9 +52,6 @@ div.topbar {
|
||||
margin: 0;
|
||||
li {
|
||||
display: inline;
|
||||
a {
|
||||
|
||||
}
|
||||
&.active a {
|
||||
color: #fff;
|
||||
background-color: rgba(0,0,0,.5);
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
TODOS
|
||||
|
||||
* Cross browser checks? Show this anywhere?
|
||||
* Add layouts section back in
|
||||
* Cross browser checks? Show this anywhere?
|
||||
Loading…
Reference in New Issue
Block a user