bootstrap – html/css/js framework – intro

bootstrap

html/css/js framework

09.18.2015

intro

• a collection of css and js plugins
• useful tools for most common ui tasks
• layouts, forms, tables, buttons, alerts, modals
• allows rapid prototyping, building a ui
• easy to use, minimal css knowledge required
• responsiveness baked in

history

• built by twitter: @mdo, @fat
• open source, mit license
• github: 86K stars, 35K forks
• responsive, mobile first since v3

compatibility

gallery

• bootstrap expo
• built with bootstrap

customize bootstrap

• customize components
• live customizer themes
• bootswatch
• wrap bootstrap custom css/js
• style bootstrap

getting started

install with npm, bower, et al.

grid layout

• 12 column fluid responsive layout
• pre-defined classes for easy layouts
• container > row > column hierarchy
• content should be placed within columns
• fixed width:

  .container

  full width:

  .container-fluid

grid options

grid demo

write code online

• plunker
• jsfiddle

angular ui bootstrap

• https://angular-ui.github.io/bootstrap/
• native AngularJS directives for Bootstrap
• directives: alert, button, popover, typeahead, modal

• angular.module('myModule', ['ui.bootstrap']);

• typeahead demo: customer management app

resources

• very well documented
• web: http://getbootstrap.com/
• github: https://github.com/twbs/bootstrap
• blog: http://blog.getbootstrap.com/
• books (amazon), online tutorials

Thank you