Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/customer/www/demo.styledthemes.com/public_html/celestial-free/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384
Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/customer/www/demo.styledthemes.com/public_html/celestial-free/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700
Warning: Invalid argument supplied for foreach() in /home/customer/www/demo.styledthemes.com/public_html/celestial-free/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707
Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/customer/www/demo.styledthemes.com/public_html/celestial-free/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700
Warning: Invalid argument supplied for foreach() in /home/customer/www/demo.styledthemes.com/public_html/celestial-free/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707
Because Bootstrap is part of the Stratosphere WordPress theme, you also get some of the great form elements included with customized styling. Here are the basics:
Text Input
Text Area
Select
Checkbox – Inline
Radio
Buttons instead of text
Instead of a <span> with text, use a .btn to attach a button (or two) to an input.
Search form
Control sizing
Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.
Relative sizing
<input class="input-mini" placeholder=".input-mini" type="text">
<input class="input-small" placeholder=".input-small" type="text">
<input class="input-medium" placeholder=".input-medium" type="text">
<input class="input-large" placeholder=".input-large" type="text">
<input class="input-xlarge" placeholder=".input-xlarge" type="text">
<input class="input-xxlarge" placeholder=".input-xxlarge" type="text">
Grid sizing
Use .span1 to .span12 for inputs that match the same sizes of the grid columns.
<input class="span1" placeholder=".span1" type="text">
<input class="span2" placeholder=".span2" type="text">
<input class="span3" placeholder=".span3" type="text">
Default CSS Buttons
Button styles can be applied to anything with the .btn class applied. However, typically you’ll want to apply these to only <a> and <button> elements for the best rendering.
| Button | class=”” |
|---|---|
btn
|
|
btn btn-blue
|
|
btn btn-taupe
|
|
btn btn-green
|
|
btn btn-yellow
|
|
btn btn-red
|
|
btn btn-dark
|
|
btn btn-link
|
Cross browser compatibility
IE9 doesn’t crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix…you can thank Microsoft for this.
Button sizes
Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.