前端框架——BootStrap學習
BootStrap簡單總結下：1.柵格系統，可以很好的同時適應手機端和PC端（及傳說中的響應式佈局） 2.兼容性好javascript
接下來是對BootStrap學習的一些基礎案例總結和回顧:php
首先引入：bootstrap.min.css，jquery.js，bootstrap.min.js文件css
解決兼容手機端代碼,下面的代碼中若是沒有注意加上。html
<!--解決兼容性問題-->
<meta name="viewport"
content="width=device-width,initial-scale=1.0,user-scalable=no">
一》 前端
如上只是PC端截圖，手機端就不截圖了。代碼以下:html5
index.htmljava
<!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>項目實戰</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="index.html" class="navbar-brand logo"><img src="img/logo.png" alt="瓢城企訓網"></a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span> 首頁</a></li> <li><a href="information.html"><span class="glyphicon glyphicon-list"></span> 資訊</a></li> <li><a href="case.html"><span class="glyphicon glyphicon-fire"></span> 案例</a></li> <li><a href="about.html"><span class="glyphicon glyphicon-question-sign"></span> 關於</a></li> </ul> </div> </div> </nav> <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active" style="background:#223240"> <img src="img/slide1.png" alt="第一張"> </div> <div class="item" style="background:#F5E4DC;"> <img src="img/slide2.png" alt="第二張"> </div> <div class="item" style="background:#DE2A2D;"> <img src="img/slide3.png" alt="第三張"> </div> <!-- <div style="background:#eee;"> <img src="img/slide.png" alt="第三張"> </div> --> </div> <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> <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"> <a href="#"><img src="img/tab1-1.png" class="media-object" 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"> <a href="#"><img src="img/tab1-2.png" class="media-object" 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"> <a href="#"><img src="img/tab1-3.png" class="media-object" 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"> <a href="#"><img src="img/tab1-4.png" class="media-object" 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> <div class="tab2"> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-6 tab2-img"> <img src="img/tab2.png" class="auto img-responsive center-block" alt=""> </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" class="auto img-responsive center-block" alt=""> </div> <div class="text col-md-6 col-sm-6"> <h3>完美的管理方式</h3> <p>最新的管理培訓方案，讓您的企業趕超同行。</p> </div> </div> </div> </div> <footer id="footer"> <div class="container"> <p>企業培訓 | 合做事宜 | 版權投訴</p> <p>蘇ICP 備12345678. © 2009-2016 瓢城企訓網. Powered by Bootstrap.</p> </div> </footer> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> //輪播自動播放 $('#myCarousel').carousel({ //自動4秒播放 interval : 4000, }); // //設置垂直居中 // $('.carousel-control').css('line-height', $('.carousel-inner img').height() + 'px'); // $(window).resize(function () { // var $height = $('.carousel-inner img').eq(0).height() || // $('.carousel-inner img').eq(1).height() || // $('.carousel-inner img').eq(2).height(); // $('.carousel-control').css('line-height', $height + 'px'); // }); //設置文字垂直居中，谷歌瀏覽器加載圖片的順序問題，致使高度沒法獲取 $(window).load(function () { $('.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'); }); $(window).load(function () { $('.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'); }); </script> </body> </html>
case.htmljquery
<!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>項目實戰</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand logo"><img src="img/logo.png" alt="瓢城企訓網"></a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="index.html"><span class="glyphicon glyphicon-home"></span> 首頁</a></li> <li><a href="information.html"><span class="glyphicon glyphicon-list"></span> 資訊</a></li> <li class="active"><a href="case.html"><span class="glyphicon glyphicon-fire"></span> 案例</a></li> <li><a href="about.html"><span class="glyphicon glyphicon-question-sign"></span> 關於</a></li> </ul> </div> </div> </nav> <div class="jumbotron"> <div class="container"> <hgroup> <h1>案例</h1> <h4>和各大明星企業有着緊密合做...</h4> </hgroup> </div> </div> <div id="case"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img/case1.jpg" alt=""> <div class="caption"> <h4>中國移動通訊</h4> <p>參與了本機構的總裁管理培訓課程，學員反饋意見良好。</p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img/case2.jpg" alt=""> <div class="caption"> <h4>中國石化</h4> <p>參與了本機構的總裁管理培訓課程，學員反饋意見良好。</p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img/case3.jpg" alt=""> <div class="caption"> <h4>中國聯通</h4> <p>參與了本機構的總裁管理培訓課程，學員反饋意見良好。</p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img/case4.jpg" alt=""> <div class="caption"> <h4>中國電信</h4> <p>參與了本機構的總裁管理培訓課程，學員反饋意見良好。</p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img/case3.jpg" alt=""> <div class="caption"> <h4>中國聯通</h4> <p>參與了本機構的總裁管理培訓課程，學員反饋意見良好。</p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img/case4.jpg" alt=""> <div class="caption"> <h4>中國電信</h4> <p>參與了本機構的總裁管理培訓課程，學員反饋意見良好。</p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img/case2.jpg" alt=""> <div class="caption"> <h4>中國石化</h4> <p>參與了本機構的總裁管理培訓課程，學員反饋意見良好。</p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img/case1.jpg" alt=""> <div class="caption"> <h4>中國移動通訊</h4> <p>參與了本機構的總裁管理培訓課程，學員反饋意見良好。</p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img/case4.jpg" alt=""> <div class="caption"> <h4>中國電信</h4> <p>參與了本機構的總裁管理培訓課程，學員反饋意見良好。</p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img/case3.jpg" alt=""> <div class="caption"> <h4>中國聯通</h4> <p>參與了本機構的總裁管理培訓課程，學員反饋意見良好。</p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img/case4.jpg" alt=""> <div class="caption"> <h4>中國電信</h4> <p>參與了本機構的總裁管理培訓課程，學員反饋意見良好。</p> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="thumbnail"> <img src="img/case2.jpg" alt=""> <div class="caption"> <h4>中國石化</h4> <p>參與了本機構的總裁管理培訓課程，學員反饋意見良好。</p> </div> </div> </div> </div> </div> </div> <footer id="footer"> <div class="container"> <p>企業培訓 | 合做事宜 | 版權投訴</p> <p>蘇ICP 備12345678. © 2009-2016 瓢城企訓網. Powered by Bootstrap.</p> </div> </footer> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> </script> </body> </html>
about.htmlios
<!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>項目實戰</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand logo"><img src="img/logo.png" alt="瓢城企訓網"></a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="index.html"><span class="glyphicon glyphicon-home"></span> 首頁</a></li> <li><a href="information.html"><span class="glyphicon glyphicon-list"></span> 資訊</a></li> <li><a href="case.html"><span class="glyphicon glyphicon-fire"></span> 案例</a></li> <li class="active"><a href="about.html"><span class="glyphicon glyphicon-question-sign"></span> 關於</a></li> </ul> </div> </div> </nav> <div class="jumbotron"> <div class="container"> <hgroup> <h1>關於</h1> <h4>本機構的成長介紹...</h4> </hgroup> </div> </div> <div id="about"> <div class="container"> <div class="row"> <div class="col-md-3 hidden-sm hidden-xs"> <div class="list-group"> <a class="list-group-item" href="#1">1.機構介紹</a> <a class="list-group-item" href="#2">2.加入咱們</a> <a class="list-group-item" href="#3">3.聯繫方式</a> </div> </div> <div class="col-md-9 about"> <a name="1"></a> <h3>機構簡介</h3> <p>瓢城企業培訓有限公司是一家專業以智能化弱電工程爲主的高科技民營企業，公司自創立以來一直專業致力於智能化弱電工程；始終堅持發揚"誠信、創新、溝通"爲企業宗旨，以"技術、服務"爲立業之本的團體精神，並造成一套完整的設計、安裝、調試、培訓、維護一站式服務體系。</p> <a name="2"></a> <h3>加入咱們</h3> <p>網絡已深入改變着人們的生活，本地化生活服務市場前景巨大，生活半徑團隊堅信本地化生活服務與互聯網的結合將會成就一家夢幻的公司，咱們腳踏實地的相信夢想，咱們相信你的加入會讓生活半徑更可能成爲那家夢幻公司！生活半徑人有夢想，有魄力，強執行力，可是要實現這個偉大的夢想，須要更多的有創業精神的你一路前行。公司將提供有競爭力的薪酬、完善的福利（五險一金）、期權、廣闊的上升空間。只要你有能力、有激情、有夢想，願意付出，願意與公司共同成長，請加入咱們！</p> <p>請發送您的簡歷到：hr@xxx.com，咱們會在第一時間聯繫您！</p> <a name="3"></a> <h3>聯繫方式</h3> <p>地址：江蘇省鹽城市亭湖區大慶中路1234 號</p> <p>郵編：1234567</p> <p>電話：010-88888888</p> <p>傳真：010-88666666</p> </div> </div> </div> </div> <footer id="footer"> <div class="container"> <p>企業培訓 | 合做事宜 | 版權投訴</p> <p>蘇ICP 備12345678. © 2009-2016 瓢城企訓網. Powered by Bootstrap.</p> </div> </footer> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> </script> </body> </html>
information.htmlweb
<!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>項目實戰</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand logo"><img src="img/logo.png" alt="瓢城企訓網"></a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="index.html"><span class="glyphicon glyphicon-home"></span> 首頁</a></li> <li class="active"><a href="information.html"><span class="glyphicon glyphicon-list"></span> 資訊</a></li> <li><a href="case.html"><span class="glyphicon glyphicon-fire"></span> 案例</a></li> <li><a href="about.html"><span class="glyphicon glyphicon-question-sign"></span> 關於</a></li> </ul> </div> </div> </nav> <div class="jumbotron"> <div class="container"> <hgroup> <h1>資訊</h1> <h4>企業內訓的最新動態、資源等...</h4> </hgroup> </div> </div> <div id="information"> <div class="container"> <div class="row"> <div class="col-md-8"> <div class="container-fluid" style="padding:0;"> <div class="row info-content"> <div class="col-md-5 col-sm-5 col-xs-5"> <img src="img/info1.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>廣電總局發佈TVOS2.0 華爲阿里參與研發</h4> <p class="hidden-xs">TVOS2.0是在TVOS1.0與華爲MediaOS及阿里巴巴YunOS融合的基礎上，打造的新一代智能電視操做系統。華爲主要承擔開發工做，內置的電視購物商城由阿里方面負責。</p> <p>admin 15 / 10 / 11</p> </div> </div> <div class="row info-content"> <div class="col-md-5 col-sm-5 col-xs-5"> <img src="img/info2.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>蘋果四寸手機爲什麼要配置強大的A9處理器？</h4> <p class="hidden-xs">蘋果明年初有可能對外發布一款通過升級的四英寸手機，至關於iPhone 5s。該手機將會配置蘋果在2015年旗艦手機中採用的A9處理器。配置性能如此強大的應用處理器？</p> <p>admin 15 / 10 / 11</p> </div> </div> <div class="row info-content"> <div class="col-md-5 col-sm-5 col-xs-5"> <img src="img/info3.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>六家互聯網公司發聲明 抵制流量劫持等違法行爲</h4> <p class="hidden-xs">六家互聯網公司（今日頭條、美團大衆點評網、360、騰訊、微博、小米科技）發佈聯合聲明，呼籲有關運營商打擊流量劫持，重視互聯網公司被流量劫持，可能致使的嚴重後果。</p> <p>admin 15 / 10 / 11</p> </div> </div> <div class="row info-content"> <div class="col-md-5 col-sm-5 col-xs-5"> <img src="img/info1.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>廣電總局發佈TVOS2.0 華爲阿里參與研發</h4> <p class="hidden-xs">TVOS2.0是在TVOS1.0與華爲MediaOS及阿里巴巴YunOS融合的基礎上，打造的新一代智能電視操做系統。華爲主要承擔開發工做，內置的電視購物商城由阿里方面負責。</p> <p>admin 15 / 10 / 11</p> </div> </div> <div class="row info-content"> <div class="col-md-5 col-sm-5 col-xs-5"> <img src="img/info2.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>蘋果四寸手機爲什麼要配置強大的A9處理器？</h4> <p class="hidden-xs">蘋果明年初有可能對外發布一款通過升級的四英寸手機，至關於iPhone 5s。該手機將會配置蘋果在2015年旗艦手機中採用的A9處理器。配置性能如此強大的應用處理器？</p> <p>admin 15 / 10 / 11</p> </div> </div> <div class="row info-content"> <div class="col-md-5 col-sm-5 col-xs-5"> <img src="img/info3.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>六家互聯網公司發聲明 抵制流量劫持等違法行爲</h4> <p class="hidden-xs">六家互聯網公司（今日頭條、美團大衆點評網、360、騰訊、微博、小米科技）發佈聯合聲明，呼籲有關運營商打擊流量劫持，重視互聯網公司被流量劫持，可能致使的嚴重後果。</p> <p>admin 15 / 10 / 11</p> </div> </div> <div class="row info-content"> <div class="col-md-5 col-sm-5 col-xs-5"> <img src="img/info1.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>廣電總局發佈TVOS2.0 華爲阿里參與研發</h4> <p class="hidden-xs">TVOS2.0是在TVOS1.0與華爲MediaOS及阿里巴巴YunOS融合的基礎上，打造的新一代智能電視操做系統。華爲主要承擔開發工做，內置的電視購物商城由阿里方面負責。</p> <p>admin 15 / 10 / 11</p> </div> </div> <div class="row info-content"> <div class="col-md-5 col-sm-5 col-xs-5"> <img src="img/info2.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>蘋果四寸手機爲什麼要配置強大的A9處理器？</h4> <p class="hidden-xs">蘋果明年初有可能對外發布一款通過升級的四英寸手機，至關於iPhone 5s。該手機將會配置蘋果在2015年旗艦手機中採用的A9處理器。配置性能如此強大的應用處理器？</p> <p>admin 15 / 10 / 11</p> </div> </div> <div class="row info-content"> <div class="col-md-5 col-sm-5 col-xs-5"> <img src="img/info3.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>六家互聯網公司發聲明 抵制流量劫持等違法行爲</h4> <p class="hidden-xs">六家互聯網公司（今日頭條、美團大衆點評網、360、騰訊、微博、小米科技）發佈聯合聲明，呼籲有關運營商打擊流量劫持，重視互聯網公司被流量劫持，可能致使的嚴重後果。</p> <p>admin 15 / 10 / 11</p> </div> </div> <div class="row info-content"> <div class="col-md-5 col-sm-5 col-xs-5"> <img src="img/info1.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>廣電總局發佈TVOS2.0 華爲阿里參與研發</h4> <p class="hidden-xs">TVOS2.0是在TVOS1.0與華爲MediaOS及阿里巴巴YunOS融合的基礎上，打造的新一代智能電視操做系統。華爲主要承擔開發工做，內置的電視購物商城由阿里方面負責。</p> <p>admin 15 / 10 / 11</p> </div> </div> <div class="row info-content"> <div class="col-md-5 col-sm-5 col-xs-5"> <img src="img/info2.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>蘋果四寸手機爲什麼要配置強大的A9處理器？</h4> <p class="hidden-xs">蘋果明年初有可能對外發布一款通過升級的四英寸手機，至關於iPhone 5s。該手機將會配置蘋果在2015年旗艦手機中採用的A9處理器。配置性能如此強大的應用處理器？</p> <p>admin 15 / 10 / 11</p> </div> </div> <div class="row info-content"> <div class="col-md-5 col-sm-5 col-xs-5"> <img src="img/info3.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>六家互聯網公司發聲明 抵制流量劫持等違法行爲</h4> <p class="hidden-xs">六家互聯網公司（今日頭條、美團大衆點評網、360、騰訊、微博、小米科技）發佈聯合聲明，呼籲有關運營商打擊流量劫持，重視互聯網公司被流量劫持，可能致使的嚴重後果。</p> <p>admin 15 / 10 / 11</p> </div> </div> </div> </div> <div class="col-md-4 info-right hidden-xs hidden-sm"> <blockquote> <h2>熱門資訊</h2> </blockquote> <div class="container-fluid"> <div class="row"> <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0; padding: 0"> <img src="img/info2.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7" style="padding-right: 0"> <h4>蘋果四寸手機爲什麼要配置強大的A9處理器？</h4> <p>admin 15 / 10 / 11</p> </div> </div> <div class="row"> <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0; padding: 0"> <img src="img/info1.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7" style="padding-right: 0"> <h4>廣電總局發佈TVOS2.0 華爲阿里參與研發</h4> <p>admin 15 / 10 / 11</p> </div> </div> <div class="row"> <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0; padding: 0"> <img src="img/info3.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7" style="padding-right: 0"> <h4>六家互聯網公司發聲明 抵制流量劫持等違法行爲</h4> <p>admin 15 / 10 / 11</p> </div> </div> <div class="row"> <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0; padding: 0"> <img src="img/info2.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7" style="padding-right: 0"> <h4>蘋果四寸手機爲什麼要配置強大的A9處理器？</h4> <p>admin 15 / 10 / 11</p> </div> </div> <div class="row"> <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0; padding: 0"> <img src="img/info1.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7" style="padding-right: 0"> <h4>廣電總局發佈TVOS2.0 華爲阿里參與研發</h4> <p>admin 15 / 10 / 11</p> </div> </div> <div class="row"> <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0; padding: 0"> <img src="img/info3.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7" style="padding-right: 0"> <h4>六家互聯網公司發聲明 抵制流量劫持等違法行爲</h4> <p>admin 15 / 10 / 11</p> </div> </div> <div class="row"> <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0; padding: 0"> <img src="img/info2.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7" style="padding-right: 0"> <h4>蘋果四寸手機爲什麼要配置強大的A9處理器？</h4> <p>admin 15 / 10 / 11</p> </div> </div> <div class="row"> <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0; padding: 0"> <img src="img/info1.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7" style="padding-right: 0"> <h4>廣電總局發佈TVOS2.0 華爲阿里參與研發</h4> <p>admin 15 / 10 / 11</p> </div> </div> <div class="row"> <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0; padding: 0"> <img src="img/info3.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7" style="padding-right: 0"> <h4>六家互聯網公司發聲明 抵制流量劫持等違法行爲</h4> <p>admin 15 / 10 / 11</p> </div> </div> </div> </div> </div> </div> </div> <footer id="footer"> <div class="container"> <p>企業培訓 | 合做事宜 | 版權投訴</p> <p>蘇ICP 備12345678. © 2009-2016 瓢城企訓網. Powered by Bootstrap.</p> </div> </footer> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> </script> </body> </html>
二》按鈕和摺疊插件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--下面這句mata語句是解決手機瀏覽出現顯示不和諧問題--> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" /> <title>按鈕和摺疊插件</title> <link href="Content/css/bootstrap.min.css" rel="stylesheet" /> </head> <body style="padding:50px;"> <button class="btn btn-default" data-toggle="button">按鈕</button><br/> //單選框<br/> <div class="btn-group" data-toggle="buttons"> <label for="" class="btn btn-primary active"> <input type="radio" name="sex" value="男" checked />男 </label> <label for="" class="btn btn-primary"> <input type="radio" name="sex" value="女"/>女 </label> </div><br/> //複選框<br/> <div class="btn btn-group" data-toggle="buttons"> <label for="" class="btn btn-primary active"> <input type="checkbox" name="fa" autocomplete="off" checked />音樂 </label> <label for="" class="btn btn-primary"> <input type="checkbox" name="fa" autocomplete="off" />體育 </label> <label for="" class="btn btn-primary"> <input type="checkbox" name="fa" autocomplete="off" />美術 </label> </div><br/> //加載狀態<br/> <button id="myButton" type="button" data-loading-text="Loading..." class="btn btn-primary"> 開始上傳 </button><br/> //摺疊插件<br/> <button class="btn btn-primary" data-toggle="collapse" data-target="#content">點我顯示下面內容</button> <div class="collapse" id="content"> <div class="well">Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。它由Twitter的設計師Mark Otto和Jacob...</div> </div><br/> //手風琴摺疊<br/> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">點擊我進行展現，再點擊我進行摺疊，第一部分</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> 這裏是第一部分。 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">點擊我進行展現，再點擊我進行摺疊，第二部分</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> 這裏是第二部分。 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">點擊我進行展現，再點擊我進行摺疊，第三部分</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> 這裏是第三部分。 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapseFour" data-toggle="collapse" data-parent="#accordion">點擊我進行展現，再點擊我進行摺疊，第四部分</a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse"> <div class="panel-body"> 這裏是第四部分。 </div> </div> </div> </div> <!--手風琴摺疊完--> </body> </html> <script src="Content/js/jquery.min.js"></script> <script src="Content/js/bootstrap.min.js"></script> <script> //加載狀態設置點擊顯示loading $("#myButton").on('click', function () { var btn = $(this).button('loading'); setTimeout(function () { btn.button('reset'); }, 1000); }); </script>
三》標籤頁和工具提示插件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--下面這句mata語句是解決手機瀏覽出現顯示不和諧問題--> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" /> <title>標籤頁和工具提示插件</title> <link href="Content/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#home" data-toggle="tab"> W3Cschool Home </a> </li> <li><a href="#ios" data-toggle="tab">iOS</a></li> <li><a href="#php" data-toggle="tab">PHP</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li> <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li> </ul> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="home"> <p>W3Cschoool菜鳥教程是一個提供最新的web技術站點，本站免費提供了建站相關的技術文檔，幫助廣大web技術愛好者快速入門並創建本身的網站。菜鳥先飛早入行——學的不只是技術，更是夢想。</p> </div> <div class="tab-pane" id="ios"> <p> iOS 是一個由蘋果公司開發和發佈的手機操做系統。最初是於 2007 年首次發佈 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 操做系統是用在蘋果電腦上，iOS 是蘋果的移動版本。 </p> </div> <div class="tab-pane" id="php"> <p>PHP（外文名:PHP: Hypertext Preprocessor，中文名：「超文本預處理器」）是一種通用開源腳本語言。語法吸取了C語言、Java和Perl的特色，利於學習，使用普遍，主要適用於Web開發領域。PHP 獨特的語法混合了C、Java、Perl以及PHP自創的語法。它能夠比CGI或者Perl更快速地執行動態網頁</p> </div> <div class="tab-pane fade" id="jmeter"> <p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序，用於負載和性能測試。</p> </div> <div class="tab-pane fade" id="ejb"> <p> Enterprise Java Beans（EJB）是一個建立高度可擴展性和強大企業級應用程序的開發架構，部署在兼容應用程序服務器（好比 JBOSS、Web Logic 等）的 J2EE 上。 </p> </div> </div> //工具提示插件<br /> <a href="#" id="a1" data-toggle="tooltip" title="我是氣泡1">我是氣泡1</a> <a href="#" data-animation="false" id="a2" data-toggle="tooltip" title="我是氣泡2">我是氣泡2</a><!--去除淡入淡出效果--> <a href="#" id="a3" data-toggle="tooltip" title="<b>我是氣泡3</b>" data-animation="false" data-html="true">我是氣泡3</a><!--讓Title裏面的html起做用--> <a href="#" data-animation="false" id="a4" data-toggle="tooltip" title="我是氣泡4" data-placement="bottom">我是氣泡4</a><!--讓氣泡顯示在下面--> <a href="#" data-animation="false" id="a5" data-toggle="tooltip" title="我是氣泡5" data-placement="auto left">我是氣泡5</a><!--左右顯示，儘可能在左邊顯示--> <a href="#" id="a6" data-toggle="tooltip" title="我是氣泡6" data-trigger="click">我是氣泡6</a><!--點擊才顯示隱藏氣泡--> <a href="#" data-animation="false" id="a7" data-toggle="tooltip" title="我是氣泡7">我是氣泡7</a><!--顯示的時候500毫秒，隱藏的時候100毫秒--> <br/><hr/> <div class="btn-group"> <button class="btn btn-default" data-toggle="tooltip" title="我是偷狗">左</button> <button class="btn btn-default" data-toggle="tooltip" title="我是偷狗">中</button> <button class="btn btn-default" data-toggle="tooltip" title="我是偷狗">右</button> </div> </body> </html> <script src="Content/js/jquery.min.js"></script> <script src="Content/js/bootstrap.min.js"></script> <script> $("#a1").tooltip(); $("#a2").tooltip(); $("#a3").tooltip(); $("#a4").tooltip(); $("#a5").tooltip(); $("#a6").tooltip(); $("#a7").tooltip({ delay: { show: 500, hide:100, }, placement:'left' }); //給Button加上懸浮氣泡 $('button').tooltip({ delay: { show: 100, hide:100, }, container:'body'//設置氣泡區域 }); </script>
四》彈出框和警告框插件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--下面這句mata語句是解決手機瀏覽出現顯示不和諧問題--> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" /> <title>彈出框和警告框插件</title> <link href="Content/css/bootstrap.min.css" rel="stylesheet" /> </head> <body style="padding:50px;"> <button id="btn1" class="btn btn-danger" data-toggle="popover" title="bootstrap" data-content="Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。它由Twitter的設計師Mark Otto和Jacob...">點擊彈出/隱藏彈出框</button><br/><hr/> <div class="alert alert-warning fade in"> <button class="close" data-dismiss="alert"><span>×</span></button> <p>警告!您的瀏覽器不支持!</p> </div> </body> </html> <script src="Content/js/jquery.min.js"></script> <script src="Content/js/bootstrap.min.js"></script> <script> $("#btn1").popover(); </script>
五》輔助類和響應式佈局
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--下面這句mata語句是解決手機瀏覽出現顯示不和諧問題--> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" /> <title>輔助類和響應式佈局</title> <link href="Content/css/bootstrap.min.css" rel="stylesheet" /> <style> .dv { height: 50px; width:100px; border: 1px solid #ccc; background-color: #eee; } </style> </head> <body style="padding:50px;"> <div> <!--前景色--> <p class="text-muted">柔和灰</p> <p class="text-primary">主要藍</p> <p class="text-success">成功綠</p> <p class="text-info">信息藍</p> <p class="text-warning">警告黃</p> <p class="text-danger">危險紅</p> <!--背景色--> <p class="bg-primary">主要藍</p> <p class="bg-success">成功綠</p> <p class="bg-info">信息藍</p> <p class="bg-warning">警告黃</p> <p class="bg-danger">危險紅</p> <!--按鈕設置--> <button class="close">×</button><!--關閉按鈕--> <span class="caret"></span><!--下三角--> <br/> <!--左右浮動--> <div class="dv pull-left">左邊</div> <div class="dv pull-right">右邊</div> <div class="clearfix"></div> <div class="dv center-block">居中</div> <!--清理上面浮動影響--> <p>下面是清除浮動</p> <div class="dv pull-left">左邊</div> <div class="clearfix"></div><!--清理浮動div--> <div class="dv">右邊</div> <!--顯示與隱藏--> <p>下面是顯示與隱藏</p> <div class="show dv">顯示</div> <div class="hidden dv">隱藏</div> <hr/> <!--響應式佈局--> <p>下面是響應式佈局內容</p> <div class="visible-xs-block dv"> 超小屏時顯示 </div> <div class="visible-xs-inline dv"><!--內聯時加長度寬度是沒用的--> 超小屏時顯示 </div> <div class="hidden-xs dv"> 超小屏幕時隱藏 </div> </div> </body> </html> <script src="Content/js/jquery.min.js"></script> <script src="Content/js/bootstrap.min.js"></script>
六》 進度條和回帖媒體控件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--下面這句mata語句是解決手機瀏覽出現顯示不和諧問題--> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" /> <title>進度條和回帖媒體控件</title> <link href="Content/css/bootstrap.min.css" rel="stylesheet" /> </head> <body style="padding:40px;"> <div class="well well-lg"> BootStrap </div> <h3>進度條組件</h3> //基本進度條 <div class="progress"> <div class="progress-bar" style="width:60%;">60%</div> </div> //最低值進度條 <div class="progress"> <div class="progress-bar" style="min-width:20px">0%</div> </div> //條文狀 <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" style="min-width:20px;width:60%">60%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped active" style="min-width:20px;width:60%">60%</div> </div> //堆疊效果 <div class="progress"> <div class="progress-bar progress-bar-success" style="min-width:20%;width:35%;">35%</div> <div class="progress-bar progress-bar-warning" style="min-width:20%;width:20%;">20%</div> <div class="progress-bar progress-bar-danger" style="min-width:20%;width:10%;">10%</div> </div> //媒體對象組件 <div class="media"> <div class="media-left"> <img src="Imgs/2.jpg" alt="圖片" class="media-object" /> </div> <div class="media-body"> <h4 class="media-heading">我是標題</h4> <p>文章1984年出生於陝西省西安市。上高三的時候，文章被保送到四川師範大學藝術學院學習影視表演，可是他並未進入這個學校，而是決心去北京學習。在填寫大學志願以前，文章專門去北京考察了中國兩大藝術院校文章1984年出生於陝西省西安市。上高三的時候，文章被保送到四川師範大學藝術學院學習影視表演，可是他並未進入這個學校，而是決心去北京學習。在填寫大學志願以前，文章專門去北京考察了中國兩大藝術院校文章1984年出生於陝西省西安市。上高三的時候</p> </div> </div> <div class="media"> <div class="media-left media-middle"> <img src="Imgs/2.jpg" alt="圖片" class="media-object" /> </div> <div class="media-body"> <h4 class="media-heading">我是標題</h4> <p>文章1984年出生於陝西省西安市。上高三的時候，文章被保送到四川師範大學藝術學院學習影視表演，可是他並未進入這個學校，而是決心去北京學習。在填寫大學志願以前</p> </div> </div> //媒體對象列表 --針對評論回覆而生 <ul class="media-list"> <li class="media"> <div class="media-left"> <img src="Imgs/2.jpg" alt="圖片" class="media-object" /> </div> <div class="media-body"> <h4 class="media-heading">我是標題1</h4> <p>文章1984年出生於陝西省西安市。上高三的時候，文章被保送到四川師範大學藝術學院學習影視表演，可是他並未進入這個學校，而是決心去北京學習。在填寫大學志願以前</p> <div class="media"> <div class="media-left"> <img src="Imgs/2.jpg" alt="圖片" class="media-object" /> </div> <div class="media-body"> <h4 class="media-heading">我是回覆2</h4> <p>文章1984年出生於陝西省西安市。上高三的時候，文章被保送到四川師範大學藝術學院學習影視表演，可是他並未進入這個學校，而是決心去北京學習。在填寫大學志願以前</p> <div class="media"> <div class="media-left"> <img src="Imgs/2.jpg" alt="圖片" class="media-object" /> </div> <div class="media-body"> <h4 class="media-heading">我是回覆3</h4> <p>文章1984年出生於陝西省西安市。上高三的時候，文章被保送到四川師範大學藝術學院學習影視表演，可是他並未進入這個學校，而是決心去北京學習。在填寫大學志願以前，文章專門去北京考察了中國兩大藝術院校文章1984年出生於陝西省西安市。</p> </div> </div> </div> </div> <div class="media"> <div class="media-left"> <img src="Imgs/2.jpg" alt="圖片" class="media-object" /> </div> <div class="media-body"> <h4 class="media-heading">我是回覆2</h4> <p>文章1984年出生於陝西省西安市。上高三的時候，文章被保送到四川師範大學藝術學院學習影視表演，可是他並未進入這個學校，而是決心去北京學習。在填寫大學志願以前，文章專門去北京考察了中國兩大藝術院校文章1984年出生於陝西省西安市。上高三的時候，</p> </div> </div> </div> </li> <li class="media"> <div class="media-left"> <img src="Imgs/2.jpg" alt="圖片" class="media-object" /> </div> <div class="media-body"> <h4 class="media-heading">我是標題</h4> <p>文章1984年出生於陝西省西安市。上高三的時候，文章被保送到四川師範大學藝術學院學習影視表演，可是他並未進入這個學校，而是決心去北京學習。在填寫大學志願以前</p> </div> </li> </ul> </body> </html> <script src="Content/js/jquery.min.js"></script> <script src="Content/js/bootstrap.min.js"></script>
七》巨幕頁頭縮略圖和警告框組件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--下面這句mata語句是解決手機瀏覽出現顯示不和諧問題--> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" /> <title>巨幕頁頭縮略圖和警告框組件</title> <link href="Content/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <div class="container"> <div class="jumbotron"> <h3>網站標題</h3> <p>個人網站詳情簡介!</p> <p><a href="##" class="btn btn-default">快速進入~</a></p> </div> </div> <div class="jumbotron"> <div class="container"> <h3>網站標題</h3> <p>個人網站詳情簡介!</p> <p><a href="##" class="btn btn-default">快速進入~</a></p> </div> </div> <div class="page-header"> <h1>我是大標題<small>我是小標題</small></h1> </div> <br/> <h4>縮略圖</h4> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="thumbnail"> <img src="Imgs/1.jpg" /> <div> <h3>圖片</h3> <p>關於這張圖片的詳情!</p> <p><a href="##" class="btn btn-default">快速進入</a></p> </div> </div> </div> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="thumbnail"> <img src="Imgs/1.jpg" /> <div> <h3>圖片</h3> <p>關於這張圖片的詳情!</p> <p><a href="##" class="btn btn-default">快速進入</a></p> </div> </div> </div> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="thumbnail"> <img src="Imgs/1.jpg" /> <div> <h3>圖片</h3> <p>關於這張圖片的詳情!</p> <p><a href="##" class="btn btn-default">快速進入</a></p> </div> </div> </div> <div class="col-md-3 col-sm-4 col-xs-6"> <div class="thumbnail"> <img src="Imgs/1.jpg" /> <div> <h3>圖片</h3> <p>關於這張圖片的詳情!</p> <p><a href="##" class="btn btn-default">快速進入</a></p> </div> </div> </div> </div> </div> <h4>警告框組件!</h4> <div class="alert alert-success" style="margin:0 20px;"> 我是一個成功警告框!<a href="##" class="alert-link">點擊進入~</a> <button class="close" data-dismiss="alert" > <span>×</span> </button> </div><br/><br/> </body> </html> <script src="Content/js/jquery.min.js"></script> <script src="Content/js/bootstrap.min.js"></script>
八》列表組面板和嵌入組件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--下面這句mata語句是解決手機瀏覽出現顯示不和諧問題--> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" /> <title>列表組面板和嵌入組件</title> <link href="Content/css/bootstrap.min.css" rel="stylesheet" /> </head> <body style="padding:50px;"> //列表組件 <ul class="list-group"> <li class="list-group-item">1.這是首頁<span class="badge">10</span></li> <li class="list-group-item">2.這是第二頁</li> <li class="list-group-item">3.這是第三頁</li> <li class="list-group-item">4.這是第四頁</li> </ul> <div class="list-group"> <a href="##" class="list-group-item">1.這是首頁<span class="badge">10</span></a> <a href="##" class="list-group-item active">2.這是第二頁</a> <a href="##" class="list-group-item disabled">3.這是第三頁</a> <a href="##" class="list-group-item list-group-item-success">4.這是第四頁</a> </div> //容器組件<br/> --基本樣例 <div class="panel panel-default"> <div class="panel-body"> 這裏是詳細內容區! </div> </div> --代標題容器的面板 <div class="panel panel-danger"> <div class="panel-heading"> 面板標題 </div> <div class="panel-body"> 這裏是詳細內容區! <table class="table"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> </div> <div class="panel-body"> 我是底部 </div> </div> //響應嵌入組件<br/> <div class="embed-responsive embed-responsive-4by3"> <embed src="http://www.tudou.com/v/ZeeDwqfeSkc/&bid=05&resourceId=0_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="100%" height="100%"></embed> </div> </body> </html> <script src="Content/js/jquery.min.js"></script> <script src="Content/js/bootstrap.min.js"></script>
九》模態框插件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--下面這句mata語句是解決手機瀏覽出現顯示不和諧問題--> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" /> <title>模態框插件</title> <link href="Content/css/bootstrap.min.css" rel="stylesheet" /> </head> <body style="padding:100px;"> //模態框<br/> <div class="modal fade" id="myModal" tabindex="-1"> <!--窗口聲明--> <div class="modal-dialog"> <!--內容聲明--> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal"><span>×</span></button> <h4 class="modal-title">會員登陸</h4> </div> <div class="modal-body"> <p>我是內容部分</p> <div class="row"> <div class="col-md-4">1</div> <div class="col-md-4">2</div> <div class="col-md-4">3</div> </div> </div> <div class="modal-footer"> <button class="btn btn-default">註冊</button> <button class="btn btn-primary">登錄</button> </div> </div> </div> </div> <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">點擊彈窗1</button> <button class="btn btn-primary btn-lg" data-toggle="modal" data-backdrop="static" data-target="#myModal">點擊彈窗2</button><!--點擊空白處不關閉--> <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" href="content.html">點擊彈窗彈出其它頁面內容</button> <input type="button" class="btn btn-primary" id="btnShow1" value="點我顯示內容"/> </body> </html> <script src="Content/js/jquery.min.js"></script> <script src="Content/js/bootstrap.min.js"></script> <script> $(function () { //當點擊是顯示模態框 $("#btnShow1").on('click', function () { $("#myModal").modal('show'); }) //當模態框徹底關閉時觸發 $("#myModal").on('hidden.bs.modal', function () { alert('hello'); }) }) </script>
十》圖標菜單和按鈕組件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--下面這句mata語句是解決手機瀏覽出現顯示不和諧問題--> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" /> <title>圖標菜單和按鈕組件</title> <link href="Content/css/bootstrap.min.css" rel="stylesheet" /> <style> .a { height: 50px; border: 1px solid #ccc; background-color: #eee; } </style> </head> <body style="padding:50px;"> <i class="glyphicon glyphicon-star"></i><!--glyphicon這個只能證實我是一個圖標，具體的後面設置--> <i class="glyphicon glyphicon-tasks"></i> <!--更多圖標詳見:http://www.ssdn2007.com/bootstrap-glyphicons.html--> <!--圖標結合按鈕來使用--> <button class="btn btn-default btn-lg"><!-- btn-lg大圖標--> <i class="glyphicon glyphicon-tasks"></i> </button> <!--下拉菜單組件--> //下拉菜單基本格式 <div class="dropdown"><!--dropdown還能夠改成dropup,.open默認展現下拉列表--> <button class="btn btn-default" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="##">首頁</a></li> <li><a href="##">資訊</a></li> <li class="divider"></li> <li><a href="##">產品</a></li> <li class="divider"></li><!--添加分割線--> <li><a href="##">關於</a></li> </ul> </div> <div class="dropdown"> <button class="btn btn-default" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right"><!--dropdown-menu-right修改下拉菜單的對齊方式，點擊時右邊顯示--> <li class="dropdown-header">網站導航</li> <li><a href="##">首頁</a></li> <li><a href="##">資訊</a></li> <li><a href="##">產品</a></li> <li><a href="##">關於</a></li> </ul><br/> <button class="btn btn-default">左</button> <button class="btn btn-default">中</button> <button class="btn btn-default">右</button> <div class="btn-group"> <button class="btn btn-default">左</button> <button class="btn btn-default">中</button> <button class="btn btn-default">右</button> <!--嵌套一個下拉菜單分組--> <div class="btn-group"> <!--dropdown還能夠改成dropup,.open默認展現下拉列表--> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="##">首頁</a></li> <li><a href="##">資訊</a></li> <li class="divider"></li> <li><a href="##">產品</a></li> <li class="divider"></li><!--添加分割線--> <li><a href="##">關於</a></li> </ul> </div> </div> </div><br/> <!--讓分組裏面的按鈕垂直排列--> -----右面是垂直排列 <div class="btn-group-vertical"> <button class="btn btn-default">左</button> <button class="btn btn-default">中</button> <button class="btn btn-default">右</button> </div><br/> <!--a標籤分組顯示--> ------下面是a標籤分組顯示 <div class="btn-group-justified"> <a class="btn btn-default">左</a> <a class="btn btn-default">中</a> <a class="btn btn-default">右</a> </div> </body> </html> <script src="Content/js/jquery.min.js"></script> <script src="Content/js/bootstrap.min.js"></script>
十一》下拉菜單
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--下面這句mata語句是解決手機瀏覽出現顯示不和諧問題--> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" /> <title>下拉菜單</title> <link href="Content/css/bootstrap.min.css" rel="stylesheet" /> </head> <body style="padding:50px;"> //下拉菜單 <div class="dropdown"> <button class="btn btn-primary" id="btn" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu" > <li><a href="##">首頁</a></li> <li><a href="##">諮詢</a></li> <li><a href="##">產品</a></li> <li><a href="##">關於</a></li> </ul> </div> <br/> //導航欄 <nav id="nav" class="navbar navbar-default"> <a href="#" class="navbar-brand">Web開發</a> <ul class="nav navbar-nav"> <li><a href="#html5">HTML5</a></li> <li><a href="#bootstrap">BootStrap</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown">JavaScript<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#jquery">Jquery</a></li> <li><a href="#yui">Yui</a></li> <li><a href="#extjs">ExtJS</a></li> </ul> </li> </ul> </nav> <div id="content" data-offset="0" data-spy="scroll" style="padding:0 10px;height:100px;overflow:auto;position:relative;"> <section class="sec"><!--刪除包裹--> <h4 id="html5">HTML5<a href="#" onclick="removeSec(this)">刪除</a></h4> <p>標準通用標記語言的下一個應用Html5</p> </section> <section class="sec"> <h4 id="bootstrap">BootStrap</h4> <p>基於Html，CSS,JS的一個框架</p> </section> <section class="sec"> <h4 id="jquery">Jquery</h4> <p>一個優秀的JavaScript庫</p> </section> <section class="sec"> <h4 id="yui">Yui</h4> <p>以BootStrap爲表明的前端開發框架如雨後春筍般擠入視野</p> </section> <section class="sec"> <h4 id="extjs">Extjs</h4> <p>富客戶端Ajax應用</p> </section> </div> </body> </html> <script src="Content/js/jquery.min.js"></script> <script src="Content/js/bootstrap.min.js"></script> <script> //新條目被激活時觸發 //$("#nav").on('activate.bs.scrollspy', function () { // alert('新條目被激活'); //}) function removeSec(e) { $(e).parents('.sec').remove(); $("#content").scrollspy('refresh');//刷新結構 } </script>
十二》響應式導航
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--下面這句mata語句是解決手機瀏覽出現顯示不和諧問題--> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" /> <title>響應式導航</title> <link href="Content/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <p>//基本導航樣式組件+響應式</p> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand" style="margin:0;padding:0;"><img src="Imgs/5.png" alt="看世界新聞網" /></a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">切換導航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-right" style="margin-top:0;"> <li class="active"><a href="#"><span class="glyphicon glyphicon-home">首 頁</span></a></li> <li><a href="#"><span class="glyphicon glyphicon-adjust">諮 詢</span></a></li> <li><a href="#"><span class="glyphicon glyphicon-apple">案 例</span></a></li> <li><a href="#"><span class="glyphicon glyphicon-backward">簡 介</span></a></li> </ul> </div> </div> </nav> </body> </html> <script src="Content/js/jquery.min.js"></script> <script src="Content/js/bootstrap.min.js"></script> <script> </script>
十三》響應式輪播圖插件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--下面這句mata語句是解決手機瀏覽出現顯示不和諧問題--> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" /> <title>響應式輪播圖插件</title> <link href="Content/css/bootstrap.min.css" rel="stylesheet" /> <style> .carousel-inner img{ margin:0px auto; } /*設置左右移動樣式大小*/ .carousel-control{ font-size:100px; } </style> </head> <body> <p>//基本導航樣式組件+響應式</p> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand" style="margin:0;padding:0;"><img src="Imgs/5.png" alt="看世界新聞網" /></a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">切換導航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-right" style="margin-top:0;"> <li class="active"><a href="#"><span class="glyphicon glyphicon-home">首 頁</span></a></li> <li><a href="#"><span class="glyphicon glyphicon-adjust">諮 詢</span></a></li> <li><a href="#"><span class="glyphicon glyphicon-apple">案 例</span></a></li> <li><a href="#"><span class="glyphicon glyphicon-backward">簡 介</span></a></li> </ul> </div> </div> </nav> <!--以上是響應式輪播圖插件--> <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active" style="background:#223240;"> <img src="Imgs/l4.jpg" alt="第一張" /> </div> <div class="item" style="background:#F5EDDC;"> <img src="Imgs/l4.jpg" alt="第二張" /> </div> <div class="item" style="background:#DE2A2D;"> <img src="Imgs/l4.jpg" alt="第三張" /> </div> </div> <a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a> <a href="#myCarousel" data-slide="next" class="carousel-control right">›</a> </div> </body> </html> <script src="Content/js/jquery.min.js"></script> <script src="Content/js/bootstrap.min.js"></script> <script> $(function () { //輪播圖自動播放 $("#myCarousel").carousel({ //自動2秒播放 interval:4000 }); //讓左右移動圖標 垂直居中 $(".carousel-control").css('line-height', $('.carousel-inner img').height() + 'px'); $(window).resize(function () { var $height = $('.carousel-inner img').eq(0).height() || $('.carousel-inner img').eq(1).height() || $('.carousel-inner img').eq(2).height(); $(".carousel-control").css('line-height', $height + 'px'); }); }) </script>
代碼連接：http://pan.baidu.com/s/1o8GTELc 密碼：lzko
相關文章
- 1. 前端框架——BootStrap學習
- 2. Web前端學習筆記：Bootstrap框架
- 3. Web前端框架學習—Bootstrap
- 4. bootstrap 前端框架學習筆記
- 5. 前端框架Bootstrap
- 6. 前端框架-Bootstrap
- 7. bootstrap前端框架
- 8. Bootstrap前端框架
- 9. 【前端框架】前端框架學習
- 10. Bootstrap前端框架學習總結---Bootstrap介紹
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策
歡迎關注本站公眾號,獲取更多信息
相關文章