bootstrap
Download
Skip this Video
Download Presentation
Bootstrap

Loading in 2 Seconds...

play fullscreen
1 / 9

Bootstrap - PowerPoint PPT Presentation


  • 110 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Bootstrap' - august-guerrero


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


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

Bootstrap

- Overview

- Features

- Steps-by-steps

features
Features
  • Scaffolding
  • Base CSS
  • Components
  • Javascript plugins
grid system
Grid System
  • Grid
    • 12 columns
    • .row
    • .span*
    • .offset*
  • Type:
    • Default
    • Fluid
    • Responsive
icon sets
Icon sets
  • Glyphicons
  • Font-Awesome
js components
JS Components
  • ~ jQuery UI
steps by steps
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
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
Step 3 – Development
  • CSS
    • main.css
    • modular css files
  • Javascript (components)
    • Inheritance components
    • Modular js files
    • jQuery UI Widget
  • Image
    • Sprites
ad