Bootstrap项目实战之子栏目资讯内容
本文我们制作一下子栏目资讯内容，供大家参考，具体内容如下
谷歌浏览器解析的顺序调整，需要全部加载后执行
$(window).load(function(){
$('.text').eq(0).css('margin-top',($('.auto').eq(0).height()-$('.text').eq(0).height())/2+'px');
});
注：对于Firefox浏览器，可以按Ctrl+Shift+M，调整移动端尺寸。
子栏目标题
<divclass="jumbotron"> <divclass="container"> <hgroup> <h1>资讯</h1> <h4>企业内训的最新动态、资源等...</h4> </hgroup> </div> </div>
栏目CSS
.jumbotron{
margin:50px000;
padding:60px0;
background:#cccurl(../img/bg.jpg);
color:#ccc;
}
.jumbotronh1{
font-size:26px;//768,30;992,33;1200,36;
padding:00020px;
}
.jumbotronh4{
font-size:16px;//768,16;992,17;1200,18
padding:00020px;
}
资讯内容
<divid="information"> <divclass="container"> <divclass="row"> <divclass="col-md-8info-left"> <divclass="container-fluid"style="padding:0;"> <divclass="rowinfo-content"> <divclass="col-md-5col-sm-5col-xs-5"> <imgsrc="img/info1.jpg" class="img-responsive"alt=""> </div> <divclass="col-md-7col-sm-7col-xs-7"> <h4>广电总局发布TVOS2.0华为阿里参与研发</h4> <pclass="hidden-xs"> TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。 </p> <p> admin15/10/11 </p> </div> </div> </div> </div> <divclass="col-md-4info-righthidden-xshidden-sm"> <blockquote> <h2>热门资讯</h2> </blockquote> <divclass="container-fluid"> <divclass="row"> <divclass="col-md-5col-sm-5col-xs-5" style="margin:12px0;padding:0;"> <imgsrc="img/info3.jpg" class="img-responsive"alt=""> </div> <divclass="col-md-7col-sm-7col-xs-7" style="padding-right:0"> <h4>标题</h4> <p> admin15/10/11 </p> </div> </div> </div> </div> </div> </div>
资讯内容CSS
#information{
padding:40px0;
background:#eee;
}
.info-right{
background-color:#fff;
box-shadow:2px2px3px#ccc;
}
.info-rightblockquote{
padding:0;
margin:0;
}
.info-righth2{
font-size:20px;
padding:5px;
}
.info-righth4{
line-height:1.6;
}
.info-content{
background-color:#fff;
box-shadow:2px2px3px#ccc;
margin:0020px0;
}
.info-contentimg{
margin:12px0;
}
.info-contenth4{
font-size:14px;//768,16;992,18;1200,20;
padding:2px000;
}
.info-contentp{
line-height:1.6;
color:#666;
}
对于.info-contenth4，在中屏和大屏需要保持一行。
.info-contenth4{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是Bootstrap制作子栏目资讯内容的想关代码，希望大家喜欢。