Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Intro to twitter bootstrap

No description
by

Rebecca Olby

on 16 January 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Intro to twitter bootstrap

This way
That way
GETTING STARTED
Examples:
Good luck!
Why not?
Intro to Twitter Bootstrap
Why use it?
All skill levels, devices, and project sizes
Bootstrap sites all look the same
*Bootstrap is a development solution;
Customize your Bootstrap packages:
http://getbootstrap.com/customize/
Download and Save the custom URL
Css:
http://getbootstrap.com/css/
Components:
http://getbootstrap.com/components/
Javascript:

http://getbootstrap.com/javascript/
What's in it?
http://thejohnsmith.com/sites/MOB/

http://beckyolby.com

http://regenevidainc.com

http://files.horizontalintegration.com/chs_static/microsites/home-pac.html

http://standupcrap.com
Glyphicons
Dropdowns
Buttons
Navigation
Pagination
Labels/Badges
Jumbotron
Thumbnails
Alerts
Progress Bars
Media Object
List Group
Panels
Popovers
Transition
Modal
Dropdown
Scrollspy
Tab
Tooltip
Popover
Alert
Button
Collapse
Carousel
Affix
Grid system
Typography
Tables
Forms
Buttons
Images
Helper Classes
Responsive utilities
Responsive Utilities
.visible-xs-*
.visible-sm-*
.visible-md-*
.visible-lg-*
VISIBLE
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
HIDDEN
PRINT
.visible-print
.hidden-print
- extra small (less than 768px)
- small (up to 768 px)
- medium (768 px to 991 px)
- larger (992 px and above)
Class Name
Class Name
Class Name
- yes visible
- visible only to browser not to print.
What it does
What it does
.visible-*-block
.visible-*-inline
.visible-*-inline-block
- display: block;
- display: inline;
- display: inline-block;
Class Name
What it does
BLOCK / INLINE / INLINE-BLOCK
Standard
or
Choosing the components that are needed for the project
Customize
Precompiled
Source code
Bootstrap is bloated
*Choose which components you need
Unified naming conventions
Supported by all popular browsers
Grid Layout
container
row
column
col-sm-1
col-md-1
col-xs-1
col-lg-1
--> col-xs-12
--> col-sm-12
--> col-md-12
--> col-lg-12
Containers
Rows
Columns
containers --> row
container --> row --> columns
container --> row --> column
column
must have rows
Great documentation and support
Pre-built and styled UI components
Customizable
Responsive grid system
Faster development and prototyping
It's

NOT

a design solution.
-->
-->
OR
Customized
Standard
Choose:
Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.
Css:
Javascript:
Components:
(classes NOT id's)
Thank You &
Full transcript