# 2019-10-15 上課程式碼 ## 範例一 * bootstrap.html ```htmlmixed= <!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8 "> <meta name="viewport " content="width=device-width, initial-scale=1.0 "> <meta http-equiv="X-UA-Compatible " content="ie=edge "> <title>Bootstrap 練習</title> <!-- 引用 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"> <!-- 引用自己定義的CSS --> <link rel="stylesheet" href="./css/bootstrap.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> </div> </div> <!-- 引用 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> ``` * bootstrap.css ```css= body>div>div>div:nth-child(1) { background-color: #99d2ff; text-align: center; } body>div>div>div:nth-child(2) { background-color: #a0f3a4; } body>div>div>div:nth-child(3) { background-color: #f0f995; padding-right: 20px; padding-left: 20px; } ``` ## 範例二 * bootstrap.html ```htmlmixed= <!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8 "> <meta name="viewport " content="width=device-width, initial-scale=1.0 "> <meta http-equiv="X-UA-Compatible " content="ie=edge "> <title>Bootstrap 練習</title> <!-- 引用 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"> <!-- 引用自己定義的CSS --> <link rel="stylesheet" href="./css/bootstrap.css"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-sm"> <img src="https://placem.at/places?h=500" alt=""> </div> <div class="col-sm"> <p>室保我童不人毒是病也做們們電看史開重於，書服對如遊往思和這……以不長外濟那形有反？業這者下感，維然是金有印著：連老強個、到同活是小級會！時門利、那響日量對氣能轉態之年父如己愛眼資般學場十像國效當放種士能分委了第起起的的生入是過人物物不太來這算看開案賣一所。</p> </div> <div class="col-sm"> One of three columns </div> </div> </div> <!-- 引用 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> ``` * bootstrap.css ```css body>div>div>div:nth-child(1) { background-color: #99d2ff; text-align: center; } body>div>div>div:nth-child(2) { background-color: #a0f3a4; } body>div>div>div:nth-child(3) { background-color: #f0f995; padding-right: 20px; padding-left: 20px; } body>div>div>div:nth-child(1)>img { width: 100%; } ``` ## 範例三 * bootstrap.html ```htmlmixed= <!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8 "> <meta name="viewport " content="width=device-width, initial-scale=1.0 "> <meta http-equiv="X-UA-Compatible " content="ie=edge "> <title>Bootstrap 練習</title> <!-- 引用 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"> <!-- 引用自己定義的CSS --> <link rel="stylesheet" href="./css/bootstrap.css"> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-sm"> <img style="width:100%" src="https://placem.at/places?h=500" alt=""> </div> <div class="col-sm"> <p>室保我童不人毒是病也做們們電看史開重於，書服對如遊往思和這……以不長外濟那形有反？業這者下感，維然是金有印著：連老強個、到同活是小級會！時門利、那響日量對氣能轉態之年父如己愛眼資般學場十像國效當放種士能分委了第起起的的生入是過人物物不太來這算看開案賣一所。</p> </div> <div class="col-sm"> One of three columns </div> </div> <div class="row"> <div class="col-8"><img style="width:100%" src="https://placem.at/places?h=300&w=500" alt=""></div> <div class="col-4"> <button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-success">Success</button> <button class="btn btn-danger">Danger</button> </div> </div> </div> <!-- 引用 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> ``` * bootstrap.css ```css body>div>div>div:nth-child(1) { background-color: #99d2ff; text-align: center; } body>div>div>div:nth-child(2) { background-color: #a0f3a4; } body>div>div>div:nth-child(3) { background-color: #f0f995; padding-right: 20px; padding-left: 20px; } ``` ###### tags: `前端程式設計` `108-1`