Mr Minh

Introduction toBootstrap

Planning your site with mind maps Prototyping your site using mockups Bootstrap introduce and download The bootstrap grid system CSS Overview Components Javascript Effects

Agenda

Planning your site with mind maps

http://bubbl.ushttp://www.mindmeister.com

Prototyping your site using mockups

http://balsamiq.com/products/mockups/

Twitter Bootstrap is a popular UI framework http://getbootstrap.com/getting-started/

Twitter Bootstrap

● 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

Features

● JavaScript plugins○ Dialogs○ Tabs○ Alerts○ Carousel○ Tooltips○ … and more.

Features (cont.)

1. You can customize the CSS yourself (not recommended)

2. You can use LESS to compile a BootstrapCSS version on your own3. You can just download a customized version

http://bootswatch.com/

Customization

How to add Twitter Bootstrap

How to add Twitter Bootstrap (cont.)

The grid layout

The grid (cont.)

• 960 Grid System http://960.gs/• Blue Print CSS http://www.blueprintcss.org/ • Golden Grid System http://goldengridsystem.com/

The grid (cont.)Extra small devices Phones (<768px)

Small devices Tablets (≥768px)

Medium devices Desktops (≥992px)

Large devices Desktops (≥1200px)

Grid behavior Horizontal at all times

Collapsed to start, horizontal above breakpoints

Collapsed to start, horizontal above breakpoints

Collapsed to start, horizontal above breakpoints

Max container width

None (auto) 750px 970px 1170px

Class prefix .col-xs- .col-sm- .col-md- .col-lg-# of columns 12 12 12 12

Max column width Auto 60px 78px 95px

Gutter width 30px(15px on each side of a column)

30px(15px on each side of a column)

30px(15px on each side of a column)

30px(15px on each side of a column)

Examples http://getbootstrap.com/examples/grid/

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 750px3. col-md-[num] grids resize up to 970px4. col-lg-[num] grids resize up to 1170px

You should choose col-md or col-lg for desktop sites.

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>

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>

The grid (cont.)

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

Tables

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

Forms

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

● Dropdowns● Tabs● Pills● Navbars● Alerts● ListsCheck out the Bootstrap reference for more:http://getbootstrap.com/components/

Bootstrap elements

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>

Font icons

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

Icon resources

Resources

http://wrapbootstrap.com

Wrap Bootstrap

http://bootswatch.com/

Bootswatch

http://startbootstrap.com/

Start Bootstrap

http://lesscss.org/

LESS

http://fortawesome.github.io/Font-Awesome/

Font Awesome

http://fontello.com/

Fontello

Thank You!