1.04k likes | 2.63k Views
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.
E N D
Bootstrap - Overview - Features - Steps-by-steps
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
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
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.
Step 3 – Development • CSS • main.css • modular css files • Javascript (components) • Inheritance components • Modular js files • jQuery UI Widget • Image • Sprites