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
portfolio
amitnk
1
130
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
170
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
280
Yahoo Newsletter Clicker Template
xuechunwu
0
290
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
290
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
180
ito aya|Portfolio2409
itoaya116
0
260
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
360
デザインシステム構築の進め方　基本から実践まで、具体的な手順を徹底解説
ncdc
1
210
ENEOS社事例｜アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
280
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
2
2k
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
420

Featured

See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Faster Mobile Websites
deanohume
305
30k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Thoughts on Productivity
jonyablonski
67
4.3k
Making Projects Easy
brettharned
115
5.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
For a Future-Friendly Web
brad_frost
175
9.4k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
What's in a price? How to price your products and services
michaelherold
243
12k

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> ...