Bootstrap
This presentation is the property of its rightful owner.
Sponsored Links
1 / 9

Bootstrap PowerPoint PPT Presentation


  • 71 Views
  • Uploaded on
  • Presentation posted in: General

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.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


Overview

Overview


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


  • Login