Bootstrap項目實戰(zhàn)之首頁內(nèi)容介紹（全）_

1、Bootstrap項目實戰(zhàn)之首頁內(nèi)容介紹（全）_ 本文分為兩部分介紹Bootstrap首頁內(nèi)容介紹的實現(xiàn)代碼，感愛好的小伙伴們可以參考一下 本節(jié)課第一節(jié)我們輪播圖的下方，設(shè)計一個內(nèi)容介紹，內(nèi)容介紹分兩部分，本次為上半部分。 一首頁內(nèi)容介紹 /關(guān)于上節(jié)課輪播圖，手冊上其實有一個更好的方案，并不需要通過額外的代碼掌握。 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 /內(nèi)容介紹上 - div class=tab1 div class=container h2 class=tab-h2 為什么選擇瓢城企業(yè)培訓(xùn) /h2 p class=tab-p 強大的師資力氣，完善的實戰(zhàn)型管理課程，讓您的企業(yè)實現(xiàn)質(zhì)的騰飛！ /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課程內(nèi)容/h4 p class=text-muted 其他：高校不知名的講師編寫，沒有任何實戰(zhàn)價值的教材！ /p p 其他：知名企業(yè)家、管理學(xué)大師聯(lián)合編寫的具有實現(xiàn)性教材！ /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 其他：非歐美正牌高校畢業(yè)的、業(yè)界沒有知名度的講師！ /p p 其他：美國哈佛、耶魯?shù)仁澜缫涣鞲咝?、享有聲譽的名牌專家！ /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 其他：無法保證上課效率、沒有進度表，任務(wù)無法完成！ /p p 其他：保證正常的上課效率、制定一張進度表、當(dāng)天的任務(wù)當(dāng)天完成！ /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服務(wù)團隊/h4 p class=text-muted 其他：_聘請的、服務(wù)水平參差不齊的一般員工！ /p p 其他：內(nèi)部培育、經(jīng)受過良好高端服務(wù)培訓(xùn)的高標(biāo)準(zhǔn)員工！ /p /div /div /div /div /div /div 對應(yīng)的 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; 現(xiàn)在我們制作一下首頁內(nèi)容介紹的下半部分。 一首頁內(nèi)容介紹 先完成底部的 footer footer id=footer class=text-muted div class=container p 企業(yè)培訓(xùn) | 合作事宜 | 版權(quán)投訴 /p p 蘇 ICP

10、 備 12345678. 2021-2021 瓢城企訓(xùn)網(wǎng). Powered by Bootstrap. /p /div /footer 底部 CSS #footer padding: 20px; text-align: center; background-color: #eee; border-top: 1px solid #ccc; /兩段內(nèi)容 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強大的學(xué)習(xí)體系/h3 p 經(jīng)過管理學(xué)大師層層把關(guān)、讓您的企業(yè)突飛猛進。 /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 最新的管理培訓(xùn)方案，讓您的企業(yè)趕超同行。 /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