Pages

Showing posts with label bootstrap. Show all posts
Showing posts with label bootstrap. Show all posts

Thursday 8 October 2015

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 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