BOOTSTARP
What is Bootstrap?
Bootstarp is a free, open Source and is most popular HTML,CSS & JS Framework
developed by TWITTER for creating Responsive Web applications.
Advantages:
[Link] Responsive Desing.
[Link] lot of development time.
[Link].
[Link].
[Link].
SETTING UP BOOTSTRAP
Go to [Link].
Click on Download Bootstrap(We see 3 types of download options). Click on
Customize and Miginfied download option.
After Download we can see a Zip Folder. Unzip the folder and open.
Here we have 3 folders CSS,FONTS,JS.
Now, Save these files with respect of there file type into your project folder.
Finally give links of these saved files in your project.
BOOTSTRAP GRID SYSTEM
Bootstrap Grid System is used for creating web page layouts through a series of
rows and columns.
The Grid System consists of 12 columns.
1 2 3 4 5 6 7 8 9 10 11 12
BOOTSTRAP GRID CLASSES:
Devices Bootstrap class
Extra Small Devices - Mobile Phones(<768px) col-xs-*
Small Devices – Tablets(>=768px) col-sm-*
Medium Devices – Desktops(>=992px) col-md-*
Large Devices – Desktops,LCD(>=1200px) col-lg-*
HTML to create grid system:
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
Output:
Col-md-8 Col-md-4
HTML to create grid system:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
Output:
Col-md-4 col-md-4 Col-md-4
BOOTSTRAP OFFSET CLASSES:
(Offset leaves the gap of the number mentioned in the row.)
Col-xs-offset-*
Col-sm-offset-*
Col-md-offset-*
Col-lg-offset-*
HTML to create offset grid system:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
Output:
Col-md-offset-4
Col-md-4 Col-md-4
HTML to create offset grid system:
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
Output:
Col-md-3 Col-md-3
BOOTSTRAP NESTED ROWS AND COLUMNS:
<div class="row">
<div class="col-sm-3">
<div class="row">
<div class="col-xs-12">Sidebar1</div>
</div>
<div class="row">
<div class="col-xs-12">Sidebar2</div>
</div>
</div>
<div class="col-xs-9">Main</div>
</div>
Output:
Sidebar1
Mian
Sidebar2
BOOTSTRAP IMAGE CLASSES:
Pull-left
Pull-right
Center-block
Image Shapes:
(classes for image shapes)
Img-rounded
Img-circle
Img-thumbnail
Img-responsive is the class used to make the image responsive.
BOOTSTRAP RESPONSIVE UTILITY CLASSES:
Visible-xs hidden-xs visible-*-block
Visible-sm hidden-sm visible-*-inline
Visible-md hidden-md visible-*-inline block.
Visible-lg hidden-lg
PRINT CLASSES:
;Visible-print (visible when printing.)
Hidden-print (visible only on the browser not when printing.)
BOOTSTRAP TYPOGRAPHY:
It makes easy to create headings, paragraphs,ordered list, unordered list,inline
elements,etc in a way that would be appealing to the users.
BOOTSTRAP LIST CLASSES:
list-group
list-group-item
list-group-item-heading
list-group-item-text
list-group-item-danger
list-group-item-success
list-group-item-info
list-group-item-primary
list-group-item-warning
badge.
BOTSTRAP BUTTON CLASSES:
btn
btn-block
btn-lg
btn-sm
btn-xs
btn-primary
btn-success
btn-info
btn-warning
btn-danger
btn-link.
BOOTSTRAP FORM: ATTRIBUTES:
form-group help-bock
form-control sr-only
form-inline checkbox
form-control-feedback has-warning
has-error
has-success
control-label
feedback
BOOTSTRAP TABLE CLASSES:
table
table-stripped
table-hover
table-responsive
active
success
warning
danger
BOOTSTRAP DROPDOWN CLASSES: ATTRIBUTE:
caret dropdown-menu dropdown
disabled dropdown-header dropdown-toggle
divider
BOOTSTRAP NAVIGATION CLASSES: ATTRIBUTES
nav data-toggle:collapse
nav-tabs iconbar
nav-pills
nav-justified
nav-stacked
navbar
navbar-default
navbar-header
navbar-toggle
navbar-brand
navbar collapse
navbar-nav
BOOTSRTAP TAB CLASSES:
tabs
tab-content
tab-pane
BOOTSTRAP PANEL CLASSES:
Panel panel-title panel-success
panel-default panel-footer panel-danger
panel-body panel-group panel-warning
panel-heading panel-info panel-default
BOOTSTRAP MODAL CLASSES: ATTRIBUTES:
modal data-dismiss=modal
modal-dialog
modal-content
modal-header
modal-title
modal-body
modal-footer
modal-lg
modal-sm
modal-xs
BOOTSTRAP CAROUSEL CLASSES: ATTRIBUTES:
carousel-slide data-ride=carousel
carousel-indicators data-slide=prev
carousel-inner data-slide=next
left carousel-control
BOOTSTRAP PAGINATION AND PAGER CLASSES:
pagination pager
pagination-lg page-header
pagination-sm pevious , next
BOOTSTRAP LABEL CLASSES:
label
label-default
label-primary
label-danger
label-info
label-success
label-warning
BOOTSTRAP CLASSES:
breadcrumbs
jumbotron
thumbnail
caption
well.
