About

eXTReMe Tracker
Home How To Make Progress Bar Using Bootstrap & PHP How To Make Progress Bar Using Bootstrap & PHP

How To Make Progress Bar Using Bootstrap & PHP


Progress Bar With Twitter Bootstrap in PHP

In this article I explain Progress Bars with Twitter Bootstrapping in PHP. A Progress Bar is a very simple. You can create them using the Twitter Bootstrap package and bootstrap2.0.3.css file. You can download the Twitter Bootstrapping file from the URL http://twitter.github.com/ otherwise you can download the full code of this article. After downloading this file you will put it in your PHP directory, then you will start the Progress Bar using this code. You can create a Progress Bar for loading and action status etcetera using the Twitter Bootstrap file.
 

Example

<html> 

  <head>  

    <title>Progress Bar</title> 

// this is you bootstrap2.0.3.css file 

    <link href="bootstrap.css" rel="stylesheet"> 

    <link href="twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet"> 

    <link rel="shortcut icon" href="twitter-bootstrap-v2/docs/examples/images/favicon.ico"> 

    <link rel="apple-touch-icon" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png"> 

    <link rel="apple-touch-icon" sizes="72x72" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png"> 

    <link rel="apple-touch-icon" sizes="114x114" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png"> 

  </head> 

  <body> 

    <div class="container"> 

    <div class="row"> 

    <div class="span5"> 

    <h3>Basic Progress Bar</h3> 

    <div class="progress"> 

    <div class="bar" style="width: 70%;"></div> 

  </div> 

    <h3>Striped Progress Bar</h3> 

    <div class="progress progress-striped"> 

    <div class="bar" style="width: 50%;"></div> 

    </div> 

    <h3>Animated progress barr</h3> 

    <div class="progress progress-striped active"> 

  <div class="bar" style="width: 70%;"></div> 

</div> 

    </div> 

    </div> 

    <hr> 

</div>

</body> 

</html>

Output

progress.jpg
In the next example I show the use of a Progress Bar with additional color.

Example

<html> 

  <head> 

    <title>Progress Bar with Additional Color</title>

// this is you bootstrap2.0.3.css file        

    <link href="bootstrap.css" rel="stylesheet">  

    <link href="twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet"> 

    <link rel="shortcut icon" href="twitter-bootstrap-v2/docs/examples/images/favicon.ico"> 

    <link rel="apple-touch-icon" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png"> 

    <link rel="apple-touch-icon" sizes="72x72" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png"> 

    <link rel="apple-touch-icon" sizes="114x114" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png"> 

  </head> 

  <body> 

  //start div container

    <div class="container">  

    <div class="row"> 

    <div class="span5"> 

    <h3>Progress Bars with additional colors</h3> 

    <div class="progress progress-info progress-striped" style="margin-bottom: 10px;"> 

    <div class="bar" style="width: 10%"></div> 

    </div> 

    <div class="progress progress-success progress-striped active" style="margin-bottom: 10px;"> 

    <div class="bar" style="width: 30%"></div> 

    </div> 

    <div class="progress progress-warning progress-striped" style="margin-bottom: 10px;"> 

    <div class="bar" style="width: 50%"></div> 

    </div> 

    <div class="progress progress-danger progress-striped active" style="margin-bottom: 10px;"> 

    <div class="bar" style="width: 70%"></div> 

    </div> 

    </div> 

    </div> 

    </div> 

   <hr> 

</div>

//end div container 

</body> 

</html> 

Output 

progress1.jpg
How To Make Progress Bar Using Bootstrap & PHP How To Make Progress Bar Using Bootstrap & PHP Reviewed by Unknown on 20:27 Rating: 5

No comments:

Subscribe to: Post Comments ( Atom )
Powered by Blogger.