1、轮播图
role、aria-xx属性,只跟语义相关。
修改id名,也可以用section等代替最外层div。该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图,bootstrap.js会自动为当前元素添加图片轮播的特效。
每一个li就是一个单独的控制点。data-target属性指定当前控制点控制的是哪一个轮播图,data-slide-to属性指当前的li元素绑定的是第几个轮播项。默认必须给其中某个li加上active,展示的时候就是焦点项目。
.carousel-inner是所有轮播项的容器盒子。
左右两个控制按钮,分别点击可以滚动到上一张和下一张。该a链接的href属性必须指向需要控制的轮播图ID,data-slide="prev"代表点击该链接会滚到上一张,设置为next则相反。
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 活动指示器,下面的小点 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- 轮播项 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption"></div> <!-- 每张图片的标题,可不用 -->
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption"></div>
</div>
</div>
<!-- 控制按钮 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
根据屏幕大小,选择大小不同的图片。
Bootstrap默认设置图片max-width:100%,想在一个较小屏幕下展示一个超宽的图片,并让图片居中显示。两种办法:换用背景图的方式,background-position: center center;background-size:cover;;使img元素绝对定位,left:50%,margin-left: -width/2。
图片响应式:各种终端都需要正常显示图片,移动端应该使用更小的图片,且随屏幕大小等比例变化。使用<img>。
如果大图时设置为<img>,如何实现cover?如果小图是设置为背景图片,如何实现高度随屏幕大小变化?下面是最优方案吗?
<!-- 轮播项 -->
<div class="carousel-inner" role="listbox">
<div class="item active" data-image-lg="img/slide_01_2000x410.jpg"
data-image-xs="img/slide_01_640x340.jpg"></div>
<div class="item" data-image-lg="img/slide_02_2000x410.jpg"
data-image-xs="img/slide_02_640x340.jpg"></div>
</div>
#main_ad>.carousel-inner>.item{
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
}
/* 当屏幕大于768时执行 */
@media (min-width:768px){
#main_ad>.carousel-inner>.item{
height:410px;
}
}
#main_ad>.carousel-inner>.item>img{
width:100%;
}
$(function(){
/* 根据屏幕大小决定显示大图还是小图 */
function resize(){
// 获取屏幕大小
var windowWidth=$(window).width();
// 判断屏幕大还是小
var isSmallScreen=windowWidth<768;
// 根据屏幕大小给item设置背景图
$("#main_ad>.carousel-inner>.item").each(function(index,item){
var $item=$(item);
// var imgSrc=isSmallScreen?$item.data("imageXs"):$item.data("imageLg");
var imgSrc=$item.data(isSmallScreen?"imageXs":"imageLg");
// 大图时设置为背景图片,固定高度且居中(小图也有)
$item.css("backgroundImage","url("+imgSrc+")");
// 小图时设置为内部的<img>,随窗口大小等比例变化
if(isSmallScreen){
$item.html('<img src="'+imgSrc+'" alt="">');
}else{
$item.html("");
}
});
}
// resize(); 用trigger()代替
$(window).resize(resize).trigger("resize"); // 当调整浏览器窗口大小时
});
对于移动端,手指滑动控制轮播图的切换。
/* 轮播图左滑右滑 */
// 获取轮播图容器
var $carousel=$(".carousel");
// 1.获取手指在轮播图元素上的滑动方向(左右)
var startX;
var endX;
var offset=50;
// 注册滑动事件
$carousel.on("touchstart",function(event){
// 获取触摸开始时手指所在坐标X
startX=event.originalEvent.touches[0].clientX;
});
$carousel.on("touchmove",function(event){
// 获取触摸结束时手指所在坐标X,通过重复给变量赋值
endX=event.originalEvent.touches[0].clientX;
});
$carousel.on("touchend",function(){
// 控制灵敏度,滑动超过一定像素才认为有滑动
var distance=Math.abs(startX-endX);
if(distance>offset){
// 2.根据滑动方向选择上一张或下一张
$(this).carousel(startX>endX?'next':'prev');
}
});
2、标签页、选项卡
添加.fade使标签淡入,.in使初始内容可见。
<div>
<!-- 选项卡标签:无序列表 -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- 选项卡面板 -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
<div role="tabpanel" class="tab-pane fade" id="messages">...</div>
<div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>
</div>
选项卡滚动、给导航条加横向滚动条、控制标签页的标签容器宽度。
1.给ul加一个容器,使该容器有横向滚动条;
2.动态设置ul的宽度,宽度是所有li内容宽度之和。
<div class="ul-wrapper">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
$(function(){
var $ulContainer=$(".nav-tabs");
// 获取所有子元素的宽度和
var width=30; // ul上有padding-left
$ulContainer.children().each(function(index,ele){
width+=ele.clientWidth; // 或$(ele).width()
});
// 如果当前ul宽度超出屏幕宽度,为ul设置宽度,显示横向滚动条
if(width>$(window).width()){
$ulContainer
.css("width",width+"px")
.parent().css("overflow-x","scroll");
}
});
3、工具提示tooltip
在元素上添加如下代码。且必须通过js初始化。
data-toggle="tooltip" data-placement="top" title="提示内容"
$(function () {
$('[data-toggle="tooltip"]').tooltip();
})
4、附加导航Affix
附加导航(Affix)插件允许指定 <div> 固定在页面的某个位置position:fixed。
如需向元素添加附加导航(Affix)行为,只需向需要监听的元素添加data-spy="affix"即可。使用偏移data-offset-来定义何时切换元素的锁定和移动。
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
...
</div>
5、模态框Modal
一个窗口,覆盖整个屏幕,屏幕的其它内容不能被点击。但对于Bootstrap,点击屏幕其它位置模态框被关闭。
模态框尽量作为body的直接子元素,建议放在html代码尾部。
<!-- 点击该元素触发模态框,不一定是<button> -->
<button type="button" data-toggle="modal" data-target="#myModal">触发模态框</button>
<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">模态框标题</h4>
</div>
<div class="modal-body">
<p>正文内容</p>
</div>
<div class="modal-footer"> <!-- 不用时可删除 -->
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>