1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-17 19:06:40 +02:00

remove qualifying tags in .span selectors for built in grid so that we can use .span-n classes in form styles

This commit is contained in:
Mark Otto
2011-09-11 18:44:25 -07:00
parent f3f60b21a6
commit 53812bc2d8
5 changed files with 266 additions and 134 deletions

View File

@@ -1186,11 +1186,34 @@
</div>
</div><!-- /row -->
<div class="row">
<div class="span4">
<h2>Form field sizes</h2>
<p>Customize any form <code>input</code>, <code>select</code>, or <code>textarea</code> width by adding just a few classes to your markup.</p>
<p>As of v1.3.0, we have added the grid-based sizing classes for form elements. <strong>Please use the these over the existing <code>.mini</code>, <code>.small</code>, etc classes.</strong></p>
</div>
<div class="span12">
<form action="">
<div class="clearfix"><input class="span2" id="" name="" type="text" placeholder=".span2" /></div>
<div class="clearfix"><input class="span3" id="" name="" type="text" placeholder=".span3" /></div>
<div class="clearfix"><input class="span4" id="" name="" type="text" placeholder=".span4" /></div>
<div class="clearfix"><input class="span5" id="" name="" type="text" placeholder=".span5" /></div>
<div class="clearfix"><input class="span6" id="" name="" type="text" placeholder=".span6" /></div>
<div class="clearfix"><input class="span7" id="" name="" type="text" placeholder=".span7" /></div>
<div class="clearfix"><input class="span8" id="" name="" type="text" placeholder=".span8" /></div>
<div class="clearfix"><input class="span9" id="" name="" type="text" placeholder=".span9" /></div>
<div class="clearfix"><input class="span10" id="" name="" type="text" placeholder=".span10" /></div>
<div class="clearfix"><input class="span11" id="" name="" type="text" placeholder=".span11" /></div>
<div class="clearfix"><input class="span12" id="" name="" type="text" placeholder=".span12" /></div>
</form>
</div>
</div>
<div class="row">
<div class="span4">
<h2>Buttons</h2>
<p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
<p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class. Plus, rolling your own styles is easy peasy.</p>
<p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p>
</div>
<div class="span12">
<h3>Example buttons</h3>