Bootstrap
The main idea of this article is to outlines the content of
bootstrap that is required to be learnt to initiate the journey of learning of
Bootstrap. It will help in quickly learning the concepts of bootstrap and you
can further explore the advance concepts on bootstrap, but this article will provide
the very basic concept to start with. I
will add another article to cover the additional topic related to bootstrap.
Grids
Arranging the content on the page, it provide the structure
for arranging content. Grids can be classified in following categories:
Simple
Grids
- Row:
- Span1 to span12: define columns
Columns
are assigned fixed pixel value. If screen size changes the column value will
not change rather it will add horizontal scroll bar.
If you want the all the div inside the base div have same size. We have
to fix the size of all the div, so that when we make the browser screen small
the horizontal scroll bar should appear rather than adjusting the div on the
screen
- Container:
Fluid
Grids
Columns grids are not assigned
pixel value rather than they are assigned percentage value. This will not show
the horizontal scroll bar if the screen size changes. It even adjusts the
content in the div to adjust the screen size.
- Row-fluid: -fluid”>
-fluid
Responsive web designing
It helps to interact according to the environment the
website is being displayed. Responsive web design adjusts the website according
to the device size, eg, mobile, tab, desktop etc.
You just need to add the bootstrap responsive web design
scripts along with the bootstrap core script on the website.
If a web page contains the fixed grid and the bootstrap
responsive script is added to that webpage, the web page will be converted in too
responsive and the properties of fixed grid will be over written, i.e no scroll
bar will appear if the web page is accessed in smaller screen.
Note: Above mentioned scripts are part of bootstrap download.
Responsive web design
helpful classes
Responsive web design includes some the classes that are
helpful to hide or unhide the content of the element based on the device the
web site is being opened.
- Visible-phone: content should only display on phone.
- Visible-tablet: content should only display on tablet.
- Visible-desktop: content should only display on desktop.
- Hidden-phone: content should not be displayed on phone.
- Hidden-tablet: content should not be displayed on tablet.
- Hidden-desktop: content should not be displayed on desktop.
Bootstrap classes to learn
Arrangement: Bootstrap provide default style and text that
make page look pleasant and will attract more customer. Below are some of the default
set of classes that are present in bootstrap
Text
classes
·
Lead class: emphasize text
·
Muted: muted text
·
Text-success: Success message
·
Text-error: Error message
·
Text-warning: Warning message
·
Text-info: Information message
Elements
·
Abbr:
CPU
·
Address:
·
Blockquote:
to put text someone has quoted. Use pull-right class to display text on right side of screen.
·
List:
o
Unordered List:
o
Ordered
List:
o
Definition List:
- Heading</>
- Description of heading goes here
·
Code:
Table
Added feature for table you have many table
related classes that will help to enhance the table structure in web page. Below
are some of the classes:
·
Table
·
Table-hover
·
Table-stripped
Etc.
