1 / 9

Bootstrap

Bootstrap. - Overview - Features - Steps-by-steps. Overview. Features. Scaffolding Base CSS Components Javascript plugins. Grid System. Grid 12 columns .row .span* .offset* Type: Default Fluid Responsive. Icon sets. Glyphicons Font-Awesome. JS Components. ~ jQuery UI.

Download Presentation

Bootstrap

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related