第二百五十三节，Bootstrap项目实战-资讯
生活随笔
收集整理的這篇文章主要介紹了
第二百五十三节，Bootstrap项目实战-资讯
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Bootstrap項目實戰-資訊
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"><link rel="stylesheet" href="css/zix.css"> </head> <body> <!--導航--> <nav class="navbar navbar-default navbar-fixed-top"> <!--聲明導航區域，設置導航默認樣式，設置導航條固定在頂部--><div class="container"> <!--設置固定布局，最大寬度1140--><div class="navbar-header"> <!--設置導航標題區域--><a href="#" class="navbar-brand logo">自貢瑞佳財務咨詢有限公司</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 dhul"> <!--設置列表區域，導航列表默認樣式，導航列表右浮動--><li class="active"><a href="ceshi.html"><span class="glyphicon glyphicon-home"></span> 首頁</a></li> <!--設置當前列表首先--><li><a href="zix.html"><span class="glyphicon glyphicon-list"></span> 資訊</a></li> <!--設置當前列表圖標--><li><a href="#"><span class="glyphicon glyphicon-fire"></span> 案例</a></li><li><a href="#"><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 tp1"> <!--設置輪播器圖片樣式--><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><!--設置輪播器箭頭區域--><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 id="information"><div class="container"><div class="row"><div class="col-md-8 info-left"><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/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/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/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/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></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/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/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/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 class="dibu"><div class="container"><div class="row"><div class="col-md-6"><h4 class="text-center">聯系方式</h4><p>聯系人:游先生</p><p>手機:18681395066 13096006150</p><p>座機:0813-8287339</p><p>Q Q:350016919</p><p>郵箱:350016919@qq.com</p><p>地址:自貢市自流井區丹桂東段泰豐大廈1區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>版權所有 ? 自貢瑞佳財務咨詢有限公司 未經許可 嚴禁復制</p><p><a href="http://www.jxiou.com/" target="_blank">自貢玉秀文化傳播技術支持</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"; /*資訊內容 CSS*/ #information {padding: 40px 0;background: #eee; }.info-right {background-color: #fff;box-shadow: 2px 2px 3px #ccc; }.info-right blockquote {padding: 0;margin: 0; }.info-right h2 {font-size: 20px;padding: 5px; }.info-right h4 {line-height: 1.6; }.info-content {background-color: #fff;box-shadow: 2px 2px 3px #ccc;margin: 0 0 20px 0; }.info-content img {margin: 12px 0; }.info-content h4 {font-size: 14px;padding: 2px 0 0 0; }.info-content p {line-height: 1.6;color: #666; }/*對于.info-content h4，在中屏和大屏需要保持一行。*/ .info-content h4 {overflow: hidden;white-space: nowrap;text-overflow: ellipsis; } blockquote{border-left:5px solid #0f68ee; }
重點：用柵格系統布局
總結
以上是生活随笔為你收集整理的第二百五十三节，Bootstrap项目实战-资讯的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： primeNG DataTable中Te
- 下一篇： java关键字总结