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
73
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
NEWT Backend Evolution
xpromx
1
140
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
Model Pollution
hschwentner
1
160
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
880
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.3k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
180
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
320
ソフトウェア設計とAI技術の活用
masuda220
PRO
17
3.5k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
230
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
730
Featured
See All Featured
How to Ace a Technical Interview
jacobian
278
23k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Become a Pro
speakerdeck
PRO
29
5.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Music & Morning Musume
bryan
46
6.7k
Six Lessons from altMBA
skipperchong
28
3.9k
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