Bootstrap项目实战之首页内容介绍（全）_

1、Bootstrap项目实战之首页内容介绍（全）_ 本文分为两部分介绍Bootstrap首页内容介绍的实现代码，感爱好的小伙伴们可以参考一下 本节课第一节我们轮播图的下方，设计一个内容介绍，内容介绍分两部分，本次为上半部分。 一首页内容介绍 /关于上节课轮播图，手册上其实有一个更好的方案，并不需要通过额外的代码掌握。 a href=#myCarousel data-slide=prev class=carousel-control left span class=glyphicon glyphicon-chevron-left/span /a a href=#myCarousel data-sl

2、ide=next class=carousel-controlright span class=glyphicon glyphicon-chevron-right/span /a /内容介绍上 - div class=tab1 div class=container h2 class=tab-h2 为什么选择瓢城企业培训 /h2 p class=tab-p 强大的师资力气，完善的实战型管理课程，让您的企业实现质的腾飞！ /p div class=row div class=col-md-6 col div class=media div class=media-left media-top a

3、 href=# img class=media-object src=img/tab1-1.png alt=. /a /div div class=media-body h4 class=media-heading课程内容/h4 p class=text-muted 其他：高校不知名的讲师编写，没有任何实战价值的教材！ /p p 其他：知名企业家、管理学大师联合编写的具有实现性教材！ /p /div /div /div div class=col-md-6 col div class=media div class=media-left media-top a href=# img class

4、=media-object src=img/tab1-2.png alt=. /a /div div class=media-body h4 class=media-heading师资力气/h4 p class=text-muted 其他：非欧美正牌高校毕业的、业界没有知名度的讲师！ /p p 其他：美国哈佛、耶鲁等世界一流高校、享有声誉的名牌专家！ /p /div /div /div div class=col-md-6 col div class=media div class=media-left media-top a href=# img class=media-object src

5、=img/tab1-3.png alt=. /a /div div class=media-body h4 class=media-heading课时支配/h4 p class=text-muted 其他：无法保证上课效率、没有进度表，任务无法完成！ /p p 其他：保证正常的上课效率、制定一张进度表、当天的任务当天完成！ /p /div /div /div div class=col-md-6 col div class=media div class=media-left media-top a href=# img class=media-object src=img/tab1-4.pn

6、g alt=. /a /div div class=media-body h4 class=media-heading服务团队/h4 p class=text-muted 其他：_聘请的、服务水平参差不齐的一般员工！ /p p 其他：内部培育、经受过良好高端服务培训的高标准员工！ /p /div /div /div /div /div /div 对应的 CSS 部分 body font-family: Helvetica Neue, Helvetica, Arial, Microsoft YaheiUI, Microsoft YaHei, SimHei, 5B8B4F53, simsun, s

7、ans-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: 20px 0 40px 0; .tab1 margin: 30px 0; color: #666; .tab1 .media-heading margin: 5px 0 20px 0; .tab1 .text-muted color: #99

8、9; text-decoration: line-through; .tab1 .media-heading margin: 5px 0 20px 0; .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 (

9、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 footer id=footer class=text-muted div class=container p 企业培训 | 合作事宜 | 版权投诉 /p p 苏 ICP

10、 备 12345678. 2021-2021 瓢城企训网. Powered by Bootstrap. /p /div /footer 底部 CSS #footer padding: 20px; text-align: center; background-color: #eee; border-top: 1px solid #ccc; /两段内容 div class=tab2 div class=container div class=row div class=col-md-6 col-sm-6 tab2-img img src=img/tab2.png alt= class=auto i

11、mg-responsive center-block /div div class=text col-md-6 col-sm-6 tab2-text h3强大的学习体系/h3 p 经过管理学大师层层把关、让您的企业突飞猛进。 /p /div /div /div /div div class=tab3 div class=container div class=row div class=col-md-6 col-sm-6 img src=img/tab3.png alt= class=auto img-responsive center-block /div div class=text co

12、l-md-6 col-sm-6 h3完善的管理方式/h3 p 最新的管理培训方案，让您的企业赶超同行。 /p /div /div /div /div CSS 部分 .tab2 background: #eee; padding: 60px 20px; text-align: center; .tab2 img width: 40%; height: 40%; .tab3 padding: 40px 0; text-align: center; .tab3 img width: 65%; height: 65%; .text h3 font-size: 20px; .text p font-si

13、ze: 14px; /* 小屏幕（平板，大于等于 768px） */ media (min-width: 768px) .text h3 font-size: 22px; .text p font-size: 15px; .tab2-text float: left; .tab2-img float: right; /* 中等屏幕（桌面显示器，大于等于 992px） */ media (min-width: 992px) .text h3 font-size: 24px; .text p font-size: 16px; .tab2-text float: left; .tab2-img fl

14、oat: right; /* 大屏幕（大桌面显示器，大于等于 1200px） */ media (min-width: 1200px) .text h2 font-size: 26px; .text p 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