Post on 09-Feb-2017
transcript
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
Thank You!