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
190
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
Testing Trophyは叫ばない
toms74209200
0
860
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
730
1から理解するWeb Push
dora1998
7
1.8k
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
AI時代のUIはどこへ行く?
yusukebe
17
8.8k
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.3k
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
270
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.2k
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
410
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
110
為你自己學 Python - 冷知識篇
eddie
1
350
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2k
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
9.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Being A Developer After 40
akosma
90
590k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Building Flexible Design Systems
yeseniaperezcruz
328
39k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Music & Morning Musume
bryan
46
6.8k
Automating Front-end Workflow
addyosmani
1370
200k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
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