Bootstrap項(xiàng)目實(shí)戰(zhàn)-首頁
html
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>Bootstrap 介紹</title> <!--引入bootstrap樣式文件--> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="css/ceshi.css"></head><body><!--導(dǎo)航--><nav class="navbar navbar-default navbar-fixed-top"> <!--聲明導(dǎo)航區(qū)域，設(shè)置導(dǎo)航默認(rèn)樣式，設(shè)置導(dǎo)航條固定在頂部--> <div class="container"> <!--設(shè)置固定布局，最大寬度1140--> <div class="navbar-header"> <!--設(shè)置導(dǎo)航標(biāo)題區(qū)域--> <a href="#" class="navbar-brand logo">自貢瑞佳財(cái)務(wù)咨詢有限公司</a> <!--設(shè)置導(dǎo)航標(biāo)內(nèi)容--> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <!--設(shè)置導(dǎo)航按鈕--> <span class="icon-bar"></span> <!--設(shè)置導(dǎo)航按鈕樣式--> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <!--設(shè)置導(dǎo)航折疊區(qū)域，設(shè)置導(dǎo)航折疊樣式--> <ul class="nav navbar-nav navbar-right dhul"> <!--設(shè)置列表區(qū)域，導(dǎo)航列表默認(rèn)樣式，導(dǎo)航列表右浮動--> <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首頁</a></li> <!--設(shè)置當(dāng)前列表首先--> <li><a href="#"><span class="glyphicon glyphicon-list"></span> 資訊</a></li> <!--設(shè)置當(dāng)前列表圖標(biāo)--> <li><a href="#"><span class="glyphicon glyphicon-fire"></span> 案例</a></li> <li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> 關(guān)于</a></li> </ul> </div> </div></nav><!--輪播圖--><div id="myCarousel" class="carousel slide"> <!--設(shè)置輪播器區(qū)域樣式，設(shè)置輪播器滾動樣式--> <ol class="carousel-indicators"> <!--設(shè)置輪播器列表區(qū)域樣式，就是小圓點(diǎn)區(qū)域樣式--> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <!--設(shè)置當(dāng)前列表首選--> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <!--設(shè)置輪播器圖片區(qū)域--> <div class="item active tp1"> <!--設(shè)置輪播器圖片樣式--> <a href="#"><img src="img/1.jpg" alt="第一張"></a> </div> <div class="item tp2"> <a href="#"><img src="img/2.jpg" alt="第二張"></a> </div> <div class="item tp3"> <a href="#"><img src="img/3.jpg" alt="第三張"></a> </div> </div> <!--設(shè)置輪播器箭頭區(qū)域--> <a href="#myCarousel" data-slide="prev" class="carousel-control left"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#myCarousel" data-slide="next" class="carousel-control right"> <span class="glyphicon glyphicon-chevron-right"></span> </a></div><!--內(nèi)容1--><div class="tab1"> <div class="container"> <h2 class="tab-h2">「 為什么選擇瑞佳商務(wù) 」</h2> <p class="tab-p">20年經(jīng)驗(yàn)，專人專辦，上面服務(wù)，后續(xù)記賬業(yè)務(wù)多！</p> <div class="row"> <div class="col-md-6 col"> <div class="media"> <div class="media-left media-top"> <a href="#"> <img class="media-object" src="img/zhzhao.png" alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">代辦證照</h4> <p>工商代辦、工商注冊、執(zhí)照代辦、公司注冊、資質(zhì)代理、年檢等 ！</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/shb.png" alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">商標(biāo)注冊</h4> <p>代理注冊各種商標(biāo)！</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/jzhshw.png" alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">記賬稅務(wù)</h4> <p>代理公司賬務(wù)，稅務(wù)申報(bào)！</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/qt.png" alt="..."> </a> </div> <div class="media-body"> <h4 class="media-heading">其他業(yè)務(wù)</h4> <p>其他各種業(yè)務(wù)！</p> </div> </div> </div> </div> </div></div><!--兩段內(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 img-responsive center-block"> </div> <div class="text col-md-6 col-sm-6 tab2-text"> <h3>強(qiáng)大的學(xué)習(xí)體系</h3> <p>經(jīng)過管理學(xué)大師層層把關(guān)、讓您的企業(yè)突飛猛進(jìn)。</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 col-md-6 col-sm-6"> <h3>完美的管理方式</h3> <p>最新的管理培訓(xùn)方案，讓您的企業(yè)趕超同行。</p> </div> </div> </div></div><!--底部--><div class="dibu"> <div class="container"> <div class="row"> <div class="col-md-6"> <h4 class="text-center">聯(lián)系方式</h4> <p>聯(lián)系人:游先生</p> <p>手機(jī):18681395066 13096006150</p> <p>座機(jī):0813-8287339</p> <p>Q Q:350016919</p> <p>郵箱:350016919@qq.com</p> <p>地址:自貢市自流井區(qū)丹桂東段泰豐大廈1區(qū)8層7號 </p> </div> <div class="col-md-6"> <h4 class="text-center">友情鏈接</h4> <ul class="list-unstyled"> <li><a href="http://www.scaic.gov.cn/" target="_blank">四川工商局</a></li> <li><a href="http://www.baidu.com" target="_blank">百度</a></li> </ul> </div> </div> </div></div><div class="banq"> <div class="container text-center banq"> <p>版權(quán)所有 ? 自貢瑞佳財(cái)務(wù)咨詢有限公司 未經(jīng)許可 嚴(yán)禁復(fù)制</p> <p><a href="http://www.jxiou.com/" target="_blank">自貢玉秀文化傳播技術(shù)支持</a></p> <p>蜀ICP備16022718號-1 </p> </div></div><!--引入jquery文件--><script src="jquery/jquery.min.js"></script><!--引入bootstrap里的js--><script src="bootstrap/js/bootstrap.min.js"></script><script src="ceshi.js"></script></body></html
css
@charset "utf-8";/*通用----------------------------------------------------------------------------------------------------------------*//*將a標(biāo)簽去掉點(diǎn)擊后的虛線邊框*/body { font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;}a:focus { outline: none;}/*導(dǎo)航部分-------------------------------------------------------------------------------------------------------------*//*導(dǎo)航區(qū)域背景色*/.navbar{ background-color: #2056AC;}/*導(dǎo)航a首選標(biāo)簽，聚集光標(biāo)和鼠標(biāo)放上去背景色*/.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover{ background-color: #FE7C19; color: #FFFFFF;}/*網(wǎng)站名稱*/.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand { color: #FFFFFF; font-size:15px;}/*去除導(dǎo)航ul頭部內(nèi)邊距*/.dhul{ margin-top:0;}/*導(dǎo)航a標(biāo)簽，聚集光標(biāo)和鼠標(biāo)放上去背景色*/.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover{ background-color: #FE7C19; color: #FFFFFF;}/*導(dǎo)航條文字顏色*/.navbar-default .navbar-nav > li > a{ color: #FFFFFF;}/*導(dǎo)航條按鈕背景色*/.navbar-toggle, .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{ background-color: #ddd;}/*導(dǎo)航條按鈕文字三橫背景和文字顏色*/.navbar-default .navbar-toggle .icon-bar{ background-color: #f5f5f5; border-radius: 1px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); display: block; height: 2px; width: 18px;}/*輪播器--------------------------------------------------------------------------------------------------------------*//*將輪播器頭部外邊距設(shè)置50像素*/#myCarousel { margin: 50px 0 0 0;}.carousel-inner .item img { margin: 0 auto;}.tp1{ background:#D6E5EA;}.tp2{ background:#F4F3F1;}.tp3{ background:#E2E1E7;}/*經(jīng)營業(yè)務(wù)-------------------------------------------------------------------------------------------------------------*/.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: #999; 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;}.media { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);}/*兩段內(nèi)容部分*/.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-size: 14px;}/*底部-----------------------------------------------------------------------------------------------------------------*/.dibu{ background-color:#222222;}.dibu .row{ color: #FFFFFF;}.dibu .row h4{ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.97); padding:10px 0;}/*版權(quán)*/.banq{ background-color: #000000;}.banq .banq{ padding: 10px 0 0 0;}.banq p{ color: #777777;}/* 小屏幕（平板，大于等于 768px） */@media (min-width: 768px) { /*網(wǎng)站名稱*/ .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand { color: #FFFFFF; font-size: 20px; } .tab-h2 { font-size: 26px; } .tab-p { font-size: 16px; }}/* 中等屏幕（桌面顯示器，大于等于 992px） */@media (min-width: 992px) { /*網(wǎng)站名稱*/ .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand { color: #FFFFFF; font-size: 23px; } .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; }}
js
/** * Created by admin on 2017/5/2. */$(function () { $('#myCarousel').carousel({ //設(shè)置自動播放/3 秒 interval: 3000, });});
總結(jié)：主要用到，導(dǎo)航條組件，輪播器組件，柵格系統(tǒng)，和媒體對象組件
聯(lián)系客服
