Difference between revisions of "Bootstrap Example"

From Level Access Web Labs
Jump to navigation Jump to search
Line 112: Line 112:
 
<br />
 
<br />
  
<img src="https://pbs.twimg.com/profile_images/879707802494808064/t-feJcNT_400x400.jpg" alt="Level Access" class="img-rounded">
+
<img src="https://labs.ssbbartgroup.com/images/1/12/Level_access.jpg" alt="Level Access logo in office" class="img-rounded">
<img src="https://pbs.twimg.com/profile_images/879707802494808064/t-feJcNT_400x400.jpg" alt="Level Access" class="img-circle">
+
<img src="https://labs.ssbbartgroup.com/images/1/12/Level_access.jpg" alt="Level Access logo in office" class="img-circle">
<img src="https://pbs.twimg.com/profile_images/879707802494808064/t-feJcNT_400x400.jpg" alt="Level Access" class="img-thumbnail">
+
<img src="https://labs.ssbbartgroup.com/images/1/12/Level_access.jpg" alt="Level Access logo in office" class="img-thumbnail">
  
 
<br />
 
<br />

Revision as of 16:03, 26 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
Level Access logo in office Level Access logo in office Level Access logo in office

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