Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bootstrap CodeLab

Bootstrap CodeLab

Avatar for Dhatri Misra

Dhatri Misra

October 18, 2014
Tweet

More Decks by Dhatri Misra

Other Decks in Programming

Transcript

  1. What we are going to do? # Structure of a

    website # What are Frameworks? # Why use Frameworks? # What all Frameworks? # Why Twitter Bootstrap? # Bootstrap structure # Hands-On # Resources 2/19
  2. Front-End HTML - div, class, id, table, meta, CSS -

    adding it to the html, .class, #id Javascript - bootstrap.js, jQuery. 4/19
  3. What is a Framework? # Provides generic functionality for software

    components # User can modify these according to their requirements A Re-Usable Software Environment! 5/19
  4. Why use Framework? # Browser Compatibilty # Responsive Webdesign #

    Grid System # Customizable components # Easy to learn # Open Source, hence a large community to provide resources 6/19
  5. Pointers! # Responsive <img src="..." class="img-responsive" alt=" Responsive image"> #

    Mobile First <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> # Normalize.css 9/19
  6. Bootstrap Structure bootstrap/ ├── css/ │ ├── bootstrap.css │ ├──

    bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff 10/19
  7. Let’s make this! #1 - Basic Template #2 - Add

    custom.css #3 - Add Navbar #4 - Add Blockquote 11/19
  8. Grid System Extra small devicesPhones (<768px) :col-xs- Small devices Tablets

    (≥768px) : col-sm- Medium devicesDesktops (≥992px) : col-md- Large devices Desktops (≥1200px) : col-lg- # Always comes in the “row” class # Container and Container-fluid # Number of Columns : 12 12/19
  9. Basic HTML #5 - Implement Grid //work.html #6 - Add

    button //work.html #7 - Create Form //contact.html #8 - Create Table //about.html 14/19
  10. Javascript #9 - Add Jumbotron //home.html #10 - Add Carousel

    //home.html #11 - Add Tooltip //work.html #12 - Add Popover //about.html 15/19