Skip to main content

Bootstrap Tour


History
Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.

Bootstrap was created at Twitter in mid-2010. Prior to being an open-sourced framework, Bootstrap was known as Twitter Blueprint. A few months into development, Twitter held its first Hack Week and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.

Team

Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.

Best link of bootstrap website :

http://getbootstrap.com

and about tour related best link :

http://bootstraptour.com/

Bootstrap Tour
Bootstrap Tour is an easy to configure site tour wizard based on Twitter Boostrap and inspired by Joyride.Bootstrap Tour is MIT-licensed and absolutely free to use.

Demo Link :
http://freeteachnology.hol.es/BootstrpTour/

Link :
https://drive.google.com/open?id=0BxmTZPVcu72fb2NxM0VrZ3c1RVk

Documentation
Bootstrap Tour is inspired by Joyride and relies on a similar structure for the tour markup.

Add Bootstrap Tour to your page

Add the dependencies
If you are using Bootstrap, include bootstrap-tour.min.css and bootstrap-tour.min.js:

<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-tour.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tour.min.js"></script>


Setup your tour:


// Instance the tour
var tour = new Tour({
  steps: [
  {
    element: "#my-element",
    title: "Title of my step",
    content: "Content of my step"
  },
  {
    element: "#my-other-element",
    title: "Title of my step",
    content: "Content of my step"
  }
]});

// Initialize the tour
tour.init();

// Start the tour
tour.start();


Global options


var tour = new Tour({
  name: "tour",
  steps: [],
  container: "body",
  smartPlacement: true,
  keyboard: true,
  storage: window.localStorage,
  debug: false,
  backdrop: false,
  backdropContainer: 'body',
  backdropPadding: 0,
  redirect: true,
  orphan: false,
  duration: false,
  delay: false,
  basePath: "",
  template: "<div class='popover tour'>
    <div class='arrow'></div>
    <h3 class='popover-title'></h3>
    <div class='popover-content'></div>
    <div class='popover-navigation'>
        <button class='btn btn-default' data-role='prev'>« Prev</button>
        <span data-role='separator'>|</span>
        <button class='btn btn-default' data-role='next'>Next »</button>
    </div>
    <button class='btn btn-default' data-role='end'>End tour</button>
  </div>",
  afterGetState: function (key, value) {},
  afterSetState: function (key, value) {},
  afterRemoveState: function (key, value) {},
  onStart: function (tour) {},
  onEnd: function (tour) {},
  onShow: function (tour) {},
  onShown: function (tour) {},
  onHide: function (tour) {},
  onHidden: function (tour) {},
  onNext: function (tour) {},
  onPrev: function (tour) {},
  onPause: function (tour, duration) {},
  onResume: function (tour, duration) {},
  onRedirectError: function (tour) {}
});


following exmaple of boostrap tour make sure create following file structure :
1-header.php,
2-footer.php,
3-index.php,
4-bootstrap-tour.js,
5-bootstrap-tour.css,


1-header.php :
header.php include link of bootstrap ,

Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Bootstrap Tour without writing code</title>
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
   <link href="error.css" rel="stylesheet">
   <script   src="https://code.jquery.com/jquery-3.1.1.js"   integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="   crossorigin="anonymous">
   </script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link href="bootstrap-tour.css" rel="stylesheet">
    <script src="bootstrap-tour.js"></script>
</head>
<body>
<!-- start:header -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid" id="freeteachnology">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">     
      <a class="navbar-brand" href="#">Free Teachnology</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home <span class="sr-only"></span></a></li>
        <li><a href="#">About us</a></li>   
        <li><a href="#">Contact us</a></li>         
      </ul>
      </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


2-footer.php : file include social link and name of who developed.
Code: 



<!-- Start::footer  -->
<footer>
        <div class="footer footer-bottom">
        <div class="container">
            <p class="pull-left"> Copyright © <?php echo date('Y');?>. Design and Develop by - Disuza Jen. </p>
            <div class="pull-right">
                <ul class="nav nav-pills payments">
                    <li>
                    <a  target="blank" href="https://www.facebook.com/profile.php?id=100011576444095">
                    <i class="fa fa-facebook"></i></a>
                    </li>
                    <li>
                    <a target="blank"  href="https://plus.google.com/116407769803493244155">
                    <i class="fa fa-google"></i></a>
                    </li>
                    <li>
                         <a target="blank"  href="https://twitter.com/disuzajen1">
                         <i class="fa fa-twitter"></i></a></li>
                    <li>
                        <a target="blank" href="https://plus.google.com/116407769803493244155">
                    <i class="fa fa-link"></i>
                    </a>
                    </li>
                </ul> 
            </div>
        </div>
    </div>
    <!--/.footer-bottom--> 
