Bootstrap实用方法-前端实例代码

!DOCTYPE htmlhtmlheadtitleTry v1.2 Bootstrap Online/titlelink href=/bootstrap/css/bootstrap.min.css rel=stylesheet

编程学习网为您整理以下代码实例，主要实现：Bootstrap实用方法，希望可以帮到各位朋友。

<!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 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 = "/bootstrap/images/slIDe1.png" alt = "First slIDe">
      </div>

      <div class = "item">
         <img src = "/bootstrap/images/slIDe2.png" alt = "Second slIDe">
      </div>

      <div class = "item">
         <img src = "/bootstrap/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>

基础教程推荐