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
Design System for training program
mct
0
300
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
180
今日から始める グラレコ チャレンジ　DevRel/Tokyo #94 〜グラレコ チャレンジ〜
moshimoshiyuki
0
140
202409_会社概要資料_Englishver.pdf
zakkerooni
0
220
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
330
portfolio
amitnk
1
160
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
670
Карта реализации историй — убийца USM
ashapiro
0
270
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
210
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
1
2.6k
20241019-CUD友の会「困った！を解決するデザイン改訂版」交流会
majimasachi
0
290
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
220

Featured

See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
How STYLIGHT went responsive
nonsquared
96
5.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
17
2.3k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
A Tale of Four Properties
chriscoyier
157
23k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Embracing the Ebb and Flow
colly
84
4.5k

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