</footer>
<!-- End::footer  -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
</body>
</html>
<script>
$(document).ready(function(){

// Instance the tour
var tour = new Tour({
  debug: true,
  storage: false,

  steps: [
    {
    element: "#freeteachnology",
    title: "User: Disuza Jen",
    content: "freeteachnology of step",
    placement: "bottom",
     backdrop: true,
  },
  {
    element: "#freeteachnology1",
    title: "User: Disuza Jen 1",
    content: "freeteachnology of step 1",
    placement: "right",
     backdrop: true,
  },
  {
    element: "#freeteachnology2",
       title: "User: Disuza Jen 2",
    content: "freeteachnology of my step 2",
    placement: "top", 
     backdrop: true,
  } ,
  {
    element: "#freeteachnology3",
       title: "User: Disuza Jen 3",
    content: "freeteachnology of my step 3",
    placement: "right",  
     backdrop: true,

  }
  ,
  {
        element: "#freeteachnology4",
        title: "User: Disuza Jen 4",
        content: "freeteachnology of my step 4",
        placement: "bottom",    
         backdrop: true,
  } 
],
  });

if (tour.ended()) {
  tour.restart();
} else {
  tour.init();
  tour.start();
}
});

</script>
above file include javascript code of bootstrap tour

3-index.php :

index.php file include show user profile as per user id wise seprate ,if index.php page load show tour as initialise in javascript ,

Code :



 

<?php include('header.php');?>
<!-- end:header -->
<br><br><br>
<div class="cleafix"></div>
<div class="container">
<div class="alert alert-info">
    <strong>Hi..</strong> Bootstrap Tour without writing code
</div>
       <div class="alert alert-warning">
        <a href="https://drive.google.com/open?id=0BxmTZPVcu72fb2NxM0VrZ3c1RVk" class="btn btn-xs btn-warning pull-right" target="blank();">Click</a>
        <strong> Code download link-</strong>
    </div>
     <br><br>  
 </div>
<div class="container">
    <div class="row" id="appSettings">
        <div class="col-xs-12 col-sm-6 col-md-6" >
            <div class="well well-sm" >
                <div class="row" id="freeteachnology1">
                    <div class="col-sm-6 col-md-4">
                        <img src="disuza.jpg" alt="" class="img-rounded img-responsive" />
                    </div>
                    <div class="col-sm-6 col-md-8">
                        <h4>
                            Disuza Jen</h4>
                        <small><cite title="San Francisco, USA">Disuza Jen,INDIA  <i class="glyphicon glyphicon-map-marker">
                        </i></cite></small>
                        <p>
                            <i class="glyphicon glyphicon-envelope"></i>disuzajen@gmail.com
                            <br />
                            <i class="glyphicon glyphicon-globe"></i><a href="http://freeteachnology.blogspot.in/">http://freeteachnology.blogspot.in/</a>
                            <br />
                            <i class="glyphicon glyphicon-gift"></i>May 07, 1989</p>
                        <!-- Split button -->                       
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6" id="my-other-element"> 
            <div class="well well-sm" >
                <div class="row" id="freeteachnology2">
                    <div class="col-sm-6 col-md-4">
                        <img src="disuza.jpg" alt="" class="img-rounded img-responsive" />
                    </div>
                    <div class="col-sm-6 col-md-8">
                        <h4>
                            Disuza Jen</h4>
                        <small><cite title="San Francisco, USA">Disuza Jen,INDIA  <i class="glyphicon glyphicon-map-marker">
                        </i></cite></small>
                        <p>
                            <i class="glyphicon glyphicon-envelope"></i>disuzajen@gmail.com
                            <br />
                            <i class="glyphicon glyphicon-globe"></i><a href="http://freeteachnology.blogspot.in/">http://freeteachnology.blogspot.in/</a>
                            <br />
                            <i class="glyphicon glyphicon-gift"></i>MAy 07, 1989</p>
                        <!-- Split button -->                       
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6">
            <div class="well well-sm">
                <div class="row" id="freeteachnology3">
                    <div class="col-sm-6 col-md-4">
                        <img src="disuza.jpg" alt="" class="img-rounded img-responsive" />
                    </div>
                    <div class="col-sm-6 col-md-8">
                        <h4>
                            Disuza Jen</h4>
                        <small><cite title="San Francisco, USA">Disuza Jen,INDIA  <i class="glyphicon glyphicon-map-marker">
                        </i></cite></small>
                        <p>
                            <i class="glyphicon glyphicon-envelope"></i>disuzajen@gmail.com
                            <br />
                            <i class="glyphicon glyphicon-globe"></i><a href="http://freeteachnology.blogspot.in/">http://freeteachnology.blogspot.in/</a>
                            <br />
                            <i class="glyphicon glyphicon-gift"></i>May 07, 1989</p>
                        <!-- Split button -->                      
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6">
            <div class="well well-sm">
                <div class="row" id="freeteachnology4">
                    <div class="col-sm-6 col-md-4">
                        <img src="disuza.jpg" alt="" class="img-rounded img-responsive" />
                    </div>
                    <div class="col-sm-6 col-md-8">
                        <h4>
                            Disuza Jen</h4>
                        <small><cite title="San Francisco, USA">Disuza Jen,INDIA <i class="glyphicon glyphicon-map-marker">
                        </i></cite></small>
                        <p>
                            <i class="glyphicon glyphicon-envelope"></i>disuzajen@gmail.com
                            <br />
                            <i class="glyphicon glyphicon-globe"></i><a href="http://freeteachnology.blogspot.in/">http://freeteachnology.blogspot.in/</a>
                            <br />
                            <i class="glyphicon glyphicon-gift"></i>May 07, 1989</p>
                        <!-- Split button -->                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</br>
