0
Introduction to
Bootstrap
Ron Reiter
Agenda
1. Web development 101
2. Twitter Bootstrap
3. Resources
Web development 101
● HTML
○ Defines the data and structure of the page using elements
● CSS
○ Defines how the data and th...
How to start
You should remember this boilerplate code:
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<b...
Basic HTML elements
● Titles - <h1>...</h1> from h1 to h6
● Paragraph - <p>...</p>
● Simple block element - <div></div>
● ...
How to use CSS
● Inline CSS
○ <div style=”color: red”>This text is red</div>
● Style CSS tag
○ <div class=”red-color”>This...
Twitter Bootstrap
Twitter Bootstrap is a popular UI framework
http://getbootstrap.com/getting-started/
As of June 28, 2013...
Features
● CSS resetting for cross browser compatibility
● Grid scaffolding for design
● Multi-screen support (responsive ...
Features (cont.)
● JavaScript plugins
○ Dialogs
○ Tabs
○ Alerts
○ Carousel
○ Tooltips
○ … and more.
Customization
1. You can customize the CSS yourself (not
recommended)
2. You can use LESS to compile a Bootstrap
CSS versi...
How to add Twitter Bootstrap
You should use a CDN (content delivery network) for
loading resources.
http://www.bootstrapcd...
What are those lines?
We use a shared CDN because chances are that common
files are most likely already cached in the user...
The grid layout
12 column row
col-md-12
col-md-6 col-md-6
col-md-4 col-md-4 col-md-4
col-md-2 col-md-2 col-md-2 col-md-2 c...
The grid (cont.)
How to write pages using a grid:
<!-- every row must have 12 columns -->
<div class=”row”>
<div class=”co...
The grid (cont.)
Bootstrap 3 features an always-responsive grid with a
maximum size:
1. col-xs-[num] grids have no maximum...
The grid (cont.)
You can also use two grid sizes for different
screen sizes:
<div class=”row”>
<div class=”col-md-4 col-xs...
Tables
<table class=”table”>
<thead>
<th><td>Name</td><td>Age</td></th>
</thead>
<tbody>
<tr><td>Alice</td><td>20</td></tr...
Forms
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email...
Buttons can either be button elements, links or
input elements. They will all look like buttons.
● For simple links, use t...
Bootstrap elements
● Dropdowns
● Tabs
● Pills
● Navbars
● Alerts
● Lists
Check out the Bootstrap reference for more:
http:...
Font icons
To insert a user icon to a button, use the
following syntax inline with any text:
<span class="glyphicon glyphi...
Icon resources
● Glyphicons - Comes with bootstrap
● Font Awesome - Recommended
○ http://fortawesome.github.io/Font-Awesom...
Resources
Wrap Bootstrap
http://wrapbootstrap.com
Bootswatch
http://bootswatch.com/
Start Bootstrap
http://startbootstrap.com/
LESS
http://lesscss.org/
Font Awesome
http://fortawesome.github.io/Font-Awesome/
Fontello
http://fontello.com/
PlaceIt by Breezi
http://placeit.breezi.com/
Exercise
● Design a page with the following layout
Navigation bar
Big heading
Feature Icon Feature Icon Feature Icon
Featu...
Thank You!
Upcoming SlideShare
Loading in...5
×

Introduction to Bootstrap

3,898

Published on

A quick tutorial for beginners on how to start building web pages with Twitter Bootstrap

Published in: Technology, Design
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,898
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
330
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to Bootstrap"

  1. 1. Introduction to Bootstrap Ron Reiter
  2. 2. Agenda 1. Web development 101 2. Twitter Bootstrap 3. Resources
  3. 3. Web development 101 ● HTML ○ Defines the data and structure of the page using elements ● CSS ○ Defines how the data and the elements actually look, and how they behave when interacting with them ● JavaScript ○ The programming language of the web
  4. 4. How to start You should remember this boilerplate code: <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <!-- page content goes here --> </body> </html>
  5. 5. Basic HTML elements ● Titles - <h1>...</h1> from h1 to h6 ● Paragraph - <p>...</p> ● Simple block element - <div></div> ● Simple inline element - <span></span> ● Images - <img src=”...”/>
  6. 6. How to use CSS ● Inline CSS ○ <div style=”color: red”>This text is red</div> ● Style CSS tag ○ <div class=”red-color”>This text is red</div> ○ <style> .red-color { color: red; } </style> ● External CSS file (put in <head>) ○ <link rel=”stylesheet” href=”style.css”/>
  7. 7. Twitter Bootstrap Twitter Bootstrap is a popular UI framework http://getbootstrap.com/getting-started/ As of June 28, 2013, 1% of all websites are powered by Twitter Bootstrap
  8. 8. Features ● CSS resetting for cross browser compatibility ● Grid scaffolding for design ● Multi-screen support (responsive design) ● “Mobile first”, like jQuery Mobile ● And a really good looking UI framework
  9. 9. Features (cont.) ● JavaScript plugins ○ Dialogs ○ Tabs ○ Alerts ○ Carousel ○ Tooltips ○ … and more.
  10. 10. Customization 1. You can customize the CSS yourself (not recommended) 2. You can use LESS to compile a Bootstrap CSS version on your own 3. You can just download a customized version http://bootswatch.com/
  11. 11. How to add Twitter Bootstrap You should use a CDN (content delivery network) for loading resources. http://www.bootstrapcdn.com/ <!DOCTYPE html> <html> <head> <title>Page title</title> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user- scalable=no"> </head> <body> <!-- page content goes here --> </body> </html>
  12. 12. What are those lines? We use a shared CDN because chances are that common files are most likely already cached in the user’s computer. 1. The <link> tag loads the CSS - the actual bootstrap styling. This is obviously the most important 2. The <script> tag loads additional JavaScript capabilities of the Bootstrap framework 3. The <meta> tag is for smaller devices which have a viewport, and it disables zooming so that the responsive features of Bootstrap will kick in
  13. 13. The grid layout 12 column row col-md-12 col-md-6 col-md-6 col-md-4 col-md-4 col-md-4 col-md-2 col-md-2 col-md-2 col-md-2 col-md-2 col-md-2 col-md-4 col-md-8
  14. 14. The grid (cont.) How to write pages using a grid: <!-- every row must have 12 columns --> <div class=”row”> <div class=”col-md-4”> <!-- content --> </div> <!-- need to complete 8 more columns --> </div>
  15. 15. The grid (cont.) Bootstrap 3 features an always-responsive grid with a maximum size: 1. col-xs-[num] grids have no maximum size (fluid) 2. col-sm-[num] grids resize up to 750px 3. col-md-[num] grids resize up to 970px 4. col-lg-[num] grids resize up to 1170px You should choose col-md or col-lg for desktop sites.
  16. 16. The grid (cont.) You can also use two grid sizes for different screen sizes: <div class=”row”> <div class=”col-md-4 col-xs-6”> <!-- content --> </div> <div class=”col-md-8 col-xs-6”> <!-- content --> </div> </div>
  17. 17. Tables <table class=”table”> <thead> <th><td>Name</td><td>Age</td></th> </thead> <tbody> <tr><td>Alice</td><td>20</td></tr> <tr><td>Bob</td><td>25</td></tr> </tbody> </table>
  18. 18. Forms <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id=" exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id=" exampleInputPassword1" placeholder="Password"> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
  19. 19. Buttons can either be button elements, links or input elements. They will all look like buttons. ● For simple links, use the <a> element and add button styling if needed. ● For forms or dynamic buttons, use the button element. <button class="btn btn-primary">Primary</button> <a href=”btn btn-primary”>Primary</a> <input type=”submit class=”btn btn-primary”/> Buttons
  20. 20. Bootstrap elements ● Dropdowns ● Tabs ● Pills ● Navbars ● Alerts ● Lists Check out the Bootstrap reference for more: http://getbootstrap.com/components/
  21. 21. Font icons To insert a user icon to a button, use the following syntax inline with any text: <span class="glyphicon glyphicon-user"></span> For example, for a button with a star: <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star"></span> Star </button>
  22. 22. Icon resources ● Glyphicons - Comes with bootstrap ● Font Awesome - Recommended ○ http://fortawesome.github.io/Font-Awesome/ ● Fontello - Customize your font package ○ http://fontello.com/ ● Free icons - many of them over the internet ○ http://www.pixeden.com/media-icons/flat-design- icons-set-vol1 ● Commercial icons - Shutterstock, istockphoto, etc.
  23. 23. Resources
  24. 24. Wrap Bootstrap http://wrapbootstrap.com
  25. 25. Bootswatch http://bootswatch.com/
  26. 26. Start Bootstrap http://startbootstrap.com/
  27. 27. LESS http://lesscss.org/
  28. 28. Font Awesome http://fortawesome.github.io/Font-Awesome/
  29. 29. Fontello http://fontello.com/
  30. 30. PlaceIt by Breezi http://placeit.breezi.com/
  31. 31. Exercise ● Design a page with the following layout Navigation bar Big heading Feature Icon Feature Icon Feature Icon Feature text Feature text Feature text Footer
  32. 32. Thank You!
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×