Tutorialspoint

Bootstrap Default Pager

<!DOCTYPE html>
<html>
   <head>
      <title>Try v1.2 Bootstrap Online</title>
      <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <script src="/bootstrap/scripts/jquery.min.js"></script>
      <script src="/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <ul class="pager">
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
      </ul>
   </body>
</html>

Bootstrap Non-nav Links

<!DOCTYPE html>
<html>
   <head>
      <title>Try v1.2 Bootstrap Online</title>
      <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <script src="bootstrap/scripts/jquery.min.js"></script>
      <script src="/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <nav class = "navbar navbar-default" role = "navigation">
         <div class = "navbar-header">
            <a class = "navbar-brand" href = "#">TutorialsPoint</a>
         </div>
         <div>
            <p class = "navbar-text navbar-right">
               Signed in as 
               <a href = "#" class = "navbar-link">Thomas</a>
            </p>
         </div>
      </nav>
   </body>
</html>

Bootstrap Pills Navigation

<!DOCTYPE html>
<html>
   <head>
      <title>Try v1.2 Bootstrap Online</title>
      <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <script src="/bootstrap/scripts/jquery.min.js"></script>
      <script src="/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <p>Pills Example</p>
      <ul class="nav nav-pills">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">SVN</a></li>
         <li><a href="#">iOS</a></li>
         <li><a href="#">VB.Net</a></li>
         <li><a href="#">Java</a></li>
         <li><a href="#">PHP</a></li>
      </ul>
   </body>
</html>

Bootstrap Close Icon

<p>Close Icon Example
   <button type = "button" class = "close" aria-hidden = "true">
      &times;
   </button>
</p>
<input type="button" class="close" aria-hidden="true" />

Bootstrap Close Icon

<!DOCTYPE html>
<html>
   <head>
      <title>Try v1.2 Bootstrap Online</title>
      <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <script src="/scripts/jquery.min.js"></script>
      <script src="/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <p>Close Icon Example
      <button type = "button" class = "close" aria-hidden = "true">
      &times;
      </button>
      </p>
      <p><input type="button" class="close" aria-hidden="true" name="&times"/></p>
   </body>
</html>

Bootstrap Responsive Column Resets

<!DOCTYPE html>
<html>
   <head>
      <title>Try v1.2 Bootstrap Online</title>
      <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <script src="/scripts/jquery.min.js"></script>
      <script src="/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class="container">
         <div class="row" >
            <div class="col-xs-6 col-sm-3" 
               style="background-color: #dedef8;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
            <div class="col-xs-6 col-sm-3" 
               style="background-color: #dedef8;box-shadow: 
               inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
                  enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                  nisi ut aliquip ex ea commodo consequat.
               </p>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
                  eiusmod tempor incididunt ut. 
               </p>
            </div>

            <div class="clearfix visible-xs"></div>

            <div class="col-xs-6 col-sm-3" 
               style="background-color: #dedef8;
               box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                  laboris nisi ut aliquip ex ea commodo consequat. 
               </p>
            </div>
            <div class="col-xs-6 col-sm-3" 
               style="background-color: #dedef8;box-shadow: 
               inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
                  enim ad minim 
               </p>
            </div>
         </div>
      </div>
   </body>
</html>

Bootstrap Affix Plugin Example

