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
160
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
42
Experiencing User Experience!
dhatrim
2
97
Getting Ideas!?
dhatrim
0
67
Android : Idea to App!
dhatrim
1
63
Android : Getting Started
dhatrim
0
120
Promoting Women!
dhatrim
0
55
Bringing Diversity in Events!
dhatrim
0
51
Other Decks in Programming
See All in Programming
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
380
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
380
2 週間で Twitter Bot を作ってみた
contour_gara
0
780
使ってみよう Azure AI Document Intelligence
kosmosebi
2
360
PostmanでAPIの動作確認が楽になった話
h455h1
0
180
Apache Hive 4 on Treasure Data
ryukobayashi
1
430
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
2
210
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.3k
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
1.8k
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
110
Ruby Function Composition
bkuhlmann
1
340
Milestoner
bkuhlmann
1
410
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Why Our Code Smells
bkeepers
PRO
331
56k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
From Idea to $5000 a Month in 5 Months
shpigford
378
45k
Statistics for Hackers
jakevdp
790
220k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
46k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.3k
Automating Front-end Workflow
addyosmani
1357
200k
4 Signs Your Business is Dying
shpigford
176
21k
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