How to make Tab using Bootstrap?

making tab in bootstrap is very simple, it just take a minute to understand this simple code...

<!--Start  tabs -->

<div>

  <ul class="nav nav-tabs" role="tablist">

    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>

    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>

    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>

    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>

  </ul>

  <!-- Tab panes -->

  <div class="tab-content">

    <div role="tabpanel" class="tab-pane active" id="home">hello babby</div>

    <div role="tabpanel" class="tab-pane" id="profile">...</div>

    <div role="tabpanel" class="tab-pane" id="messages">...</div>

    <div role="tabpanel" class="tab-pane" id="settings">...</div>

  </div>

</div>

<!--End  tabs -->

<script>

$('#myTabs a').click(function (e) {

  e.preventDefault()

  $(this).tab('show')

})

</script>

How to make Popup or Modal using Bootstrap?

try this very simple code to make a popup :

<!-- Start Button trigger modal -->

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

  Launch demo modal

</button>

<!-- Modal -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

        <h4 class="modal-title" id="myModalLabel">Modal title</h4>

      </div>

      <div class="modal-body">

        ...your text or form here…

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary">Save changes</button>

      </div>

    </div>

  </div>

</div>

<!-- End Button trigger modal -->

<script>

$('#myModal').on('shown.bs.modal', function () {

  $('#myInput').focus()

})

</script>

How to make ToolTip using Bootstrap?

The code to create tooltip by using bootstrap is as follows :

<!-- Start ToolTip -->

<div class="container">

  <h3>Tooltip Example</h3>

  <p>Tooltips are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the tooltip() method.</p>

  <a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover over me</a>

</div>

<!-- End ToolTip -->

<script>

$(function () {

  $('[data-toggle="tooltip"]').tooltip()

})

</script>

How to make Responsive Navigation using Bootstrap?

Try the code given below to start a navigation design.

<!-- Start Navigation -->

<nav class="navbar navbar-inverse">

  <div class="container-fluid">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>                       

      </button>

      <a class="navbar-brand" href="#">WebSiteName</a>

    </div>

    <div class="collapse navbar-collapse" id="myNavbar">

      <ul class="nav navbar-nav">

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

        <li class="dropdown">

          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">Page 1-1</a></li>

            <li><a href="#">Page 1-2</a></li>

            <li><a href="#">Page 1-3</a></li>

          </ul>

        </li>

        <li><a href="#">Page 2</a></li>

        <li><a href="#">Page 3</a></li>

      </ul>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>

        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

      </ul>

    </div>

  </div>

</nav>

<!-- End Navigation -->

How to make Responsive Design using Bootstrap?

   
Follow these basic steps to get started to bootstrap design.

       1.      Use DOC into head in HTM5 before start the <html> Tag

             <!DOCTYPE html>

2.       Add language into HTMl tag

<html lang="en">

3.       Use Meta information likes:

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1;maximum-scale=1.0, user-scalable=no"">               

4.       Download or use online CSS from Bootstrap:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

5.       Download or use online JS from Bootstrap:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

6. Download bootstrap from here

Master Page and IFrame

Master Page :

Master page reduces the code of a programmer because it comes with such features that we do not need to write the same code on many pages. If your website is using the same design on most of the pages than you can write the design code and programming on master page and place a content placeholder for other pages, by using this there is no need to write repetative codes. All the other pages are going to be shown in that content placeholder, you just simply need to call the master page on other pages.


IFrame :

Iframes are completely HTML part, it is also a very useful feature. If you are using the same kind of design an more than one page, than write the commom code on a separate page and call that page using iframe like this -

<iframe src="page.htm" height="55px" width="100%" frameborder="0"></iframe>

Note : Sometimes when we are using tree menu then we see that our master page gets refresh each time when we click on the menu and the menu goes in it's starting stage. To avoid these kind of problem it is usefull to use iframe by placing the menu in separate iframe.