public/assets/bootstrap-rtl-3-3-4/examples/rtl/popovers.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="utf-8">
   5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
   6     <meta name="viewport" content="width=device-width, initial-scale=1">
   7     <meta name="description" content="">
   8     <meta name="author" content="">
   9     <link rel="shortcut icon" href="../../assets/ico/favicon.ico">
  10
  11     <title>Popover Template for Bootstrap</title>
  12
  13     <!-- Bootstrap core CSS -->
  14     <link href="../../bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  15     <!-- Bootstrap RTL theme -->
  16     <link href="../../dist/css/bootstrap-rtl.min.css" rel="stylesheet">
  17
  18     <!-- Custom styles for this template -->
  19     <link href="rtl.css" rel="stylesheet">
  20
  21   </head>
  22
  23   <body role="document">
  24
  25     <!-- Fixed navbar -->
  26     <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  27       <div class="container">
  28         <div class="navbar-header">
  29           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  30             <span class="sr-only">Toggle navigation</span>
  31             <span class="icon-bar"></span>
  32             <span class="icon-bar"></span>
  33             <span class="icon-bar"></span>
  34           </button>
  35           <a class="navbar-brand" href="#">Bootstrap theme</a>
  36         </div>
  37         <div class="navbar-collapse collapse">
  38           <ul class="nav navbar-nav">
  39             <li class="active"><a href="#">Home</a></li>
  40             <li><a href="#about">About</a></li>
  41             <li><a href="#contact">Contact</a></li>
  42           </ul>
  43         </div><!--/.nav-collapse -->
  44       </div>
  45     </div>
  46
  47     <div class="container theme-showcase" role="main">
  48       <form class="form-horizontal" role="form">
  49         <div class="form-group">
  50           <div class="col-sm-offset-2 col-sm-10">
  51             <button type="button" class="btn btn-default" data-placement="top" data-container="body" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Top Popover</button>
  52             <button type="button" class="btn btn-default" data-placement="bottom" data-container="body" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Bottom Popover</button>
  53             <button type="button" class="btn btn-default" data-placement="right" data-container="body" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Right Popover</button>
  54             <button type="button" class="btn btn-default" data-placement="left" data-container="body" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Left Popover</button>
  55           </div>
  56         </div>
  57       </form>
  58     </div> <!-- /container -->
  59
  60
  61     <!-- Bootstrap core JavaScript
  62     ================================================== -->
  63     <!-- Placed at the end of the document so the pages load faster -->
  64     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  65     <script src="../../bootstrap/dist/js/bootstrap.min.js"></script>
  66     <script type="text/javascript">
  67       $('button').popover();
  68     </script>
  69   </body>
  70 </html>