@rob_rich

Bootstrap

by Rob Richardson

@rob_rich

https://robrich.org/

September 19, 2015

About Me

Rob Richardson is a software craftsman building web properties in ASP.NET, Node, and Angular. He's a Microsoft MVP, published author, frequent speaker at conferences, user groups, and community events, and a diligent teacher and student of high quality software development. You can find this and other talks on https://robrich.org/presentations and follow him on twitter at @rob_rich.

Can I use it?

  • Free for commercial use
  • Open-source
  • MIT licensed

source: https://github.com/twbs/bootstrap#copyright-and-license

Install it

Install it

  • jQuery needed for JavaScript controls
  • meta viewport tag for mobile devices

Container

  • class="container": fixed-width, centered
  • class="container-fluid": full-width, small margin

The Grid System

  • class="row": defines a 12-column group
  • class="col-*-*": defines a cell spanning one or more columns

The Grid System

  • 12 columns
  • Yes, you can override it
  • No, it isn't a good idea

The Grid System

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

The Grid System

  • .col-xs-*: Phones (<768px)
  • .col-sm-*: Tablets (≥768px)
  • .col-md-*: Desktops (≥992px)
  • .col-lg-*: Desktops (≥1200px)

DEMO

Bootstrap is

  • An API of CSS classes
  • Uses media queries
  • Based on viewport width
  • Assume: browser width implies device type
  • Includes css reset

Bootstrap can

  • Show / hide items
  • Reposition items
  • Add more whitespace around items

Bootstrap will not

  • Avoid learning CSS
  • Never type CSS again
  • Make mobile downloads smaller
  • The magic bullet

Helper classes

  • pull-right
  • text-right
  • visible-*
  • hidden-*
  • clearfix

Buttons

  •  

Tables

  • class="table"
  • class="table table-striped"
  • class="table table-hover"

DEMO

Responsive Tables

Forms

  • div around each row: class="form-group"
  • each input control: class="form-control"
  • if many controls in a row: class="input-group"
  •  
  • Note: Do not mix form groups directly with input groups.
    Instead, nest the input group inside of the form group.

DEMO

Other controls

  • Alerts
  • Icons (removed in 4.0)
  • Pagination
  • Badges
  • Jumbotron
  • Progress bars
  • Panel, Well, Thumbnail (Cards in 4.0)
  • Drop-downs
  • Button groups
  • Button drop-downs

JavaScript controls

Require jQuery

  • Scrollspy
  • Tab
  • Tooltip
  • Carousel
  • Modal

Built on top of Bootstrap

These libraries replace bootstrap's js file with Angular bindings, removing the dependence on jQuery

Bootstrap Themes

Bootstrap 4 (Alpha)

  • rem instead of px
  • media queries can be mobile-first or desktop-first
  • card instead of well, panel, and thumbnail
  • sass instead of less
  • outline buttons
  • spacing utilities `m-b-lg`: margin-bottom-large
  • remove icons (use Font Awesome instead)
  • no ie 8 support
  • UMD support

source:
http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/
https://scotch.io/bar-talk/whats-new-in-bootstrap-4

Questions?

@rob_rich

https://robrich.org/