Bootstrap基礎案例
阿新 • • 發佈：2020-10-12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Document</title> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script> <![endif]--> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="css/index.css"> <title>阿里佰秀</title> </head> <body> <div class="container"> <div class="row"> <header class='col-md-2'><div class="logo"> <a href="#"> <img class='hidden-xs' src="images/logo.png" alt=""> <span class='visible-xs'>阿里佰秀</span> </a> </div> <div class="nav"> <ul> <li><a href="#" class='glyphicon glyphicon-camera'>生活館</a></li> <li><a href="#" class='glyphicon glyphicon-picture'>自然匯</a></li> <li><a href="#" class='glyphicon glyphicon-phone'>科技潮</a></li> <li><a href="#" class='glyphicon glyphicon-gift'>奇趣事</a></li> <li><a href="#" class='glyphicon glyphicon-glass'>美食傑</a></li> </ul> </div> </header> <article class='col-md-7'> <div class="news clearfix"> <ul> <li> <a href="#"> <img src="upload/lg.png" alt=""> <p>阿里佰秀</p> </a> </li> <li> <a href="#"> <img src="upload/1.jpg" alt=""> <p>奇了，成都一小區護衛長得像馬雲，市民爭相拍照留戀</p> </a> </li> <li> <a href="#"> <img src="upload/3.jpg" alt=""> <p>奇了，成都一小區護衛長得像馬雲，留戀</p> </a> </li> <li> <a href="#"> <img src="upload/4.jpg" alt=""> <p>奇了，成都一小區護衛長，市民爭相拍照留戀</p> </a> </li> <li> <a href="#"> <img src="upload/2.jpg" alt=""> <p>阿奇了，成小區護衛長得爭相拍照留戀</p> </a> </li> </ul> </div> <div class="publish"> <div class="row"> <div class="col-sm-9"> <h3>生活館 關於指甲的10個健康知識 你知道幾個？</h3> <p class="text-muted hidden-xs">阿里佰秀 釋出於2020-10-12</p> <p class='hidden-xs'>指甲時人身體上的關鍵部件，沒了他，人就會受苦啊！別小看它，他就像鎧甲一樣可以保護人的指頭，快看看關於它的十個常識吧！</p> <p class="text-muted">閱讀(2417) 評論(1) 贊(18) <span class='hidden-xs'>標籤：健康 / 感染 / 指甲 / 疾病 / 面板 / 營養 / 趣味生活</span> </p> </div> <div class="col-sm-3 hidden-xs"> <img src="upload/3.jpg" alt=""> </div> </div> <div class="row"> <div class="col-sm-9"> <h3>生活館 關於指甲的10個健康知識 你知道幾個？</h3> <p class="text-muted hidden-xs">阿里佰秀 釋出於2020-10-12</p> <p class='hidden-xs'>指甲時人身體上的關鍵部件，沒了他，人就會受苦啊！別小看它，他就像鎧甲一樣可以保護人的指頭，快看看關於它的十個常識吧！</p> <p class="text-muted">閱讀(2417) 評論(1) 贊(18) <span class='hidden-xs'>標籤：健康 / 感染 / 指甲 / 疾病 / 面板 / 營養 / 趣味生活</span> </p> </div> <div class="col-sm-3 hidden-xs"> <img src="upload/3.jpg" alt=""> </div> </div> <div class="row"> <div class="col-sm-9"> <h3>生活館 關於指甲的10個健康知識 你知道幾個？</h3> <p class="text-muted hidden-xs">阿里佰秀 釋出於2020-10-12</p> <p class='hidden-xs'>指甲時人身體上的關鍵部件，沒了他，人就會受苦啊！別小看它，他就像鎧甲一樣可以保護人的指頭，快看看關於它的十個常識吧！</p> <p class="text-muted">閱讀(2417) 評論(1) 贊(18) <span class='hidden-xs'>標籤：健康 / 感染 / 指甲 / 疾病 / 面板 / 營養 / 趣味生活</span> </p> </div> <div class="col-sm-3 hidden-xs"> <img src="upload/3.jpg" alt=""> </div> </div> <div class="row"> <div class="col-sm-9"> <h3>生活館 關於指甲的10個健康知識 你知道幾個？</h3> <p class="text-muted hidden-xs">阿里佰秀 釋出於2020-10-12</p> <p class='hidden-xs'>指甲時人身體上的關鍵部件，沒了他，人就會受苦啊！別小看它，他就像鎧甲一樣可以保護人的指頭，快看看關於它的十個常識吧！</p> <p class="text-muted">閱讀(2417) 評論(1) 贊(18) <span class='hidden-xs'>標籤：健康 / 感染 / 指甲 / 疾病 / 面板 / 營養 / 趣味生活</span> </p> </div> <div class="col-sm-3 hidden-xs"> <img src="upload/3.jpg" alt=""> </div> </div> <div class="row"> <div class="col-sm-9"> <h3>生活館 關於指甲的10個健康知識 你知道幾個？</h3> <p class="text-muted hidden-xs">阿里佰秀 釋出於2020-10-12</p> <p class='hidden-xs'>指甲時人身體上的關鍵部件，沒了他，人就會受苦啊！別小看它，他就像鎧甲一樣可以保護人的指頭，快看看關於它的十個常識吧！</p> <p class="text-muted">閱讀(2417) 評論(1) 贊(18) <span class='hidden-xs'>標籤：健康 / 感染 / 指甲 / 疾病 / 面板 / 營養 / 趣味生活</span> </p> </div> <div class="col-sm-3 hidden-xs"> <img src="upload/3.jpg" alt=""> </div> </div> </div> </article> <aside class='col-md-3'> <a href="#" class='banner'> <img src="upload/zgboke.jpg" alt=""> </a> <a href="#" class="hot"> <span class="btn btn-primary">熱搜</span> <h4 class='text-primary'>歡迎加入中國部落格聯盟</h4> <p class='text-muted'>這裡有很多的東西呦！有很多優秀的部落格，是一個全人工的編輯開放平臺，用於交流與展示......</p> </a> </aside> </div> </div> </body> </html>
ul { list-style-type: none; margin: 0; padding: 0; } a { color: #666; text-decoration: none; } a:hover { text-decoration: none; } body { background-color: #f5f5f5; } .container { background-color: #fff; } /* 當尺寸大於1280px時，觸發 */ @media screen and (min-width: 1280px) { .container { width: 1280px; } } /* header */ .logo { background-color: #429ad9; } .logo img { max-width: 100%; /* logo圖片不需要縮放 */ margin: 0 auto; display: block; } .logo span { display: block; height: 50px; line-height: 50px; color: #fff; font-size: 18px; text-align: center; } header { padding-left: 0!important; padding-right: 0!important; } article { padding-right: 5px!important; } .nav { background-color: #eee; border-bottom: 1px solid #ccc; } .nav a { display: block; height: 50px; line-height: 50px; padding-left: 30px; } .nav a:hover { background-color: #fff; color: #333; } .nav a::before { vertical-align: middle; padding-right: 5px; } @media screen and (max-width: 991px) { .nav li { float: left; width: 20%; } article { margin-top: 10px; } } @media screen and (max-width: 767px) { .nav li a { font-size: 14px; padding-left: 0; } .news li:nth-child(1) { width: 100%!important; } .news li { width: 50%!important; } .publish h3 { font-size: 14px; } } .news li { width: 25%; float: left; height: 128px; padding-right: 10px; margin-bottom: 10px; } .news li a { width: 100%; height: 100%; display: block; background-color: lightgreen; position: relative; } .news li:nth-child(1) { width: 50%; height: 266px; } .news li:nth-child(1) p { line-height: 41px; padding: 0 10px; } .news li a img { width: 100%; height: 100%; } .news li a p { position: absolute; bottom: 0; left: 0; width: 100%; margin-bottom: 0; background-color: rgba(0, 0, 0, .5); font-size: 12px; color: #fff; height: 41px; padding: 5px 10px; } .publish { border-top: 1px solid #ccc; } .publish .row { border-bottom: 1px solid #ccc; } .publish img { margin-top: 10px; padding: 10px 0; width: 100%; } .banner img { width: 100%; } .hot { border: 1px solid #ccc; display: block; margin-top: 20px; padding: 0 20px 20px; } .hot span { border-radius: 0; margin-bottom: 20px; } .hot p { font-size: 12px; }