bootstrap栅格布局案例

html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
		<meta name="viewport" content="width=device-width, 
		initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="format-detection" content="telephone=no, email=no" />
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="css/index.css">
	</head>
	<body>
		<div class="container">
			<div id="header" class="row header">
				<div id="heaText" class="col-xs-12 col-sm-4 col-md-3 col-lg-8">
					welcome
				</div>
				<div class="pull-left pull col-xs-6 col-sm-4 col-md-3 col-lg-2">
					<div class="heaLeft">
						<button class="Left1 btn">
							DOOLAR
						</button>
						<button class="Left1">
							<span class="caret"></span>
						</button>
					</div>
				</div>
				<div class="pull-right pull col-xs-6 col-sm-4 col-md-3 col-lg-2">
                    <div class="heaRight pull-right">
						<button class="Left1">
							<span class="caret"></span>
						</button>
                    	<button class="Left1 btn">
                    		DOOLAR
                    	</button>                   	
                    </div>					
				</div>
			</div>
			<div class="row">
				<div id="box" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				</div>
			</div>
			<div class="show row">
				<div class="col-xs-4 col-sm-6 col-md-4 col-lg-4">
					<figure>
						<img src="image/abt-1.jpg" />
					</figure>
				</div>
				<div class="col-xs-4 col-sm-6 col-md-4 col-lg-4">
					<figure>
						<img src="image/abt-2.jpg" />
					</figure>
				</div>
				<div class="col-xs-4 col-sm-12 col-md-4 col-lg-4">
					<figure>
						<img src="image/abt-3.jpg" />
					</figure>
				</div>
			</div>
			<div class="anim row"> 
				<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
					<figure class="an1">
						<img src="image/abt-1.jpg">
					</figure>
				</div>
				<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
					<figure class="an2">
						<img src="image/abt-2.jpg">
					</figure>
				</div>
				<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
					<figure class="an3">
						<img src="image/abt-3.jpg">
					</figure>
				</div>
				<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
					<figure class="an4">
						<img src="image/abt-3.jpg">
					</figure>
				</div>
			</div>
			<footer>
				<div>
					<p>网站属于******所有</p>
				</div>
			</footer>
		</div>		
	</body>
	<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
</html>

css:

@charset "UTF-8";
*{
	margin: 0;
	padding:0;
	box-sizing:border-box;
}
body,ul,li,p{margin:0;padding:0;}
ul{list-style-type: none;}
button{border:0;outline:none;}
.header{
	height: 60px;
	background:#000000;
}
#heaText{
	height: 60px;
	line-height: 60px;
	background:#00A8f7;
	text-align: center;
	font-size: 40px;
	color: #FFFFFF;
	font-weight: bold;
}
.pull{
	color: #FFFFFF;
	background: #000000;
	height: 60px;
}
.heaLeft,.heaRight{
	margin-top: 16px;
}
.Left1{
	background: #000000;
}
/* 600px以下 */
@@media screen and (max-width:600px;) {
	.heaLeft{width: 100%;}	
}
/* 轮播图 */
#box {position:relative;width:100%;height:402px;margin:10px auto; }
#box .imgList{position:relative;width:100%;height:400px;overflow:hidden;}
#box .imgList li{position:absolute;top:0;left:0;width:100%;height:400px;}
#box .imgList li img{width: 100%}
#box .imgList li:nth-of-type(1){z-index: 999;}
#box .countNum{width: 130px;height: 23px;z-index: 9999;margin: 5px auto;}
#box .countNum li{
    width:30px;height:10px;float:left;color:#fff;
    background:#00f;text-align:center;
    margin-left:10px;cursor:pointer;opacity:0.7;
    filter:alpha(opacity=70);font-size: 20px;
}
#box .countNum li.current{
    background:#f60;font-weight:bold;
    opacity:1;filter:alpha(opacity=70);
}
@media screen and (max-width: 992px) {
    #box{width: 100%;height: 300px;}
    #box .imgList{width: 100%;height: 300px;}
    #box .imgList li{width: 100%;height: 300px;}
}
@media screen and (max-width: 767px) {
    #box{width: 100%;height: 241px;}
    #box .imgList{width: 100%;height: 241px;}
    #box .imgList li{width: 100%;height: 241px;}
}
@media screen and (max-width: 600px) {
    #box{width: 100%;height: 224px;}
    #box .imgList{width: 100%;height: 224px;}
    #box .imgList li{width: 100%;height: 224px;}
}
@media screen and (max-width: 560px) {
    #box{width: 100%;height: 190px;}
    #box .imgList{width: 100%;height: 190px;}
    #box .imgList li{width: 100%;height: 190px;}
}
@media screen and (max-width: 470px) {
    #box{width: 100%;height: 140px;}
    #box .imgList{width: 100%;height: 140px;}
    #box .imgList li{width: 100%;height: 140px;}
}
/* 轮播图下的图片 */
.show div{
	margin-top: 20px;
}
.show div figure{
	position: relative;
}
.show div figure img{
	width: 100%;
}
.anim{
	padding-top: 20px;
}
.anim div{
	padding-top: 20px;
}
.anim figure{
	width: 100%;
	position: relative;
	height: 200px;
	overflow: hidden;
}
/* 底部 */
footer{
	background: #FFFFFF;
}
footer div p{
	text-align: center;
	margin-top: 20px auto;
}

