Download
bootstrap n.
Skip this Video
Loading SlideShow in 5 Seconds..
Bootstrap PowerPoint Presentation

Bootstrap

679 Vues Download Presentation
Télécharger la présentation

Bootstrap

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Bootstrap - Overview - Features - Steps-by-steps

  2. Overview

  3. Features • Scaffolding • Base CSS • Components • Javascript plugins

  4. Grid System • Grid • 12 columns • .row • .span* • .offset* • Type: • Default • Fluid • Responsive

  5. Icon sets • Glyphicons • Font-Awesome

  6. JS Components • ~ jQuery UI

  7. Steps-by-steps • Step 1: Download package HTML5 Boilerplate and Bootstrap from http://www.initializr.com/ • Step 2*: Customize Bootstrap • Option 1: http://twitter.github.com/bootstrap/customize.html • Option 2: LESS • Step 3*: Develop

  8. Step 2: Customize Bootstrap with LESS • Prepare: • Bootstrap git source • SimpleLESS App (Windows) • Steps: • Drag&dropbootstrap.less to SimpleLESS • Customize in variables.less • (Optional) Add reponsive.less to bootstrap.less • Setup in SimpleLESS • Create a bootstrap.css • Copy it to the project.

  9. Step 3 – Development • CSS • main.css • modular css files • Javascript (components) • Inheritance components • Modular js files • jQuery UI Widget • Image • Sprites