Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Twitter Bootstrap 3

Responsive Web UI
by

Deepu Puthrote

on 22 October 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Twitter Bootstrap 3

What is Bootstrap?
Front-end framework for the web
CSS, JavaScript and Glyphicon components
Cross browser
HTML5 Support
Responsive : Adjusts to Multiple Devices and Screen Resolutions
Open Source https://github.com/twbs
Download at http://getbootstrap.com/
Why is it so popular?
Ease of use
Great Documentation
Ready made components
Highly customisable
Font icon support using Glyphicons http://glyphicons.com/
How is it Built?
Built using LESS http://lesscss.org/
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
Modular
Developers can extend Bootstrap using LESS
CSS
12 Column grids for layout
Define column size using numbers from 1 to 12
.col-lg-*, .col-md-*, .col-sm-*, .col-xs-*
.row

Why Use it?
Made for everyone, everywhere
Responsive CSS adjusts to Desktop, Mobile and Tablets
Consistent UI on all major browsers and devices
Customisable
.container
Used to centralize a page's content

@max-width is set for the component based on view port size
Mobile, Tablet and Desktop
Components
Glyphicons
Nav bars and Navigation
Dropdowns
Labels
Alerts
Breadcrumps
Pagination
Media Objects

List Groups
Button Groups
Input Groups
Progress bars
Thumpnails
Pageheader
Jumpotron
Badges

Javascript
Requires jQuery framework. http://jquery.com/
Markup api using data-attributes (data-toggle, data-target, data-src, data-dismiss)
Programatically using Javascript events
Event support
Modals
Tab
Tooltip
Popover
Alert
Stats from Github
4,777 Watchers
59,254 Stargazers
20,582 Forks
3 Things
CSS
Components
JavaScript
History
Created by Mark Otto and Jacob Thornton at Twitter
To encourage consistency across internal tools
Released in August 2011
Version 3 is the latest
One of the most popular project in Github
How To Use It
Just as any other CSS and Javascript libraries
Either download and include the scripts and css files in your HTML file
Or use CDN like Bootsrapcdn or cdnjs
Base class and individual class
Media Query
Transitions
Scrollspy
Carousel
Collapse
Affix
Full transcript