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
Slip N Slime - Character Design Ideation
thebogheart
0
310
利用者が離れないUX/UIデザイン　長く使われる業務アプリデザインのポイント
ncdc
3
180
デザインスプリントを活かすチームの在り方
mixi_design
PRO
2
790
【Designship 2024｜10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
560
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
180
Design System for training program
mct
0
280
アフォーダンスとシグニファイア
ryokanakai
1
320
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.4k
Charcoal 2.0: デザインシステムの基盤を再構築
godlingkogami
1
440
アジャイル開発におけるFigmaAI新機能の活用
abokadotyann
1
210
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
14
6.2k
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
3.8k

Featured

See All Featured
Being A Developer After 40
akosma
87
590k
A Tale of Four Properties
chriscoyier
156
23k
Typedesign – Prime Four
hannesfritz
40
2.4k
Site-Speed That Sticks
csswizardry
0
33
What's new in Ruby 2.0
geeforr
343
31k
The Pragmatic Product Professional
lauravandoore
31
6.3k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Bash Introduction
62gerente
608
210k
Faster Mobile Websites
deanohume
305
30k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k

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