使用 Bootstrap 4 製作簡易網站
模仿Honda 的官方網站 ,
並使用Bootstrap 4 製作出一個相似的簡易網站頁面~
程式碼如下~
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>My-First-Web</title> <!-- 引入google字體 --> <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900&subset=latin-ext" rel="stylesheet"> <style type="text/css"> body{ font-family: '微軟正黑體', 'Noto Sans TC', Helvetica, Arial, '黑體-繁', 'Heiti TC', '儷黑', 'LiHei', 'Microsoft JhengHei', sans-serif; } .m-font{ font-size: 20px; } .title{ font-weight: 900; border-left: 5px black solid; padding-left: 10px; margin: 50px 0; } .botton-box{ padding: 20px 0; background-color: #f0f0f0; border-bottom: 2px #c9161c solid; } .botton-box-font{ font-size: 20px; font-weight: 900; } </style> </head> <body> <!-- 導覽列 --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"> <img src="https://www.honda-taiwan.com.tw/images/header/header-logo.png" height="20" class="mb-1"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle m-font" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 車款介紹 </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">FIT</a> <a class="dropdown-item" href="#">CITY</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">CRV</a> <a class="dropdown-item" href="#">HRV</a> </div> </li> <li class="nav-item"> <a class="nav-link m-font" href="#">購車優惠</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle m-font" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 最新消息 </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">品牌活動</a> <a class="dropdown-item" href="#">服務活動</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">中獎名單</a> </div> </li> <li class="nav-item"> <a class="nav-link m-font" href="#">關於Honda</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="關鍵字" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜尋</button> </form> </div> </nav> <!-- 輪播 --> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://www.honda-taiwan.com.tw/UploadFiles/Banners/1920x640-0730.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://www.honda-taiwan.com.tw/UploadFiles/Banners/【PC首頁】1920x640_輕鬆購(05).jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://www.honda-taiwan.com.tw//UploadFiles/Banners/【PC首頁】1920x640_振興有禮FN.jpg" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- 最新消息 --> <div class="container"> <h2 class="title">最新消息</h2> <div class="row"> <div class="col-12 col-md-4"> <div class="card"> <img src="https://www.honda-taiwan.com.tw/UploadFiles/Articles/【購車優惠】366x228_振興有禮 FN(1).jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">more</a> </div> </div> </div> <div class="col-12 col-md-4"> <div class="card"> <img src="https://www.honda-taiwan.com.tw/UploadFiles/Articles/NEWS(33).jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">more</a> </div> </div> </div> <div class="col-12 col-md-4"> <div class="card"> <img src="https://www.honda-taiwan.com.tw/UploadFiles/Articles/366-228.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">more</a> </div> </div> </div> </div> </div> <!-- 促銷活動 --> <div class="container"> <h2 class="title">促銷活動</h2> <div class="row"> <div class="col-12 col-md-4"> <div class="card"> <img src="https://www.honda-taiwan.com.tw/UploadFiles/Articles/【購車優惠】366x228_振興有禮 FN(1).jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">more</a> </div> </div> </div> <div class="col-12 col-md-4"> <div class="card"> <img src="https://www.honda-taiwan.com.tw/UploadFiles/Articles/NEWS(33).jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">more</a> </div> </div> </div> <div class="col-12 col-md-4"> <div class="card"> <img src="https://www.honda-taiwan.com.tw/UploadFiles/Articles/366-228.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">more</a> </div> </div> </div> </div> </div> <div class="container mt-3"> <div class="row"> <div class="col-6 col-md-3 mt-2"> <div class="card botton-box"> <div class="card-body text-center"> <svg width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-calendar-week-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4V.5zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2zM9.5 7a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm3 0a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zM2 10.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z"/> </svg> <div class="botton-box-font mt-2">預約保養</div> </div> </div> </div> <div class="col col-md-3 mt-2"> <div class="card botton-box"> <div class="card-body text-center"> <svg width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-tools" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M0 1l1-1 3.081 2.2a1 1 0 0 1 .419.815v.07a1 1 0 0 0 .293.708L10.5 9.5l.914-.305a1 1 0 0 1 1.023.242l3.356 3.356a1 1 0 0 1 0 1.414l-1.586 1.586a1 1 0 0 1-1.414 0l-3.356-3.356a1 1 0 0 1-.242-1.023L9.5 10.5 3.793 4.793a1 1 0 0 0-.707-.293h-.071a1 1 0 0 1-.814-.419L0 1zm11.354 9.646a.5.5 0 0 0-.708.708l3 3a.5.5 0 0 0 .708-.708l-3-3z"/> <path fill-rule="evenodd" d="M15.898 2.223a3.003 3.003 0 0 1-3.679 3.674L5.878 12.15a3 3 0 1 1-2.027-2.027l6.252-6.341A3 3 0 0 1 13.778.1l-2.142 2.142L12 4l1.757.364 2.141-2.141zm-13.37 9.019L3.001 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z"/> </svg> <div class="botton-box-font mt-2">召修查詢</div> </div> </div> </div> <div class="col-6 col-md-3 mt-2"> <div class="card botton-box"> <div class="card-body text-center"> <svg width="3em" height="3.0625em" viewBox="0 0 16 17" class="bi bi-compass-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M15.5 8.516a7.5 7.5 0 1 1-9.462-7.24A1 1 0 0 1 7 0h2a1 1 0 0 1 .962 1.276 7.503 7.503 0 0 1 5.538 7.24zm-3.61-3.905L6.94 7.439 4.11 12.39l4.95-2.828 2.828-4.95z"/> </svg> <div class="botton-box-font mt-2">維修據點</div> </div> </div> </div> <div class="col-6 col-md-3 mt-2"> <div class="card botton-box"> <div class="card-body text-center"> <svg width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-wrench" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M.102 2.223A3.004 3.004 0 0 0 3.78 5.897l6.341 6.252A3.003 3.003 0 0 0 13 16a3 3 0 1 0-.851-5.878L5.897 3.781A3.004 3.004 0 0 0 2.223.1l2.141 2.142L4 4l-1.757.364L.102 2.223zm13.37 9.019L13 11l-.471.242-.529.026-.287.445-.445.287-.026.529L11 13l.242.471.026.529.445.287.287.445.529.026L13 15l.471-.242.529-.026.287-.445.445-.287.026-.529L15 13l-.242-.471-.026-.529-.445-.287-.287-.445-.529-.026z"/> </svg> <div class="botton-box-font mt-2">道路救援</div> </div> </div> </div> </div> </div> <div class="mt-5"></div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
留言
張貼留言