Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction To Bootstrap

Ariff Azraai
May 21, 2012
Design
2
3.7k

Introduction To Bootstrap

Slide during JomWeb Pro at Slashes & Dots office on May 20th, 2012.

Ariff Azraai

May 21, 2012
Tweet

Other Decks in Design

See All in Design
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
0
170
デザインをみんなのものに　「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
360
ポートフォリオ思考を通じたデザイナーキャリアの形成と未来への展望
recruitengineers
PRO
3
2.3k
Design Leadership in Challenging Times
morganepeng
3
300
Installing and Running decksh/pdfdeck
ajstarks
1
490
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
22
7.7k
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
240
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.7k
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
1
350
LT：11年前の「ここにいる」の話 #fukuoka_a11yconf_前夜祭
garyuten
1
110

Featured

See All Featured
The Cult of Friendly URLs
andyhume
74
5.7k
It's Worth the Effort
3n
180
27k
Become a Pro
speakerdeck
PRO
10
4.5k
Happy Clients
brianwarren
91
6.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
186
16k
How STYLIGHT went responsive
nonsquared
92
4.8k
Optimizing for Happiness
mojombo
370
69k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Scaling GitHub
holman
457
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
356
22k

Transcript

  1. BOOTSTRAP

  2. HTML, CSS, and JS TOOLKIT from Twitter

  3. Customize and extend via LESS

  4. Alternatives

  5. Foundation

  6. Blueprint

  7. Why Bootstrap? Save time; Focus on logic & code Excellent

    documentation

  8. Who is using?

  9. JomSocial

  10. kdnp.me

  11. Twitter

  12. Scaffolding Base CSS Components Javascripts What Bootstrap provides?

  13. Markup CSS Reset Grid Layout Responsive Layout Visibility Scaffolding

  14. Typography Table Form Button Icon Base CSS

  15. Button - Group, Dropdown Thumbnail & Images Label & Badge

    Navigation - Tabs, Pills, Nav, Nav List Alerts Progress Bar Components

  16. Modal Popup Dropdown Scrollspy Tab Tooltip & Popover Alert Button

    Collapse Carousel Typeahead Javascripts

  17. 12 columns 60px column width 20px column gutter 940px wrapper

    width Customizable via LESS .container .row .span[1..12] Grid

  18. Responsive Layout width < 480px - fluid column width 480px

    < width < 767px - fluid column width 767px < width < 980px - 42px column width width > 980px - 60px column width width > 1200px - 70px column width

  19. Responsive Layout .container-fluid instead of .container require bootstrap-responsive.css

  20. Visibility Hide and show elements on Desktop .visible-desktop, .hidden-desktop Tablet

    .visible-tablet, .hidden-tablet Phone .visible-phone, .hidden-phone

  21. ... <div class=“container”> <!-- .container / .container-fluid is the bootstrap

    grid wrapper --> <head class=“row”> <!-- .row wrap a row of grid --> <div class=“span8”> <!-- .span[1..12] is the grid class --> Your Header here </div> <div class=“span4 visible-desktop”> <!-- only visible on desktop / layout width > 768px Search box here </div> </head> <div class=“row” data-role=“main” <section id=“content” class=“span8”> <div class=“row”> <!-- a nested grid row here --> <div class=“span4”> A nested content here </div> <div class=“span4”> Another nested content </div> </div> </section> <aside class=“span4 hide-phone”> <!-- hidden on phone --> Your sidebar here </aside> </div <footer> Footer here </footer> </div> ...