Difference between revisions of "Bootstrap Example"

From Level Access Web Labs
Jump to navigation Jump to search
Line 90: Line 90:
 
</tr>
 
</tr>
 
<tr>
 
<tr>
<td>Jason</td>
+
<td>John</td>
<td>Megginson</td>
+
<td>Doe</td>
<td>jmegginson</td>
+
<td>joe</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
<td>Sam</td>
+
<td>Bob</td>
<td>Joehl</td>
+
<td>Smith</td>
<td>sjoehl</td>
+
<td>bsmith</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>

Revision as of 23:19, 25 January 2018

<!DOCTYPE html> Bootstrap Example

Form Examples

http://getbootstrap.com/css/#forms

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.



Button Examples:

http://getbootstrap.com/css/#buttons

Considerations:

  • Insufficient color contrast for multiple button classes


Table Example:

http://getbootstrap.com/css/#tables

Table with alternating striped rows:

First Name Last Name Username
Tim Springer tspringer
John Doe joe
Bob Smith bsmith
Tom Hanks thanks

Image Shapes:

http://getbootstrap.com/css/#images
SSB Bart Group SSB Bart Group SSB Bart Group

Glyphicons:

Full list of available glyphs at: http://getbootstrap.com/components/

Considerations:

  • These are rendered via CSS pseudo classes
  • These are not displayed when CSS is disabled
  • Alternative text cannot be added to these
  • Browsers/systems without all font families may not render these

Examples:


JavaScript Examples:

NOTE: To use the Bootstrap JavaScript libraries, you must have jQuery.

Modal Example