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制作子栏目资讯内容的想关代码,希望大家喜欢。