澳门威利斯人_威利斯人娱乐「手机版」

来自 威利斯人娱乐 2019-06-22 10:41 的文章
当前位置: 澳门威利斯人 > 威利斯人娱乐 > 正文

bootstrap实现Carousel旋转木马

引进bootstrap相关文书后,在html中写如下代码:

 1 <div class="col-lg-9" >
 2                     <!-- Carousel====================== -->
 3                     <div id="myCarousel" class="carousel slide" data-ride="carousel">
 4                         <!-- Indicators -->
 5                         <ol class="carousel-indicators">
 6                             <li data-target="#myCarousel" data-slide-to="0" class=""></li>
 7                             <li class="active" data-target="#myCarousel" data-slide-to="1"></li>
 8                             <li data-target="#myCarousel" data-slide-to="2"></li>
 9                         </ol>
10                         <div class="carousel-inner" role="listbox">
11                             <div class="item">
12                                 <img
13                                     src="http://gallery.myweb.com/547fcba0498e14c8d87c366e/547fd098498e14c8d87c369e.jpg"
14                                     alt="First slide">
15                                 <div class="container">
16                                     <div class="carousel-caption">
17                                     <%--     <h1>Example headline.</h1>
18                                         <p>
19                                             Note: If you're viewing this page via a
20                                             <code>file://</code>
21                                             URL, the "next" and "previous" Glyphicon buttons on the left
22                                             and right might not load/display properly due to web browser
23                                             security rules.
24                                         </p>
25                                         <p>
26                                             <a class="btn btn-lg btn-primary" href="#" role="button">Sign
27                                                 up today</a>
28                                         </p> --%>
29                                     </div>
30                                 </div>
31                             </div>
32                             <div class="item active">
33                                 <img
34                                     src="http://gallery.myweb.com/547fd2e3498e14c8d87c374f/547fd2ed498e14c8d87c3750.jpg"
35                                     alt="Second slide">
36                                 <div class="container">
37                                 <!--     <div >
38                                         <h1>Another example headline.</h1>
39                                         <p>Cras justo odio, dapibus ac facilisis in, egestas eget
40                                             quam. Donec id elit non mi porta gravida at eget metus.
41                                             Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
42                                         <p>
43                                             <a    role="button">Learn
44                                                 more</a>
45                                         </p>
46                                     </div> -->
47                                 </div>
48                             </div>
49                             <div class="item">
50                                 <img
51                                     src="http://gallery.myweb.com/547f32a4498e92e126340dfc/547f3839498e92e126340dfd.jpg"
52                                     alt="Third slide">
53                                 <div class="container">
54                                     <div class="carousel-caption">
55                                         <!-- <h1>希望h1> -->
56                                         <!-- <p>努力奔跑躲避追赶,而全力奔跑不是为了甩掉包袱,而是守护梦想!</p> -->
57                                         <!-- <p>
58                                             <a    role="button">围观</a>
59                                         </p> -->
60                                     </div>
61                                 </div>
62                             </div>
63                         </div>
64                         <a class="left carousel-control" href="#myCarousel" role="button"
65                             data-slide="prev">  Previous
68                         </a> <a class="right carousel-control" href="#myCarousel"
69                             role="button" data-slide="next">  Next
72                         </a>
73                     </div>
74                     <!-- /.carousel -->
75 
76                 </div>

 

本文由澳门威利斯人发布于威利斯人娱乐,转载请注明出处:bootstrap实现Carousel旋转木马

关键词: 澳门威利斯人