From 21c63d978352b41c6bde5cb719790cc0dc2701a6 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 1 Oct 2015 11:10:35 -0700 Subject: [PATCH] Apply updates to css/index.html --- css/index.html | 60 +++++++++++++++++++++++++++----------------------- 1 file changed, 32 insertions(+), 28 deletions(-) diff --git a/css/index.html b/css/index.html index 30797f8a69..b4483f4684 100644 --- a/css/index.html +++ b/css/index.html @@ -901,8 +901,8 @@
Twitter, Inc.
- 795 Folsom Ave, Suite 600
- San Francisco, CA 94107
+ 1355 Market Street, Suite 900
+ San Francisco, CA 94103
P: (123) 456-7890
@@ -912,8 +912,8 @@ 
<address>
   <strong>Twitter, Inc.</strong><br>
-  795 Folsom Ave, Suite 600<br>
-  San Francisco, CA 94107<br>
+  1355 Market Street, Suite 900<br>
+  San Francisco, CA 94103<br>
   <abbr title="Phone">P:</abbr> (123) 456-7890
 </address>
 
@@ -1834,7 +1834,7 @@ To edit settings, press <kbd><kbd>ctrlCheckboxes and radios
   
Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

-  
A checkbox or radio with the disabled attribute will be styled appropriately. To have the <label> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the .disabled class to your .radio, .radio-inline, .checkbox, .checkbox-inline, or <fieldset>.

+  
Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent <label>, you'll need to add the .disabled class to the parent .radio, .radio-inline, .checkbox, or .checkbox-inline.

   
Default (stacked)

   

     

@@ -2167,6 +2167,28 @@ To edit settings, press <kbd><kbd>ctrl
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

 
 
+  
Help text

+  
Block level help text for form controls.

+  

+    
Associating help text with form controls

+    
Help text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.

+  

+  

+    
+      

+        
+        
+      

+      A block of help text that breaks onto a new line and may extend beyond one line.
+    
+  

+
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
+<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
+...
+<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

+
+ +

Validation states

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

@@ -2180,7 +2202,8 @@ To edit settings, press <kbd><kbd>ctrl
- + + A block of help text that breaks onto a new line and may extend beyond one line.
@@ -2218,7 +2241,8 @@ To edit settings, press <kbd><kbd>ctrl 
<div class="form-group has-success">
   <label class="control-label" for="inputSuccess1">Input with success</label>
-  <input type="text" class="form-control" id="inputSuccess1">
+  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
+  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
 </div>
 <div class="form-group has-warning">
   <label class="control-label" for="inputWarning1">Input with warning</label>
@@ -2543,26 +2567,6 @@ To edit settings, press <kbd><kbd>ctrl</div>
 </div>
-

Help text

-

Block level help text for form controls.

-
-

Associating help text with form controls

-

Help text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.

-
-
-
-
- - -
- A block of help text that breaks onto a new line and may extend beyond one line. -
-
-
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
-<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
-...
-<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
-

Buttons

@@ -3782,9 +3786,9 @@ To edit settings, press <kbd><kbd>ctrlFocus state
  • Disabled state
  • Readonly state
    • +
  • Help text
  • Validation states
  • Control sizing
    • -
  • Help text