How we use bootstrap css, simple basics of bootstrap css,

Hello Guys,
Today we understandd the basics of bootstrap css. For download the bootstarp css refer this link. http://getbootstrap.com/.

Bootstrap is responsive css framework for develop responsive websites and mobile first projects on web.

In bootstrap responsive framework their is four major classes which is added on any div or section for control its width in responsive screen.

For eaxmple col-lg-12 up to col-lg-1 is classes used for control width on large screen monitor.
same as col-md-12 upto col-md-1 is classes used for control width in medium screen monitor
same as col-sm-12 upto col-sm-1 is classes used for control width in laptop screen and last one is col-xs-12 upto col-xs-1 is used for control width in mobile screen.

working area of these classes is differ from each other. maintained by container width.
Question: How we use bootstrap 3.0 in our project.

Answer: first download bootstrap 3.0 by clicking above link. Now create a simple html file on any html editor which you like most. I am ccomfortable with adobe dreamveaver. 

Now put bootstrap css ie. bootstrap.css in your css folder, and call this css by write this line in your head section.
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">

Their is two ways for change in bootstrap css either you directly work on main bootstrap css or make a simple blank stylesheet and change effects of css by taking parent class of that div.
I suggest you guys for second option because directly change in bootstrap css is typicla task for beginers and sometimes for experts.

when you go on bootstrap website you got a menu option 
1: Getting started
2:CSS
3:Components
4:Javascripts
5:Cusstomize

Now if you want to add a button in your website simple copy button code and paste in your html file
for example: <button type="button" class="btn btn-primary">Primary</button>
now if you want to change its color, background color simly take a parent class in which you placing your button code and change in css.

For example: <div class="avni_box"><button type="button" class="btn btn-primary">Primary</button></div>

Now button css will be
.avni_box .btn { color:#000; background-color:#333; font-size:12px; font-family:arial;}
same as applicable for all css attributes of bootstrap css section.

Same as applicable for Components section. In bootstrap 3.0 its provide built in navigation, navs, breadcrumbs, pagination, labels, button dropdowns, page header, progress bars etc.
Same as applicable for javascript section. For example if you want to add a slider in your web page. so click on carousel option than copy its default code and paste in div whose class name is slider or whatever you like for example 

<div class="slider_section"><div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div></div>

Comments

Popular posts from this blog