随笔心得，【bootstrap实战项目第一节】初探bootstrap若干小技巧

2024-04-27 15:05:42

字体：大中小

来源：转载

供稿：网友

在做前端轮播图时，若图片宽度不够，可根据图片两端颜色，进行RGB背景设置，可协调<nav class="navbar navbar-default navbar-fixed-top"> <div class="container">这里container就是一个常用在width=100%;的div中居中显示 <div class="navbar-header"> <a href="#" class="navbar-brand">LOGO</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <div class="icon-bar"></div> <div class="icon-bar"></div> <div class="icon-bar"></div> </button>

</div>

这里的id被上面的data-target所绑定。也就是说，上面的按钮打开的既是这个id所包含的内容

<div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-right"> navbar-right将此ul内容靠container右显示 <li><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li> <li><a href="#"><span class="glyphicon glyphicon-list"></span> 首页</a></li> <li><a href="#"><span class="glyphicon glyphicon-fire"></span> 首页</a></li> <li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> 首页</a></li> </ul> </div> </div></nav>

<div id="myCarousel" class="carousel slide">slide可将左右设置成一个区块，向前向后 <ol class="carousel-indicators">加上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">加上carousel-inner将图片收起来，隐藏 <div class="item active"><img src="imgs/img1.jpg" alt="图片1"></div> <div class="item"><img src="imgs/img2.jpg" alt="图片2"></div> <div class="item"><img src="imgs/img3.jpg" alt="图片3"></div></div><a href="#myCarousel" data-slide="PRev" id="carousel-control-left" class="carousel-control left">&lsaquo;</a><a href="#myCarousel" data-slide="next" id="carousel-control-right" class="carousel-control right">&rsaquo;</a></div>不能再忘记要最先将jQuery导入<script src="js/jquery.min.js"></script><script src="js/bootstrap.min.js"></script><script> $(function() { //轮播图自动播放 $('#myCarousel').carousel({ //自动3秒播放 interval:3000, }) //将剪头垂直居中 $('.carousel-control').CSS('line-height',$('.carousel-inner img').height() + 'px'); $(window).resize(function(){resize即大小刷新时的动作，绑定这个匿名函数 var $height = $('carousel-inner img').eq(0).height()|| $('carousel-inner img').eq(1).height()|| $('carousel-inner img').eq(2).height(); $('.carousel-control').css('line-height',$height + 'px'); }); }); //每当图片轮播为active时，其图片大小均为0px, //这时第一张图片状态下，箭头位置没有问题。但是第二张图片会出问题因而我定义一个变量$height，接收三个图片里其大小不为0的值</script>

上一篇：RGraph 系列文章（三）：条状图文档

下一篇：Html5学习之旅(1)