Bootstrap3.0学习（一）

--摘自--百度百科

准备工作：

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/