Tuesday, October 1, 2013

Bootstrap 3

Bootstrap 3

Update: http://www.stevekeator.com/slides-examples-and-video-from-my-bootstrap-presentation/

http://getbootstrap.com/getting-started/

20 CSS components

Less variables

Light weight - 119K for framework

Better UI control

Twitter is where it originated

Ie8/9 CSS downgrades

Get bootstrap.org

https://github.com/twbs/bootstrap

Responsive grid:

grid system has12 columns , split them up however you want to, offsetting, nestable

Bootstrap 3 completely redeveloped mobile first

Wrap in container CSS class  , then. Row

<div class ="container">
<div class = "row">
<div class ="col-lg-6"></div> <div class ="col-lg-6"></div>

4 basic snap points


  • Computers lg
  • tablets landscape sm
  • tablets portraits med
  • Cell phone xs


Offet can add into your class


Examples.bootstrp.com/grid/

.visible

.hidden

.sr-only

.visible-print

.hidden.print

Bootstrap typography examples

H1, H2

.lead class for paragraphs

Blockquotes

Emphasis class helpers

-success

- warning

Ordered lists, unordered lists,

Code element

Pre element

Table class , table-striped

Condensed padding

Contextual row classes

Buttons , disabled state

Forms .form-group

form-inline


Element states

Doesn't play well with JQuery validation

Element sizes

divshot.com

http://getbootstrap.com/customize/

1 comment: