Bootstrap V2 Intro

Bootstrap Introduction

-- Learning not just technology, but dreams!

Home HTML JAVASCRIPT CSS VUE REACT PYTHON3 JAVA C C++ C# AI GO SQL LINUX VS CODE BOOTSTRAP GIT Local Bookmarks

Bootstrap Tutorial

Bootstrap CSS

Bootstrap Layout Components

Bootstrap Plugins

Bootstrap Others

Bootstrap Tutorial

Bootstrap 3 CSS Overview

Tip: You are currently viewing the Bootstrap 2.x version. For the Bootstrap 3.x version, click here.

Bootstrap Introduction

Objective

Bootstrap is the most popular front-end framework, and its third version (v3.0.0) has been released. This tutorial will get you started with Bootstrap 3.

You will also see how to customize the framework to make it distinct, such as creating layouts with the grid, creating navigation with nav, creating dropdowns with carousel, adding social plugins, and third-party plugins like Google Map.

View Demo

What is Bootstrap

Bootstrap is a front-end framework for rapid development of web applications and websites.

In modern web development, there are several components that are needed in almost every web project.

Bootstrap provides you with all these basic modules - Grid, Typography, Tables, Forms, Buttons, and Responsiveness.

In addition, there are many other useful front-end components, such as Dropdowns, Navigation, Modals, Typehead, Pagination, Carousel, Breadcrumb, Tab, Thumbnails, Headers, and so on.

With these, you can build a web project and make it run faster and easier.

Furthermore, since the entire framework is modular, you can customize it with your own CSS bits, or even a major overhaul after the project has started.

It is based on several best practices, and we believe it is a good time to start learning modern web development. Once you have mastered the basics of HTML and JavaScript/jQuery, you can apply this knowledge in web development.

Although there are criticisms that all projects built with Bootstrap look the same, and you can build a website without knowing much HTML + CSS. However, we need to understand that Bootstrap is a general-purpose framework, and like any other general-purpose thing, you need to customize it to make it unique. When you want to customize, you need to dig deeper, which is not feasible without a good foundation in HTML + CSS.

Of course, besides Bootstrap, there are many other good front-end frameworks. Which framework to use is the developer's choice, but Bootstrap is definitely worth a try.

Why use Bootstrap in your project?

Download and Understand the File Structure

You can download Bootstrap Version 3.0.0 from https://github.com/twbs/bootstrap/archive/v3.0.0.zip or https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist.zip. We are using the first one, but you can use the second one.

In addition, the code we provide for download includes a bootstrap code folder downloaded via the first link. This folder also contains the original css custom.css used to customize Bootstrap.

After unzipping, you will find some files and folders inside the root folder bootstrap-3.0.0.

The main CSS files - bootstrap.css and its minified version bootstrap-min.css, are located in the 'css' folder within the 'dist' folder under the root folder bootstrap-3.0.0.

Inside 'dist', there is a 'js' folder containing the main JavaScript file bootstrap.js and its minified version.

In the root folder, there is a separate 'js' folder containing different JavaScript plugins in different files.

Inside 'assets' in the root folder, you will find another 'js' folder. This contains html5shiv.js for HTML5 shim, used to get IE8 support. There is also a respond.min.js file for supporting media queries in IE8. This folder also contains jquery.js, which is a dependency for Bootstrap's js plugins.

In the same folder, there is an 'ico' folder containing favicon icons and various mobile device icons.

In the 'css' folder in the same path, there are css files for the documentation.

The '_includes' and '_layouts' folders contain some default layout structure files, which may be useful for rapid prototyping.

The 'less' folder in the root folder contains some .less files. These files will be useful if you are developing based on LESS.

In the root folder, there are some files. Some are HTML files for basic prototyping, some are for compilation based on Bower like bower.json, browserstack.json. Besides these, there is composer.json and a YAML file _config.yml.

In addition to downloading from the given links, you can also use the following command to compile all CSS and JS files -

$ bower install bootstrap

You can clone Bootstrap's Git repository

git clone git://github.com/twbs/bootstrap.git

In this tutorial, we have only downloaded the Zip file and are not using it.

Once you have learned this tutorial, we encourage you to install the framework via bower to understand how it works.

NetDNA supports compiled and minified versions of Bootstrap CSS, JS, and other theme css. You can reference them with the following statements

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

Developing with Bootstrap v3.0.0

Basic HTML

Here is the basic HTML structure that will be used for our project

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap V3 template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-->
      <script src="bootstrap-3.0.0/assets/js/html5shiv.js"></script>
      <script src="bootstrap-3.0.0/assets/js/respond.min.js"></script>
    <!-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
  </body>
</html>

Please note that the html5shiv.js and respond.min.js added to the template are for IE8 support. These files have been added in Bootstrap version 3.

We have placed the bootstrap-3.0.0 folder inside the twitter-bootstrap folder in the root folder of our web server. All HTML files we create will be placed inside twitter-bootstrap. This is mentioned to simplify our development process.

Customization

We will customize the CSS framework to make it distinct. So, without breaking the original CSS file (located in the dist folder of bootstrap-3.0.0), we will create a separate CSS file named custom.css in the same folder. Then, in our HTML file, we will reference this CSS file right after the original CSS file. This way, we can override the default styles we want to change, but if Bootstrap is upgraded, the original CSS file will also be updated without breaking our customization. We recommend you follow this method during development as well.

Creating Navigation

To create navigation, add the following code in your HTML file right after the opening body tag.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <ul class="nav navbar-nav">
  <li><a href="new.html" class="navbar-brand">
<img src="logo.png"></a></li>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="price.html">Price</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li class="socials"><g:plusone annotation="inline" width="150"></g:plusone></li>
          <li class="socials"><div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div></li>
          <li class="socials"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s);if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
       </ul>
      </li>
  </ul>
</nav>

For navigation, Bootstrap uses the 'navbar' class at the container level. So, it is assigned to the nav element that holds the entire navigation.

We have used the 'navbar-inverse' class to change the default color of the navbar, using a dark color instead of the previous default light color. The 'navbar-fixed-top' class ensures that when we scroll down the HTML page, the navbar remains fixed at the top position.

In Bootstrap V3.0.0, using role="navigation" when creating navigation is new. Bootstrap recommends this so that the navbar is accessible.

At this point, we have added 'padding-top: 80px;' to the body in our custom.css file. The pixel value you add as top padding to the body may vary, but unless you do this, the top part of the content after the navbar will be hidden.

Inside the container nav, we have an unordered list with classes 'nav' and 'navbar-nav'. Inside this unordered list, each list item contains a link in the navigation.

The 'navbar-brand' class is used to present the brand name. We have used an image. Since the image height is greater than the navbar baseline height, we have done some customization here. We increased the 'line-height' property of '.navbar-nav>li>a' from the default 20px to 50px, and changed the font size to 16px.

For the rightmost link, we have added a dropdown. For the 'dropdown' class added to the relevant li, followed by an anchor with the classes 'dropdown-toggle' and 'caret'. This anchor actually contains the anchor text 'social' in our project. This li contains an unordered list, and each list item nested in the list contains links that appear in the dropdown.

In the dropdown, we have added social plugins. The first li contains Google Plus markup, the second li contains Facebook markup, and the third li contains markup to display the Twitter button and some js scripts.

In addition, you must add the following markup and script after the opening body tag to make the Facebook button work

<div id="fb-root"></div>

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s);
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

To make the Twitter button work, we add the following script before the closing body tag

(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script'); s.parentNode.insertBefore(po, s);
  })();

We use the following styles to add some extra styling to the social buttons with the 'socials' class.

.socials {
padding: 10px;
}

This completes our navigation.

Creating a Slider with Carousel

To create a slider under the navbar on the homepage of our project, we will use the following markup

<div id="carousel-example-generic" class="carousel slide">
  <!-- 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="computer.jpg" alt="...">
      <div class="carousel-caption">
        <h1>Large Desktops are everywhere</h1>
        <p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
      </div>
    </div>
    <div class="item">
      <img src="mobile.jpg" alt="...">
      <div class="carousel-caption">
        <h1>Mobiles are outnumbering desktops</h1>
        <p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
      </div>
    </div>
<div class="item">
      <img src="cloud1.jpg" alt="...">
      <div class="carousel-caption">
        <h1>Enterprises are adopting Cloud computing fast</h1>
        <p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div>
</div>

In the Carousel, there are four parts. The main container is defined with a div tag with the class 'carousel slide'.

Then there is an ordered list with the class 'carousel-indicators'. Each list item in the ol represents a slide. When the page loads, the slide with the class 'active' is loaded by default. When rendered, you will see them as small circles below the title.

Then, each slide (image) is placed in a div tag with the class 'item'. Each item is nested in a div with the class 'carousel-caption'. The carousel-caption contains some markup that is displayed as a caption along with the image. The paragraph contains an h1 and a button, and you can include other markup of your own as well.

The last part is for controlling the next slide/previous slide. This is defined using the 'left' and 'carousel-control' classes for the previous, and 'right' and 'carousel-control' classes for the next.

The 'icon-prev' and 'icon-next' classes are used for the next and previous icons.

We have made some customizations in the default carousel. We want the caption, indicators, and next/previous icons to be rendered a few pixels above their default positions.

To do this, we add the following styles in our custom.css file

.carousel-inner .item .carousel-caption {
position:absolute;
top: 200px
}
.carousel-indicators {
position: absolute;
top: 400px;
}
.navbar {
margin-bottom:0;
}
.navbar-nav>li>a {
line-height: 50px;
font-size: 16px
}

We also customized the h1, adding a bottom margin of 30 pixels.

h1 {
  margin-bottom: 30px
  }

Responsive Images

You may have noticed that in each image in the slider, we have used the 'img-responsive' class. This is a new feature in Bootstrap v3.0.0. By using the 'img-responsive' class in the img tag, Bootstrap makes the image responsive.

Creating a Grid

Below the slider, we use a grid to place content. Start a grid with a div with the class 'container'. Please note that we are going to develop a responsive website, unlike previous versions of Bootstrap, where the container had a single class and was not responsive by default.

The container div nests several divs with the class 'row' (three in the first row, six in the second row) to create rows for the Bootstrap grid.

Each row has a div with the class 'col-x-y' to create columns. The value of x can be: xs for mobile devices, sm for tablets, md for laptops and smaller desktop screens, lg for large desktop screens. This is the first method. The value of y can be any positive integer, but the total number of columns in the grid must not exceed 12. In our project, for simplicity, we have used lg, but since we have done so, you might want to view the project site on a phone or tablet to compare.

In a later tutorial, we will have a complete tutorial on the Bootstrap grid system to explore its fascinating responsive features.

In this example, we want the three columns in the first row to have equal width, so we use 'col-lg-4' for all columns. In the second row, we want the six columns to have equal width, so we use 'col-lg-2' for all columns.

Here is the markup for the grid containing two rows, with three columns in the first row and six columns in the second row.

<div class="row barone">
<div class="col-lg-2">
<p><img src="//example.com/wp-content/uploads/2013/10/php.png"></p>
</div>
<div class="col-lg-2">
<p><img src="//example.com/wp-content/uploads/2013/10/mysql-logo.jpg"></p>
</div>
<div class="col-lg-2">
<p><img src="//example.com/wp-content/uploads/2013/10/javascript-logo.png"></p>
</div>
<div class="col-lg-2">
<p><img src="//example.com/wp-content/uploads/2013/10/java.jpg"></p>
</div>
<div class="col-lg-2">
<p><img src="//example.com/wp-content/uploads/2013/10/postgresql.png"></p>
</div>
</div>

We end the grid with an hr and a footer with the following markup

<hr>
<p>Copyright@2013-14 by ToDo App.</p>

Using Tables

In the price.html page of our project, we used tables to present

YouTip