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
発表資料テンプレート / My slide template
thatblue
0
140
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
160
Personal Story Sequence - Vendetta(WIP)
elrns88
0
340
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
480
Tableau曲線表現講座(2024.11.21)
cielo1985
0
180
横断組織デザイナーの働き方
mixi_design
PRO
0
240
20241019-CUD友の会「困った！を解決するデザイン改訂版」交流会
majimasachi
0
290
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
290
portfolio
amitnk
1
160
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
180
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.2k
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
220

Featured

See All Featured
The Invisible Side of Design
smashingmag
298
50k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k
Raft: Consensus for Rubyists
vanstee
137
6.7k
The Pragmatic Product Professional
lauravandoore
32
6.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Statistics for Hackers
jakevdp
796
220k
Gamification - CAS2011
davidbonilla
80
5.1k

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