Getting Started With Bootstrap Web Framework
What is Web
framework: Web framework is
collection of CSS and javascript function , used to simplify a particular
module. Bootstrap is the same, it consist of various pre-defined funtions and
CSS for creating a responsive layout.
Need For Framework: When you are working for any project , there
is a time limit of course and building a website completely from scratch might
be a time consuming and somewhat challenging. The layout of most of the web
based project are almost similar. For instance a website always has a header,
sidebar, footer and a place for content. So framework allows you to quickly use
the pre-defined javascript functions for a particular component of a website
like a meta slider or a navigation bar. Now based on the needs of a particular
user you could use which of the framework available on the internet are
required for your project. Like you could use a grid based framework for
designing just the grid layout or you could use more advance features for a
particular website, then you need a more robust framework.
Why Bootstrap : Bootstrap allows you to add and modify
the elements of the webpage quickly and effectively. It not only saves a lot of
time but also provide you professional website interface. The components are
also Responsive i.e. they changes their size dyanamically according to various
platforms like for mobile devices, you smaller buttons and slider images but
for 2k and 4k displays the components are automatically adjusted. Bootstrap
also provide full support for different current versions of web browsers
available. It allows you to quickly use either a grid layout feature or more
rich features based on your need.
Getting Started :
Download
• The fastest way to
get Bootstrap is to download the precompiled and ‘minified’ versions of its
CSS, JavaScript and fonts.
• Bootstrap source
code download includes the precompiled CSS, JavaScript, and font assets, along
with source LESS, JavaScript and documentation.
• You can also choose
which of the components you will be using in your development process and
download for the same from Bootstrap official website.
Your Hierarchy of project should look
like the image below:-
Now before jumping to our next development
section. Make a default HTML page with links to stylesheet and javascript to
your bootstrap frameworks as follows:
<head>
<link rel=”stylesheet” type=”text/css”
href=”css/bootstrap.min.css” media=”screen” />
<link rel=”stylesheet” type=”text/css”
href=”css/bootstrap-theme.min.css” media=”screen” />
</head>
and at the end of closing of body tag
just include jquery script and bootstrap javascript as follows:
<script
src=”http://code.jquery.com/jquery-2.1.0.min.js”></script>
<!-- You can also download jquery minified version and link
to it -->
<script src=”js/bootstrap.min.js”></script>
</body>
Navigation
Bar:
The most important component is the
nav bar in any website. It allows you to quickly navigate throught the pages.
Now lets look at
the code above. We have used navbar parent class with other classes called
'navbar-inverse' used for black background theme of navbar. Another class used
navbar-fixed-top that essentially fix your navbar on top even if you scroll
down. Now the <button> tag is used for generating the togglable menu
button as shown in mobile view.
Now navigation
brand name can be used for displaying header inside nav bar. You can also
customize the navbar settings by importing a new css file to your project and add
properties under .navbar class.
You can also use
class dropdown for displaying nice sliding dropdown effect. "data-toggle" is used for
allowing property of dropdown, collapsing, etc. inside any HTML tag.
Dropdown-menu is defined under the class name dropdown-menu. Another important advantage of using
bootstrap is that it provides a glyphicon (small image as bellow) which can be
used as class=”gyphicon glyphicon-glass” for glass glyphicon.
For more glyphicon
you can refer to bootstrap website.
Carousel
Slides:
This is one of the
mostly used components of the web sites these days. Bootstrap provides a nice
carousel slides for your web sites. Lets start coding.
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel"><div class="container">
<ol class="carousel-indicators">
<li class="active" data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<!--You can write anything here -->
</div>
<div class="item">
<!--You can write anything here -->
</div>
<div class="item">
<!--You can write anything here -->
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
We have declared an
id of "myCarousel" to target its element when needed. The class
"carousel" puts the slider with
slide properties. Data-ride is used to to auto-cycle the slide when its
finished one round. Ordered list item is used to show the dots to switch
between the slides. You can also customize these dots to adjust it according to
background.
Finally anchor tag
for pre and next slides is used to refer carousel id "myCarousel"
with data-slide tag to call next or pre slide
Grid
System:
Grid system is the
most powerful and useful component for aligning different section to a
paticular position. Bootstrap does it nicely and add a responsive layout for
the same.
<div class="row">
<div
class="col-sm-2"><p>This is section area 1</p></div>
<div
class="col-sm-4"><p>This is section area 2</p></div>
<div
class="col-sm-6"><p>This is section area 3</p> </div></div>
Class col-sm is divided into 12 equal
parts. You can define the different area for different columns in a row. For
equal length use class="col-sm-6", that clearly divide the layout
into 2 parts.
Button
Customization:
Bootstrap provides
a tons of button class to use your own customized buttons on your website .
Lets discuss some basic button classes.
<div class="btn-group">
<button type="button" class="btn
btn-default">Middle</button>
<button type="button" class="btn
btn-default">Right</button>
</div>
You can use class "btn-primary" for different style
of buttons in button group.
span with caret
class is used to create an arrow after the name Action. Class dropdown-toggle
has been used for drop down. Now we have to create a dropdown menu for showing
it up.You can also use a divider with this option.
There is more you
can do with Bootstrap like setting Jumbotron, Modal popup in the same window,
setting thumbnails,progress bar,etc. You can refer to documentation @
http://getbootstrap.com/components and See its
javascript components with example @
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment