Bootstrap项目实战之首页内容介绍(全)
本节课第一节我们轮播图的下方,设计一个内容介绍,内容介绍分两部分,本次为上半部分。
一.首页内容介绍
//关于上节课轮播图,手册上其实有一个更好的方案,并不需要通过额外的代码控制。 <ahref="#myCarousel"data-slide="prev"class="carousel-controlleft"><spanclass="glyphiconglyphicon-chevron-left"></span></a> <ahref="#myCarousel"data-slide="next"class="carousel-controlright"><spanclass="glyphiconglyphicon-chevron-right"></span></a> //内容介绍上
<divclass="tab1"> <divclass="container"> <h2class="tab-h2">「为什么选择瓢城企业培训」</h2> <pclass="tab-p"> 强大的师资力量,完美的实战型管理课程,让您的企业实现质的腾飞! </p> <divclass="row"> <divclass="col-md-6col"> <divclass="media"> <divclass="media-leftmedia-top"> <ahref="#"><imgclass="media-object" src="img/tab1-1.png"alt="..."></a> </div> <divclass="media-body"> <h4class="media-heading">课程内容</h4> <pclass="text-muted"> 其他:高校不知名的讲师编写,没有任何实战价值的教材! </p> <p> 其他:知名企业家、管理学大师联合编写的具有实现性教材! </p> </div> </div> </div> <divclass="col-md-6col"> <divclass="media"> <divclass="media-leftmedia-top"> <ahref="#"><imgclass="media-object" src="img/tab1-2.png"alt="..."></a> </div> <divclass="media-body"> <h4class="media-heading">师资力量</h4> <pclass="text-muted"> 其他:非欧美正牌大学毕业的、业界没有知名度的讲师! </p> <p> 其他:美国哈佛、耶鲁等世界一流高校、享有声誉的名牌专家! </p> </div> </div> </div> <divclass="col-md-6col"> <divclass="media"> <divclass="media-leftmedia-top"> <ahref="#"><imgclass="media-object" src="img/tab1-3.png"alt="..."></a> </div> <divclass="media-body"> <h4class="media-heading">课时安排</h4> <pclass="text-muted"> 其他:无法保证上课效率、没有时间表,任务无法完成! </p> <p> 其他:保证正常的上课效率、制定一张时间表、当天的任务当天完成! </p> </div> </div> </div> <divclass="col-md-6col"> <divclass="media"> <divclass="media-leftmedia-top"> <ahref="#"><imgclass="media-object" src="img/tab1-4.png"alt="..."></a> </div> <divclass="media-body"> <h4class="media-heading">服务团队</h4> <pclass="text-muted"> 其他:社会招聘的、服务水平参差不齐的普通员工! </p> <p> 其他:内部培养、经受过良好高端服务培训的高标准员工! </p> </div> </div> </div> </div> </div> </div>
对应的CSS部分
body{ font-family:"HelveticaNeue",Helvetica,Arial,"MicrosoftYaheiUI","MicrosoftYaHei",SimHei,"\5B8B\4F53",simsun,sans-serif; } .tab-h2{ font-size:20px; color:#0059B2; text-align:center; letter-spacing:1px; } .tab-p{ font-size:15px; color:#999; text-align:center; letter-spacing:1px; margin:20px040px0; } .tab1{ margin:30px0; color:#666; } .tab1.media-heading{ margin:5px020px0; } .tab1.text-muted{ color:#999; text-decoration:line-through; } .tab1.media-heading{ margin:5px020px0; } .tab1.text-muted{ color:#999; text-decoration:line-through; } .tab1.col{ padding:20px; } /*小屏幕(平板,大于等于768px)*/ @media(min-width:768px){ .tab-h2{ font-size:26px; } .tab-p{ font-size:16px; } } /*中等屏幕(桌面显示器,大于等于992px)*/ @media(min-width:992px){ .tab-h2{ font-size:28px; } .tab-p{ font-size:17px; } } /*大屏幕(大桌面显示器,大于等于1200px)*/ @media(min-width:1200px){ .tab-h2{ font-size:30px; } .tab-p{ font-size:18px; } }
现在我们制作一下首页内容介绍的下半部分。
一.首页内容介绍
先完成底部的footer
<footerid="footer"class="text-muted"> <divclass="container"> <p> 企业培训|合作事宜|版权投诉 </p> <p> 苏ICP备12345678.©2009-2016瓢城企训网.Poweredby Bootstrap. </p> </div> </footer>
底部CSS
#footer{ padding:20px; text-align:center; background-color:#eee; border-top:1pxsolid#ccc; } //两段内容
<divclass="tab2"> <divclass="container"> <divclass="row"> <divclass="col-md-6col-sm-6tab2-img"> <imgsrc="img/tab2.png"alt=""class="auto img-responsivecenter-block"> </div> <divclass="textcol-md-6col-sm-6tab2-text"> <h3>强大的学习体系</h3> <p> 经过管理学大师层层把关、让您的企业突飞猛进。 </p> </div> </div> </div> </div> <divclass="tab3"> <divclass="container"> <divclass="row"> <divclass="col-md-6col-sm-6"> <imgsrc="img/tab3.png"alt=""class="auto img-responsivecenter-block"> </div> <divclass="textcol-md-6col-sm-6"> <h3>完美的管理方式</h3> <p> 最新的管理培训方案,让您的企业赶超同行。 </p> </div> </div> </div> </div>
CSS部分
.tab2{ background:#eee; padding:60px20px; text-align:center; } .tab2img{ width:40%; height:40%; } .tab3{ padding:40px0; text-align:center; } .tab3img{ width:65%; height:65%; } .texth3{ font-size:20px; } .textp{ font-size:14px; } /*小屏幕(平板,大于等于768px)*/ @media(min-width:768px){ .texth3{ font-size:22px; } .textp{ font-size:15px; } .tab2-text{ float:left; } .tab2-img{ float:right; } } /*中等屏幕(桌面显示器,大于等于992px)*/ @media(min-width:992px){ .texth3{ font-size:24px; } .textp{ font-size:16px; } .tab2-text{ float:left; } .tab2-img{ float:right; } } /*大屏幕(大桌面显示器,大于等于1200px)*/ @media(min-width:1200px){ .texth2{ font-size:26px; } .textp{ font-size:18px; } .tab2-text{ float:left; } .tab2-img{ float:right; } }
JS控制垂直居中
$('.text').eq(0).css('margin-top',($('.auto').eq(0).height()-$('.text').eq(0).height())/2+'px'); $(window).resize(function(){ $('.text').eq(0).css('margin-top',($('.auto').eq(0).height()-$('.text').eq(0).height())/2+'px'); }); $('.text').eq(1).css('margin-top',($('.auto').eq(1).height()-$('.text').eq(1).height())/2+'px'); $(window).resize(function(){ $('.text').eq(1).css('margin-top',($('.auto').eq(1).height()-$('.text').eq(1).height())/2+'px'); });
如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是Bootstrap首页内容介绍的全部内容,希望大家喜欢,之后还会有更多精彩的内容呈现,不要错过。