Bootstrap
------------------------------
- free front-end framework for faster and easier
-Includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
-
What is Responsive Web Design?
creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.
syntax:
<!DOCTYPE html> : at the beginning of the page
<html lang="en">
Library: including bootstrap.min.css along with jquery.min.js
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
width=device-width: gets the width of the device like mobile,tab
initial-scale: initial zoom level when the page is first loaded by the browser
<meta name="viewport" content="width=device-width, initial-scale=1">
Containers classes:
-----------------------
-.container class provides a responsive fixed width container
-.container-fluid class provides a full width container ex: <div class="container-fluid">
-nested not possible(we cannot put a container inside another container)
Bootstrap Grid System:
-----------------------
-Bootstrap's grid system allows up to 12 columns across the page like span1...span12
Grid Classes(Bootstrap grid system has 4-classes)
---------------------
xs (for phones)
sm (for tablets) ex: <div class="col-sm-4">
md (for desktops)
lg (for larger desktops)
ex: <div class="col-sm-4"> : column-smalltablet-length
<small> :is used to create a lighter, secondary text in any heading
<mark> : in the light-yellow colored text
<abbr>: displays with caps like abbrivattion(UNO)
<blockquote>: used to tell them like this content takent from www website in <footer>
<blockquote class="blockquote-reverse"> :from right-to left alignment of the content
<dl>: Description Lists
<dl>
<dt>Heading </dt>
<dd>points</dd>
</dl>]
- <code> : snippet looks like code in red color
-<kbd>ctrl + p</kbd> displays like shortcuts of keyboard(kbd)
-<pre>: Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
Text can be displayed using diff classes:
<p class="text-success"> green color
<p class="text-danger"> red color
<p class="text-muted"> light color
Similarly BgColor can be displayed using diff classes:
<p class="bg-success"> green color or simply "success" ex: <tr class="success" >
<p class="bg-danger"> red color
<p class="bg-muted"> light color
Class Description Example(without dot)
-------------------------------------------
.lead Makes a paragraph stand out
.small Indicates smaller text (set to 85% of the size of the parent)
.text-left Indicates left-aligned text
.text-center Indicates center-aligned text
.text-right Indicates right-aligned text
.text-justify Indicates justified text
.text-nowrap Indicates no wrap text
.text-lowercase Indicates lowercased text
.text-uppercase Indicates uppercased text
.text-capitalize Indicates capitalized text
.initialism Displays the text inside an <abbr> element in a slightly smaller font size
.list-unstyled Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well)
.list-inline Places all list items on a single line
.dl-horizontal Lines up the terms (<dt>) and descriptions (<dd>) in <dl> elements side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side
.pre-scrollable Makes a <pre> element scrollable
Bootstrap Table:
-----------------
table: <table class="table"> content will display with table style with horizontal lines
Striped Rows: <table class="table table-striped"> : alternative rows in different default colors
<table class="table table-bordered"> : table with default borders
Image shapes: <img class="">
--------------
class="img-rounded" : rounded corners to an image
class="img-thumbnail" : shapes the image to a thumbnail
class="img-circle" : Circle shape image
class="img-responsive" : Adjusting(responsive) the image to the scale size of the window
Responsive Videos:
<iframe class="embed-responsive-item" src="http://youtube.com/video/1268/2762"></iframe>
class="embed-responsive-item-4by3 : 4:3 ratio old style
class="embed-responsive-item-16by9 : 16:9 ratio HD style
jumbotron (large box with grey color)
------------------------------------
<div class="jumbotron">
-we can place jumbotron ouside the container class if we dont wont screen size
-class="page-header" :page header like Bold font at the header of the page
-.well class adds a rounded border around an element with a gray background color and some padding
class="well" :Normal rounded with gray color box
class="well well-sm" :small rounded with gray color box
class="well well-lg" :large rounded with gray color box
Alerts with colored boxes: class="close" and data-dismiss="alert" is used to close the alert box
-------------------------------------------
<div class="alert alert-success">
<div class="alert alert-info">
<div class="alert alert-warning">
<div class="alert alert-danger">
Closing Alerts:
---------------------
To close the alert message, add class="close" and data-dismiss="alert" to a link or a button element:
The .fade and .in classes adds a fading effect when closing the alert message:
-------------------------------------------------------------------------------
-> The .fade and .in classes adds a fading effect when closing the alert message
<div class="alert alert-info fade in"> : multiple classes alert, alert-info, fade, in
Ex:
<div class="alert alert-info fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div
Bootstrap Buttons:
---------------------------
Bootstrap provides 7-styles with diff colors of buttons:
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
-<button type="button" class="btn btn-default">
- Media queries for response web design
------------------------------
- free front-end framework for faster and easier
-Includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
-
What is Responsive Web Design?
creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.
syntax:
<!DOCTYPE html> : at the beginning of the page
<html lang="en">
Library: including bootstrap.min.css along with jquery.min.js
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
width=device-width: gets the width of the device like mobile,tab
initial-scale: initial zoom level when the page is first loaded by the browser
<meta name="viewport" content="width=device-width, initial-scale=1">
Containers classes:
-----------------------
-.container class provides a responsive fixed width container
-.container-fluid class provides a full width container ex: <div class="container-fluid">
-nested not possible(we cannot put a container inside another container)
Bootstrap Grid System:
-----------------------
-Bootstrap's grid system allows up to 12 columns across the page like span1...span12
Grid Classes(Bootstrap grid system has 4-classes)
---------------------
xs (for phones)
sm (for tablets) ex: <div class="col-sm-4">
md (for desktops)
lg (for larger desktops)
ex: <div class="col-sm-4"> : column-smalltablet-length
<small> :is used to create a lighter, secondary text in any heading
<mark> : in the light-yellow colored text
<abbr>: displays with caps like abbrivattion(UNO)
<blockquote>: used to tell them like this content takent from www website in <footer>
<blockquote class="blockquote-reverse"> :from right-to left alignment of the content
<dl>: Description Lists
<dl>
<dt>Heading </dt>
<dd>points</dd>
</dl>]
- <code> : snippet looks like code in red color
-<kbd>ctrl + p</kbd> displays like shortcuts of keyboard(kbd)
-<pre>: Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
Text can be displayed using diff classes:
<p class="text-success"> green color
<p class="text-danger"> red color
<p class="text-muted"> light color
Similarly BgColor can be displayed using diff classes:
<p class="bg-success"> green color or simply "success" ex: <tr class="success" >
<p class="bg-danger"> red color
<p class="bg-muted"> light color
Class Description Example(without dot)
-------------------------------------------
.lead Makes a paragraph stand out
.small Indicates smaller text (set to 85% of the size of the parent)
.text-left Indicates left-aligned text
.text-center Indicates center-aligned text
.text-right Indicates right-aligned text
.text-justify Indicates justified text
.text-nowrap Indicates no wrap text
.text-lowercase Indicates lowercased text
.text-uppercase Indicates uppercased text
.text-capitalize Indicates capitalized text
.initialism Displays the text inside an <abbr> element in a slightly smaller font size
.list-unstyled Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well)
.list-inline Places all list items on a single line
.dl-horizontal Lines up the terms (<dt>) and descriptions (<dd>) in <dl> elements side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side
.pre-scrollable Makes a <pre> element scrollable
Bootstrap Table:
-----------------
table: <table class="table"> content will display with table style with horizontal lines
Striped Rows: <table class="table table-striped"> : alternative rows in different default colors
<table class="table table-bordered"> : table with default borders
Image shapes: <img class="">
--------------
class="img-rounded" : rounded corners to an image
class="img-thumbnail" : shapes the image to a thumbnail
class="img-circle" : Circle shape image
class="img-responsive" : Adjusting(responsive) the image to the scale size of the window
Responsive Videos:
<iframe class="embed-responsive-item" src="http://youtube.com/video/1268/2762"></iframe>
class="embed-responsive-item-4by3 : 4:3 ratio old style
class="embed-responsive-item-16by9 : 16:9 ratio HD style
jumbotron (large box with grey color)
------------------------------------
<div class="jumbotron">
-we can place jumbotron ouside the container class if we dont wont screen size
-class="page-header" :page header like Bold font at the header of the page
-.well class adds a rounded border around an element with a gray background color and some padding
class="well" :Normal rounded with gray color box
class="well well-sm" :small rounded with gray color box
class="well well-lg" :large rounded with gray color box
Alerts with colored boxes: class="close" and data-dismiss="alert" is used to close the alert box
-------------------------------------------
<div class="alert alert-success">
<div class="alert alert-info">
<div class="alert alert-warning">
<div class="alert alert-danger">
Closing Alerts:
---------------------
To close the alert message, add class="close" and data-dismiss="alert" to a link or a button element:
The .fade and .in classes adds a fading effect when closing the alert message:
-------------------------------------------------------------------------------
-> The .fade and .in classes adds a fading effect when closing the alert message
<div class="alert alert-info fade in"> : multiple classes alert, alert-info, fade, in
Ex:
<div class="alert alert-info fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div
Bootstrap Buttons:
---------------------------
Bootstrap provides 7-styles with diff colors of buttons:
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
-<button type="button" class="btn btn-default">
- Media queries for response web design