js:

function runImg(){}
runImg.prototype={
    bigbox:null,
    boxul:null,
    imglist:null,
    numlist:null,
    index:0,
    timer:null,
    play:null,
    imgurl:[],
    count:0,
    $:function(obj){
        if(typeof(obj)=="string"){
            if(obj.indexOf("#")>=0){
                obj=obj.replace("#","");
                if(document.getElementById(obj)){
                    return document.getElementById(obj);
                }else{
                    alert("没有容器"+obj);
                    return null;
                }
            }else{
                return document.createElement(obj);
            }
        }else{
            return obj;
        }
    },
    info:function(id) {
        this.count = this.count <= 5 ? this.count : 5;
        this.bigbox = this.$(id);
        for (var i = 0; i < 2; i++) {
            var ul = this.$("ul");
            for(var j=1;j<=this.count;j++){
                var li=this.$("li");
                li.innerHTML=i==0?this.imgurl[j-1]:"";
                ul.appendChild(li);
            }
            this.bigbox.appendChild(ul);
        }
        this.boxul=this.bigbox.getElementsByTagName("ul");
        this.boxul[0].className="imgList";
        this.boxul[1].className="countNum";
        this.imglist=this.boxul[0].getElementsByTagName("li");
        this.numlist=this.boxul[1].getElementsByTagName("li");
        this.numlist[0].className="current";
    },

    action:function(id){
        this.autoplay();
        this.mouseoverout(this.bigbox,this.numlist);
    },
    imgshow:function(num,numlist,imglist){
        this.index=num;
        var alpha=0;
        for(var i=0;i<numlist.length;i++){
            numlist[i].className="";
        }
        numlist[this.index].className="current";
        clearInterval(this.timer);
        for(var j=0;j<imglist.length;j++){
            imglist[j].style.opacity=0;
            imglist[j].style.filter="alpha(opacity=0)";
        }
        var $this=this;
        this.timer=setInterval(function(){
            alpha+=2;
            if(alpha>100){alpha=100}
            imglist[$this.index].style.opacity=alpha/100;
            imglist[$this.index].style.filter="alpha(opacity="+alpha+")";
            if(alpha==100){clearInterval($this.timer)}
        },20);
    },
//		//自动播放
    autoplay:function(){
        var $this=this;
        this.play=setInterval(function(){
            $this.index++;
            if($this.index>$this.imglist.length-1){$this.index=0}
            $this.imgshow($this.index,$this.numlist,$this.imglist);
        },2000)
    },
//		//处理鼠标事件
    mouseoverout:function(box,numlist){
        var $this=this;
        box.onmouseover=function(){
            clearInterval($this.play);
        };
        box.onmouseout=function(){
            $this.autoplay($this.index);
        };
        for(var i=0;i<numlist.length;i++){
            numlist[i].index=i;
            numlist[i].onmouseover=function(){
                $this.imgshow(this.index,$this.numlist,$this.imglist);
            }
        }
    }
};
window.onload=function(){
    var runimg=new runImg();
    runimg.count=3;
    runimg.imgurl=[
        "<img src='image/bnr-1.jpg'/>",
        "<img src='image/bnr-2.jpg'/>",
        "<img src='image/bnr-3.jpg'/>"];
    runimg.info("#box");
    runimg.action("#box");
};

图片=>地址

效果:

1200以上

990-1200:

770-990:

770以下:

  • 9
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值