Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Bootstrap CodeLab
Search
Dhatri Misra
October 18, 2014
Programming
0
200
Bootstrap CodeLab
The sample code :
https://github.com/DhatriM/Bootstrap-Codelab-GDGIndore
Dhatri Misra
October 18, 2014
Tweet
Share
More Decks by Dhatri Misra
See All by Dhatri Misra
Fight the uncertainty
dhatrim
1
50
Experiencing User Experience!
dhatrim
2
110
Getting Ideas!?
dhatrim
0
73
Android : Idea to App!
dhatrim
1
74
Android : Getting Started
dhatrim
0
130
Promoting Women!
dhatrim
0
66
Bringing Diversity in Events!
dhatrim
0
70
Other Decks in Programming
See All in Programming
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
180
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
240
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
Reading Rails 1.0 Source Code
okuramasafumi
0
250
1から理解するWeb Push
dora1998
7
1.9k
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
楽して成果を出すためのセルフリソース管理
clipnote
0
180
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
1
130
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
nokomoro3
0
210
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
560
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
Featured
See All Featured
KATA
mclloyd
32
14k
Being A Developer After 40
akosma
90
590k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Done Done
chrislema
185
16k
Become a Pro
speakerdeck
PRO
29
5.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Producing Creativity
orderedlist
PRO
347
40k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Transcript
Webstrap! Twitter Bootstrap | Code Lab + Hackathon 1/19
All set? Let’s Bootstrap!
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
Website Structure Front-End Back-End 3/19
Front-End HTML - div, class, id, table, meta, CSS -
adding it to the html, .class, #id Javascript - bootstrap.js, jQuery. 4/19
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
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
What all frameworks exist? 7/19
We’d be using 8/19
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
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
Let’s make this! #1 - Basic Template #2 - Add
custom.css #3 - Add Navbar #4 - Add Blockquote 11/19
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
Using col-*- 13/19
Basic HTML #5 - Implement Grid //work.html #6 - Add
button //work.html #7 - Create Form //contact.html #8 - Create Table //about.html 14/19
Javascript #9 - Add Jumbotron //home.html #10 - Add Carousel
//home.html #11 - Add Tooltip //work.html #12 - Add Popover //about.html 15/19
More Javascript #13 - Add Modal //about.html #14 - Add
Dropdown //contact.html 16/19
Resources and Inspiration # Lovebootstrap # Startbootstrap # Bootstraphero #
Bootsnipp # Bootstrapzero 17/19
Treasure! oozled.com 18/19
Thank You! Connect with me on: @DhatriMisra 19/19