<!DOCTYPE html>
<html>
   <head>
      <title>Try v1.2 Bootstrap Online</title>
      <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <script src="bootstrap/scripts/jquery.min.js"></script>
      <script src="/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class = "container">
         <div class = "jumbotron">
            <h1>Bootstrap Affix Plugin example</h1>
         </div>
         <div>
            <div class = "col-md-3">
               <ul class = "nav nav-tabs nav-stacked affix" id = "myNav">
                  <li class = "active"><a href = "#one">Tutorial One</a></li>
                  <li><a href = "#two">Tutorial Two</a></li>
                  <li><a href = "#three">Tutorial Three</a></li>
               </ul>
            </div>
            <div class = "col-md-9">
               <h2 id = "one">Tutorial One</h2>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
               Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, 
               dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus
               ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh 
               non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. 
               Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio 
               in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique 
               eget risus. Integer aliquet quam ut elit suscipit, id interdum 
               neque porttitor. Integer faucibus ligula.</p>

               <p>Vestibulum quis quam ut magna consequat faucibus. 
               Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum
               risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
               potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
               Phasellus auctor velit at lacus blandit, commodo iaculis justo
               viverra. Etiam vitae est arcu. Mauris vel congue dolor. 
               Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis,
               bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt
               dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu,
               hendrerit tellus.</p>
               <hr>
               <h2 id = "two">Tutorial Two</h2>
               <p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in
               sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris 
               quis dapibus orci. In dapibus velit blandit pharetra tincidunt.
               Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
               Sed viverra interdum bibendum. Donec ac sollicitudin dolor. 
               Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum 
               ligula sed consequat.</p>

               <p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem 
               convallis sed. Nam odio tortor, dictum quis malesuada at, 
               pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
               diam velit egestas lacus, quis fermentum metus ante quis urna. 
               Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis 
               parturient montes, nascetur ridiculus mus. Vestibulum bibendum 
               blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
               tincidunt ante. Vivamus sem augue, hendrerit non sapien in, 
               mollis ornare augue.</p>
               <hr>
               <h2 id = "three">Tutorial Three</h2>
               <p>Integer pulvinar leo id risus pellentesque vestibulum. 
               Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. 
               Donec sed nibh vitae lorem porttitor blandit in nec ante. 
               Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
               condimentum. Etiam in aliquam lectus. Nam vel sapien diam. 
               Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in 
               porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse 
               tincidunt risus quis dolor fringilla blandit. Ut sed sapien at
               purus lacinia porttitor. Nullam iaculis, felis a pretium ornare,
               dolor nisl semper tortor, vel sagittis lacus est consequat eros. 
               Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, 
               tincidunt sit amet mauris.</p>

               <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id
               lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis
               at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac,
               tincidunt fringilla massa. Etiam hendrerit dolor eget ante 
               rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel,
               semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies
               ac ligula. Pellentesque convallis  elit nisi, id vulputate ipsum
               ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse 
               potenti. Integer pellentesque neque et elementum tempus. 
               Curabitur bibendum in ligula ut rhoncus.</p>

               <p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo
               sed ligula porta semper eu quis enim. Pellentesque pellentesque,
               metus at facilisis hendrerit, lectus velit facilisis leo, quis 
               volutpat turpis arcu quis enim. Nulla viverra lorem elementum 
               interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
               Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
            </div>
         </div>
      </div>

      <script type = "text/javascript">
         $(function () {
            $('#myNav').affix({
               offset: {
                  top: 60  
               }
            });
         });
      </script>
   </body>
</html>

Bootstrap Affix Plugin

<!DOCTYPE html>
<html>
   <head>
      <title>Try v1.2 Bootstrap Online</title>
      <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <script src="bootstrap/scripts/jquery.min.js"></script>
      <script src="/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class = "container">
         <div class = "jumbotron">
            <h1>Bootstrap Affix Plugin example</h1>
         </div>
         
         <div id = "myNav"  data-spy = "affix" data-offset-top = "60" data-offset-bottom = "200">
         
            <div class = "col-md-3">
               <ul class = "nav nav-tabs nav-stacked affix" data-spy = "affix" data-offset-top = "190">
                  <li class = "active"><a href = "#one">Tutorial One</a></li>
                  <li><a href = "#two">Tutorial Two</a></li>
                  <li><a href = "#three">Tutorial Three</a></li>
               </ul>
            </div>
            
            <div class = "col-md-9">
               <h2 id = "one">Tutorial One</h2>
               
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                  Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
                  dapibus nec turpis vel, semper malesuada ante. Vestibulum 
                  id metus ac nisl bibendum scelerisque non non purus. Suspendisse 
                  varius nibh non aliquet sagittis. In tincidunt orci sit amet 
                  elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
                  aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum 
                  eu, tristique eget risus. Integer aliquet quam ut elit suscipit, 
                  id interdum neque porttitor. Integer faucibus ligula.</p>
                  
               <p>Vestibulum quis quam ut magna consequat faucibus. 
                  Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum 
                  risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
                  potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
                  Phasellus auctor velit at lacus blandit, commodo iaculis justo
                  viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget
                  mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat.
                  Maecenas mattis lectus enim, quis tincidunt dui molestie euismod.
                  Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
                  
               <hr>
               
               <h2 id = "two">Tutorial Two</h2>
               
               <p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in 
                  sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis 
                  dapibus orci. In dapibus velit blandit pharetra tincidunt. 
                  Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
                  Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed 
                  fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>
                  
               <p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem 
                  convallis sed. Nam odio tortor, dictum quis malesuada at, 
                  pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
                  diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at 
                  facilisis libero. Cum sociis natoque penatibus et magnis dis
                  parturient montes, nascetur ridiculus mus. Vestibulum bibendum 
                  blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
                  tincidunt ante. Vivamus sem augue, hendrerit non sapien in, 
                  mollis ornare augue.</p>
                  
               <hr>
               
               <h2 id = "three">Tutorial Three</h2>
               
               <p>Integer pulvinar leo id risus pellentesque vestibulum. 
                  Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. 
                  Donec sed nibh vitae lorem porttitor blandit in nec ante. 
                  Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada 
                  condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec
                  pharetra id arcu eget blandit. Proin imperdiet mattis augue in
                  porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse 
                  tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus
                  lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl
                  semper tortor, vel sagittis lacus est consequat eros. Sed id pretium
                  nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit 
                  amet mauris. </p>
                  
               <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante 
                  id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus
                  turpis at accumsan tincidunt. Phasellus risus risus,
                  volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit 
                  dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis, 
                  tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis 
                  pellentesque ultricies ac ligula. Pellentesque convallis  elit nisi, id 
                  vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse 
                  potenti. Integer pellentesque neque et elementum tempus. 
                  Curabitur bibendum in ligula ut rhoncus.</p>
                  
               <p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo 
                  sed ligula porta semper eu quis enim. Pellentesque pellentesque,
                  metus at facilisis hendrerit, lectus velit facilisis leo, quis
                  volutpat turpis arcu quis enim. Nulla viverra lorem elementum
                  interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
                  Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
            </div>
            
         </div>
      </div>
   </body>
