Presented around Oct. 2014

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