Bootstrap CodeLab

The sample code : https://github.com/DhatriM/Bootstrap-Codelab-GDGIndore

Transcript

1. Webstrap! Twitter Bootstrap | Code Lab + Hackathon 1/19
2. All set? Let’s Bootstrap!
3. 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
4. Website Structure Front-End Back-End 3/19
5. Front-End HTML - div, class, id, table, meta, CSS - adding it to the html, .class, #id Javascript - bootstrap.js, jQuery. 4/19
6. 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
7. 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
8. What all frameworks exist? 7/19
9. We’d be using 8/19
10. 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
11. 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
12. Let’s make this! #1 - Basic Template #2 - Add custom.css #3 - Add Navbar #4 - Add Blockquote 11/19
13. 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
14. Using col-*- 13/19
15. Basic HTML #5 - Implement Grid //work.html #6 - Add button //work.html #7 - Create Form //contact.html #8 - Create Table //about.html 14/19
16. Javascript #9 - Add Jumbotron //home.html #10 - Add Carousel //home.html #11 - Add Tooltip //work.html #12 - Add Popover //about.html 15/19
17. More Javascript #13 - Add Modal //about.html #14 - Add Dropdown //contact.html 16/19
18. Resources and Inspiration # Lovebootstrap # Startbootstrap # Bootstraphero # Bootsnipp # Bootstrapzero 17/19
19. Treasure! oozled.com 18/19
20. Thank You! Connect with me on: @DhatriMisra 19/19