--摘自--百度百科
准备工作:
1、去官网下载bootstrap文件 http://v3.bootcss.com/getting-started/
2、网站引用bootstrap文件
注意:bootstrap脚本是建立在jquery基础上的,在引用bootstrap.min.js前需引用jquery,jquery版本支持1.9.1以上版本。
一:导航栏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
< nav class="navbar
navbar-inverse navbar-fixed-top" role="navigation"> < div class="container"> < ul class="nav
nav-pills" > < li class="dropdown"> < a class="dropdown-toggle"
data-toggle="dropdown" href="#">首页 < span class="caret"></ span ></ a > < ul class="dropdown-menu"> < li >< a href="#">Home</ a ></ li > < li >< a href="#">Profile</ a ></ li > < li >< a href="#">Messages</ a ></ li > </ ul > </ li > < li >< a href="#">Home</ a ></ li > < li >< a href="#">Home</ a ></ li > < li >< a href="#">Home</ a ></ li > </ ul > </ div > </ nav > |
运行后效果为:
二:Carousel 轮播
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
< div id="myCarousel"
class="carousel slide" data-ride="carousel"> <!--轮播指标--> < 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 > <!--轮播项目--> < div class="carousel-inner"
role="listbox"> < div class="item
active"> < img src="../Img/xx.png"
/> < div class="container"> < div class="carousel-caption">标题1</ div > </ div > </ div > < div class="item"> < img src="../Img/xx.png"
/> < div class="container"> < div class="carousel-caption">标题2</ div > </ div > </ div > < div class="item"> < img src="../Img/xx.png"
/> < div class="container"> < div class="carousel-caption">标题3</ div > </ div > </ div > </ div > <!--轮播导航--> < a class="carousel-control
left" href="#myCarousel" data-slide="prev"> < span class="glyphicon
glyphicon-chevron-left"></ span > < span class="sr-only">Previous</ span > </ a > < a class="carousel-control
right" href="#myCarousel" data-slide="next"> < span class="glyphicon
glyphicon-chevron-right"></ span > < span class="sr-only">Next</ span > </ a > </ div > |
运行效果如图:
用法:
通过 data属性:使用data属性可以控制轮播的位置。
属性data-slide接受关键字prev或next,用来改变幻灯片相对于当前位置的位置。
使用data-ride="carousel"属性用于标记轮播在页面加载时就开始播放动画。
通过javascript:可以通过 $('.carousel').carousel()手动调用。
具体使用方法可以去bootstrap官网了解http://www.bootcss.com/