professional bootstrap training for it companies online onsite offsite
TRANSCRIPT
What is bootstrap?
Bootstrap is a CSS framework to make your website
"responsive".
How to get bootstrap
Download the files from http://getbootstrap.com/getting-started/
Use CDN(Content Delivery Network)
Install using bower ($ bower install bootstrap)
Bootstrap folder structure
jQuery is a pre-requisite
Including bootstrap in your HTML file
& we are all set to take off
General Rules of thumb
viewport = width of the device
12 columns = 100%
The bootstrap grid system
viewport = width of the device
12 columns = 100%
.container V/S .container-fluid
Has nothing to do with responsiveness
.container-fluid always takes the full width of the viewport
irrespective of the snap point
.container - The width will be fixed to the highest snap-point of a
smaller viewport and the lowest snap-point of a bigger viewport
Implementing a "responsive“ navbar - a few tips
Everything inside the element with class = "collapse navbar-
collapse" gets hidden when the width of the viewport decreases
the button to toggle the navigation should have the following
attributes
class = "navbar-toggle"
data-toggle = "collapse"
data-target = { id of the navbar to be collapsed on viewport change }
we can have multiple navbars on the same page - the data-
target attribute connects the toggle button and the element to be
toggled
Dealing with images
the "img-responsive" class makes images responsive
When creating full width images, it is better to stick on to any of the
snap-point width
When setting the height/width, only use either of the two. If you set
height the width will be adjusted automatically and vice versa.
image shapes - .img-rounded, .img-circle & .img-thumbnail
Bringing in "responsiveness"
the "col-xs-*", "col-sm-*" and "col-md-*" column sizes“
the "col-xs-offset-*", "col-sm-offset-*" and "col-md-offset-*" column
offsets"
Ordering columns
the "col-xs-push-*", "col-sm-push-*" and "col-md-push-*" classes
the "col-xs-pull-*", "col-sm-pull-*" and "col-md-pull-*" classes
floating classes
the "pull-right" class
the "pull-left" class
Columns within columns
the "pull-right" class
the "pull-left" class
Typography in bootstrap
there are classes in the same name for heading tags and small
tag(.h1, .h2, ...., .h6 & .small)
the lead tag
there are classes for text alignment (text-left, text-center, text-right
and text-justify)
there is a blockquote-reverse class so that we can reverse the
"blockquote">" alignment
glyphicons in bootstrap
there are around 200 glyphicons those are shipped with bootstrap
these are in the "fonts"folder in the bootstrap package
Usage: <span class="glyphicon glyphicon-asterisk" ></span>
the color and size of these icons can be changed with style
attributes such as color & font-size
responsive tables
you can convert a table into a responsive one by adding a class
"table“
the classes "table-striped, table-boardered, table-condensed, table-
hover" can be applied to bring in more style to the table
if the table is too big for smaller viewports, we can add a wrapper
div with a class "table-responsive" to the table to make it easier for the
users to view the table
there are contextual classes like "danger, info, warning, success
etc " those can be applied to rows or cells
responsive utilities
you can convert a table into a responsive one by adding a class
"table“
the classes "table-striped, table-boardered, table-condensed, table-
hover" can be applied to bring in more style to the table
if the table is too big for smaller viewports, we can add a wrapper
div with a class "table-responsive" to the table to make it easier for the
users to view the table
there are contextual classes like "danger, info, warning, success
etc " those can be applied to rows or cells
responsive utilities
you can convert a table into a responsive one by adding a class
"table“
the classes "table-striped, table-boardered, table-condensed, table-
hover" can be applied to bring in more style to the table
buttons
Color
sizes - .btn-lg, .btn-sm, or .btn-xs
block level buttons - .btn-block
button states - active & disabled
button tags - a, button, input (with type submit and button)
description lists
the dl, dt & dd tags
the .dl-horizontal class
Forms
the .form-group & .input-group classes
Forms
the .form-inline & .form-horizontal classes
Validation states
the .has-warning, .has-error, & .has-success classes
the .has-feedback classes and adding icons
Forms - control sizing
set heights using classes like .input-lg/md/sm
set widths using grid column classes like .col-lg/sm/md-*
checkout the huge list of components
@
http://getbootstrap.com/components/
Want to learn more about programming or Looking to become a good programmer?
Are you wasting time on searching so many contents online?
Do you want to learn things quickly?
Tired of spending huge amount of money to become a Software professional?
Do an online course @
baabtra.com
We put industry standards to practice. Our structured, activity based courses are so designed to make a quick, goodsoftware professional out of anybody who holds a passion for coding.
Follow us @ twitter.com/baabtraLike us @ facebook.com/baabtra
Subscribe to us @ youtube.com/baabtra
Become a follower @ slideshare.net/BaabtraMentoringPartner
Connect to us @ in.linkedin.com/in/baabtraGive a feedback @ massbaab.com/baabtra
Thanks in advance
www.baabtra.com | www.massbaab.com |www.baabte.com