Pages

Thursday, 8 October 2015

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