The Levels of WordPress Users
May 3, 2014
Pellentes malesuada fames
May 5, 2014

Bootstrap Tutorial for Beginners – How to Use Bootstrap

mei42

Why Using Bootstrap?

Bootstrap framework is not new, even the latest version is 3.1.1 which support responsive design. Why do we need to know the CSS framework? Of course, because the framework is so complete, has a complete documentation. In addition it has the components and features as full explanation below.

mei41

Getting Started Using the Bootstrap

To use the bootstrap, download the Bootstrap first by visiting the homepage at http://getbootstrap.com. Files that are downloaded [boostrap.zip] is containing 3 folders assets of the bootstrap as shown below:

Here are the contents of the3 assets folder:

bootstrap/

├── css/

│   ├── bootstrap.css

│   ├── bootstrap.min.css

├── js/

│   ├── bootstrap.js

│   ├── bootstrap.min.js

├── img/

│   ├── glyphicons-halflings.png

│   ├── glyphicons-halflings-white.png

 

  1. css / bootstrap.css contains the basic styles (reset, layout, typography, buttons) bootstrap default.
  2. css / bootstrap-responsive.css contains  the settings of the responsive design. We can use them together with bootstrap.css so that the bootstrap design become responsive.
  3. css/bootstrap-min.css and
  4. css / bootstrap-responsive-min.css are the compressed version of bootstrap.css and bootstrap-responsive.css
  5. img/glyphicons-halflings.png and
  6. img / glyphicons-Halflings-white.png, is the icon that is used to bootstrap using the spriting techniques.
  7. js/bootstrap.js dan
  8. js/bootstrap-min.js is javascript to enable various features of the bootstrap default.

Create an index.html file and copy the following script

<!DOCTYPE html>

<html>

<head>

 <meta charset=”utf-8″>

 <title>My First Bootstrap project</title>

</head>

<body>

</body>

</html>

 

add a link to “bootstrap.css” file in the css folder in <head> tag and include the javascript files in the end of <body> tag.

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>Test Bootstrap project</title>

<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”>

</head>

<body>

<!– Javascript files have to be included in the bottom in order to increase the web performance –>

<script src=”http://code.jquery.com/jquery-1.10.1.min.js”></script>

<script src=”js/bootstrap.js”></script>

</body>

</html>

 

We will start designing. But just before it, remember in mind that the bootstrap using 12 grids, to divide these grids we will use the “span”, eg: if you want to create a menu beside the contents, we can divide it become “span4” for the menu and the “span 8” for content. We will make:

  1. Header
  2. Marketing Area
  3. Leftside bar with Content Areas in a row
  4. Footer will be divided into 2 parts

 

Add this in <body> above javascript files.

<div class=”container”>

<h1><a href=”#”>Bootstrap Site</a></h1>

  <div class=”navbar”>

<div class=”navbar-inner”>

<div class=”container”>

<ul class=”nav”>

<li class=”active”><a href=”#”>Home</a></li>

<li><a href=”#”>Projects</a></li>

<li><a href=”#”>Services</a></li>

<li><a href=”#”>Downloads</a></li>

<li><a href=”#”>About</a></li>

<li><a href=”#”>Contact</a></li>

</ul>

</div>

</div>

</div>

</div> 

 

Write this coding into the div “container”, not outside.

<div class=”hero-unit”>

<h1>Marketing stuff!</h1>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>

<a href=”#” class=”btn btn-large btn-success”>Get Started</a>

</div>

 

 

putracode
putracode
Welcome to Wordpress Mind! We aim to be a source of quality information free WordPress themes for WordPress lovers all around the world.

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA HERE * Time limit is exhausted. Please reload the CAPTCHA.