mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-25 12:59:05 +02:00
Code Issues Releases Wiki Activity

docs updates, forms updated to include error states and more examples, remove text-shadow from gradientbar mixin to fix bug

Browse Source
This commit is contained in:
Mark Otto
2011-12-21 16:00:50 -06:00
parent 069ef6a020
commit 8a7abc7493
8 changed files with 190 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
docs/base-css.html
View File

@@ -762,6 +762,43 @@
<h1>Forms</h1>
</div>
<!--
Types of forms
default (stacked)
horizontal (change the class)
search
inline
Form elements
form
fieldset
legend
label
input
text (password, email, etc)
radio
checkbox
textarea
rows
select
single
multiple
size
Custom form elements
Input prepend and append (for @ and $)
checkbox and radio lists
Explaining the default Bootstrap form structure
Bulletproofing our forms means adding a bit of extra structure and providing more classes for customization and event handling
Form vertical and horizontal forms, we require a wrapping element.
we suggest a fieldset
but could be anthing so long as it uses the proper class
Form states
warning
error
success
-->
<h2>Four types of forms</h2>
<table class="bordered-table striped-table">
<thead>
@@ -842,7 +879,7 @@
</div>
<div class="span9">
<form class="horizontal-form">
<legend>Example form</legend>
<legend>Example form section</legend>
<fieldset class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
@@ -850,6 +887,16 @@
<p class="help-text">Help text here. Be sure to fill this out like so, or else!</p>
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="prependedInput">Prepended text</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">@</span>
<input class="input-small" id="prependedInput" name="prependedInput" size="16" type="text">
</div>
<span class="help-block">Here's some help text</span>
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="select01">Select list</label>
<div class="controls">
@@ -874,23 +921,44 @@
</select>
</div>
</fieldset>
<legend>Example form</legend>
<legend>Example form section</legend>
<fieldset class="control-group">
<label class="control-label" for="textarea">Textarea</label>
<div class="controls">
<textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea>
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="fileInput">Disabled input</label>
<div class="controls">
<input class="input-xlarge disabled" id="disabledInput" name="disabledInput" size="30" type="text" placeholder="Disabled input here... carry on." disabled>
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="fileInput">File input</label>
<div class="controls">
<input class="input-file" id="fileInput" name="fileInput" type="file">
</div>
</fieldset>
<fieldset class="control-group has-error">
<fieldset class="control-group warning">
<label class="control-label" for="inputError">Input with warning</label>
<div class="controls">
<input type="text" name="inputError">
<span class="help-inline">Something may have gone wrong</span>
</div>
</fieldset>
<fieldset class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" name="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</fieldset>
<fieldset class="control-group has-error">
<label class="control-label" for="textareaError">Textarea with error</label>
<fieldset class="control-group success">
<label class="control-label" for="inputError">Input with success</label>
<div class="controls">
<textarea class="input-xlarge" rows="3"></textarea>
<input type="text" name="inputError">
<span class="help-inline">Woohoo!</span>
</div>
</fieldset>
<fieldset class="control-group">