Twitter Bootstrap is a free and open-source front-end web framework that contains HTML and CSS-based design templates and components for typography, forms, buttons, navigation, and other interface components, as well as optional JavaScript extensions. It aims to provide a simple and flexible framework for building responsive, mobile-first projects. The document outlines the key components of Bootstrap including scaffolding, base CSS, JavaScript plugins, and provides examples of grids, buttons, dropdowns, and other elements.

1. Introduction to
Twitter Bootstrap
3.0.3
林良軒 2013/12/24 @ NCU – RECAST
Email : linliang258369@gmail.com

2. Outline
Introduction to Twitter Bootstrap
Scaffolding
Base CSS
Components
Javascript Plugin
1

3. What is Bootstrap?
Sleek, intuitive, and powerful mobile first frontend framework for faster and easier web
development.
2

4. Categories
Scaffolding
 Grid System
 Layout …
Base CSS
 Table
 Form
 Button …
Components





Glyphicons
Dropdowns
Button Dropdowns
Navbar
Pagination …
Javascript Plugin




Modal
Scrollspy
Button
Carousel …
3

5. Scaffolding
Up to 12 columns
Offsetting columns
<div class=“col-md-offset-3”>
Responsive design – can adapt to user device
Nesting columns
Column ordering
4

6. Grid System
5

7. Base CSS
Headings
Emphasis
Blackquotes
6

8. Base CSS
Tables – Hover Rows, Contextual Classes, etc.
Forms – Inline Form, Horizontal Form, etc.
7

9. Base CSS
Buttons
<button type=“button” class=“btn btn-primary btn-lg”>Primary</button>
<button type=“button” class=“btn btn-success”>Success</button>
<button type=“button” class=“btn btn-info btn-sm”>Info</button>
<button type=“button” class=“btn btn-warning btn-xm”>Warning</button>
Images
<img class=“img-rounded”>
<img class=“img-circle”>
<img class=“img-thumbnail”>
8

10. Base CSS
Responsive Utilities
9

11. Components
Glyphicons
<span class=“glyphicon glyphicon-star”></span>
<span class=“glyphicon glyphicon-search”></span>
<span class=“glyphicon glyphicon-question-sign”></span>
<span class=“glyphicon glyphicon-remove”></span>
Dropdowns
10

12. Components
Button Dropdowns
Navbars
:w
11

13. Components
Labels
Alerts
Progress bars
12

14. Compoments
Lists
Panels
13

15. Javascript
Models(model.js) – popup message box
Dropdown(dropdown.js) – for dropdown menu
ScrollSpy(scrollspy.js)
– automatically updating on scroll position
14

16. Javascript
Tooltips(tooltip.js) – show tips when hover over
Popovers(popover.js) – show tips when click
Buttons(button.js) – Checkbox, Radio
15

17. Javascript
Collapse(collapse.js) – collapse components
Carousel(carousel.js) – slideshow
16

18. Reference
http://getbootstrap.com/
https://www.youtube.com/user/meyghania/videos
http://www.slideshare.net/jarannilsen/bootstraplightning-talk-16055450
17