</html>

Bootstrap Carousel Events

<!DOCTYPE html>
<html>
   <head>
      <title>Try v1.2 Bootstrap Online</title>
      <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <script src="bootstrap/scripts/jquery.min.js"></script>
      <script src="/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div id="myCarousel" class="carousel slide">
         <!-- Carousel indicators -->
         <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" 
               class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
         </ol>   
         <!-- Carousel items -->
         <div class="carousel-inner">
            <div class="item active">
               <img src="../images/slide1.png" alt="First slide">
            </div>
            <div class="item">
               <img src="../images/slide2.png" alt="Second slide">
            </div>
            <div class="item">
               <img src="../images/slide3.png" alt="Third slide">
            </div>
         </div>
         <!-- Carousel nav -->
         <a class="carousel-control left" href="#myCarousel" 
            data-slide="prev">&lsaquo;</a>
         <a class="carousel-control right" href="#myCarousel" 
            data-slide="next">&rsaquo;</a>
      </div> 
      <script>
         $(function(){
            $('#myCarousel').on('slide.bs.carousel', function () {
               alert("This event fires immediately when the slide instance method" 
                  +"is invoked.");
            });
         });
      </script>
   </body>
</html>

Bootstrap Carousel Methods

<!DOCTYPE html>
<html>
   <head>
      <title>Try v1.2 Bootstrap Online</title>
      <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <script src="bootstrap/scripts/jquery.min.js"></script>
      <script src="/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div id="myCarousel" class="carousel slide">
         <!-- Carousel indicators -->
         <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" 
               class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
         </ol>   
         <!-- Carousel items -->
         <div class="carousel-inner">
            <div class="item active">
               <img src="../images/slide1.png" alt="First slide">
            </div>
            <div class="item">
               <img src="../images/slide2.png" alt="Second slide">
            </div>
            <div class="item">
               <img src="../images/slide3.png" alt="Third slide">
            </div>
         </div>
         <!-- Carousel nav -->
         <a class="carousel-control left" href="#myCarousel" 
            data-slide="prev">&lsaquo;</a>
         <a class="carousel-control right" href="#myCarousel" 
            data-slide="next">&rsaquo;</a>
         <!-- Controls buttons -->
         <div style="text-align:center;">
            <input type="button" class="btn prev-slide" value="Previous Slide">
            <input type="button" class="btn next-slide" value="Next Slide">
            <input type="button" class="btn slide-one" value="Slide 1">
            <input type="button" class="btn slide-two" value="Slide 2">            
            <input type="button" class="btn slide-three" value="Slide 3">
         </div>
      </div> 
      <script>
         $(function(){
            // Cycles to the previous item
            $(".prev-slide").click(function(){
               $("#myCarousel").carousel('prev');
            });
            // Cycles to the next item
            $(".next-slide").click(function(){
               $("#myCarousel").carousel('next');
            });
            // Cycles the carousel to a particular frame 
            $(".slide-one").click(function(){
               $("#myCarousel").carousel(0);
            });
            $(".slide-two").click(function(){
               $("#myCarousel").carousel(1);
            });
            $(".slide-three").click(function(){
               $("#myCarousel").carousel(2);
            });
         });
      </script>
   </body>
</html>

1 2 3 4 5 6 7 ... 59 Next
Advertisements
Loading...