<?php include('footer.php');?>


4-bootstrap-tour.js and bootstrap-tour.css : it file includes code of boostrap , i hope that my code you like and enjoy , if you like please comment and feedback me Thanks,

Labels:

Comments

Post a Comment

Popular posts from this blog

using PDO database connection add,update,delete,edit operation

PDO advantage : 1-Object Oriented 2-Bind parameters in statements (security) 3-Allows for prepared statements and rollback functionality (consistency) 4-Throws catcheable exceptions for better error handling (quality) 5-Exception mode; no need to check error state after each API call. It's best to tell PDO how you'd like the data to be fetched. You have the following options: 1-PDO::FETCH_ASSOC: returns an array indexed by column name. 2-PDO::FETCH_BOTH: (default):returns an array indexed by both column name and number. 3-PDO::FETCH_BOUND:Assigns the values of your columns to the variables set with the ->bindColumn() method. 4-PDO::FETCH_CLASS: Assigns the values of your columns to properties of the named class. It will create the properties if matching properties do not exist. 5-PDO::FETCH_INTO:Updates an existing instance of the named class. 6-PDO::FETCH_LAZY: Combines. 7-PDO::FETCH_BOTH/PDO:FETCH_OBJ, creating the object variable names as t...
Post a Comment
Read more

Profile Share Fixing the Thumbnail Image, Title and Description for Shared Links

Profile Share Fixing the Thumbnail Image, Title and Description for Shared Links user want to share any information then use following code  and read step by step Profile Share Fixing the Thumbnail Image, Title and Description for Shared Links if you want share profile on following social link : 1-Facebook 2-twitter.com 3-LinkedIn 4-google +, Code link : https://drive.google.com/open?id=1IzTZZh_0euDqFSHL_vPRiQePlNTw3h-q Demo link : http://freeteachnology.hol.es/socialshare/ To modify a page's thumbnail image, description, and additional metadata for these services, you can provide meta tags in the HTML code of the page.Implementing Open Graph Meta Tags You can implement meta tags in a number of ways. In content management systems might  be allow you to modify a page's meta tags , then use following code in meta section of your project code, <link href="bootstrap.min.css" rel="stylesheet"> <link href="bootstrap-tour.m...
Post a Comment
Read more

GUID for globally unique identifier

How to create GUID in php 1-guid stands for globally unique identifier generally used to create random unique strings in php, create access token in php 2-Mostly use of GUID for generating access token, generate unique id, generating unique string in php. Using this article how to create guide in php you can create a random string for any use to keep unique 3-GUID consists of alphanumeric characters only and is grouped in five groups separated by hyphens as seen in this example: 3F2504E0-4F89-11D3-9A0C-0305E82C3301 Eg:- <?php /** * Generate Globally Unique Identifier (GUID) * E.g. 2EF40F5A-ADE8-5AE3-2491-85CA5CBD6EA7 * * @param boolean $include_braces Set to true if the final guid needs * to be wrapped in curly braces * @return string */ function generateGuid($include_braces = false) { if (function_exists('com_create_guid')) { if ($include_braces === true) { return com_create_guid(); } else { return substr(com_cr...
2 comments
Read more