--- title: "[社課]想要擁有自己的網站嗎？boostrap帶你上手" tags: - 社課 - 共筆 - 網頁前端 - HTML - CSS - JavaScript - Bootstrap --- # 想要擁有自己的網站嗎？boostrap帶你上手 <!-- 活動簡述 --> **簡報連結：** > 請從這裡開始 ## Lab 1 ```html <!DOCTYPE html> <html> <title>我的網頁</title> <head> </head> <body> <h1 id="" class="" style="color: cadetblue;">Hello world!</h1> <h2>Hello world!</h2> <h3 id="" class="" style="color: blueviolet;">Hello world!</h3> <h4 id="" class="" style="padding-left: 20px;">Hello world!</h4> <h5 id="" class="" style="margin-top: 10px;">Hello world!</h5> <h6>Hello world!</h6> <p>body 裡面會有不用的 tags <br>我會換行</br> </p> <button>我是按鈕</button> <a href="https://……">我是連結</a> <img src="https://picsum.photos/500/400?random=1"> </body> </html> ``` ## Lab 2 ```htmlmixed <!DOCTYPE html> <html> <title>我的網頁</title> <head> </head> <body> <h1 class="title">Hello my web</h1> <button>我是按鈕</button> <button>我是按鈕</button> <button>我是按鈕</button> <br> <img id="image" src="https://picsum.photos/500/400?random=1"> </br> </body> <style> button { margin-left: 20px; color: blueviolet; } .title { text-align: center; } #image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </html> ``` ## Lab 3 ```html <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> </head> <body> <div class="container" style="background-color:aquamarine;"> <p>.container</p> </div> <div class="container-sm" style="background-color:aquamarine;"> <p>..container-sm</p> </div> <div class="container-md" style="background-color:aquamarine;"> <p>.container-md</p> </div> <div class="container-lg" style="background-color:aquamarine;"> <p>.container-lg</p> </div> <div class="container-xl" style="background-color:aquamarine;"> <p>.container-xl</p> </div> <div class="container-xxl" style="background-color:aquamarine;"> <p>.container-xxl</p> </div> <div class="container-fluid" style="background-color:aquamarine;"> <p>.container-fluid</p> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> </body> </html> ``` ## Lab 4 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login Screen with Card</title> <!-- 引入Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <!-- 引入Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.1/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script> </head> <body> <div class="container h-100"> <div class="row h-100 justify-content-center"> <div class="col-6 col-lg-4"> <!-- Card --> <div class="card mt-5"> <div class="card-body"> <h3 class="card-title fw-bold text-center mb-4">登入</h3> <button type="submit" class="btn border my-2 w-100"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-facebook float-start" viewBox="0 0 16 16"> <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" /> </svg> 使用FaceBook登入 </button> <button type="submit" class="btn border my-2 w-100"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-google float-start" viewBox="0 0 16 16"> <path d="M15.545 6.558a9.4 9.4 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.7 7.7 0 0 1 5.352 2.082l-2.284 2.284A4.35 4.35 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.8 4.8 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.7 3.7 0 0 0 1.599-2.431H8v-3.08z" /> </svg> 使用Google登入 </button> <button type="submit" class="btn border my-2 w-100"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-apple float-start" viewBox="0 0 16 16"> <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516s1.52.087 2.475-1.258.762-2.391.728-2.43m3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422s1.675-2.789 1.698-2.854-.597-.79-1.254-1.157a3.7 3.7 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56s.625 1.924 1.273 2.796c.576.984 1.34 1.667 1.659 1.899s1.219.386 1.843.067c.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758q.52-1.185.473-1.282" /> <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516s1.52.087 2.475-1.258.762-2.391.728-2.43m3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422s1.675-2.789 1.698-2.854-.597-.79-1.254-1.157a3.7 3.7 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56s.625 1.924 1.273 2.796c.576.984 1.34 1.667 1.659 1.899s1.219.386 1.843.067c.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758q.52-1.185.473-1.282" /> </svg> 使用Apple登入 </button> <hr class="dropdown-divider"> <form id="form" class="my-2"> <div class="form-group"> <label for="emailInput">電子郵件</label> <input type="email" class="form-control" id="emailInput" placeholder="電子郵件"> </div> <div class="form-group"> <label for="passwordInput">密碼</label> <input type="password" class="form-control" id="passwordInput" placeholder="密碼"> </div> <button type="submit" class="btn btn-primary mt-2 border w-100">登入</button> <div class="form-group form-check mt-2"> <input type="checkbox" class="form-check-input" id="rememberCheck"> <label class="form-check-label" for="rememberCheck">記住我的帳號</label> <a class="float-end" href="">忘記密碼?</a> </div> </form> </div> </div> <!-- End of Card --> </div> </div> </div> </body> </html> ``` ## Lab 5 ### Loading page ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login Page</title> <!-- 引入Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <!-- 引入Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.1/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script> </head> <body> <div class="container h-100"> <div class="row h-100 justify-content-center"> <?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"> <circle cx="84" cy="50" r="10" fill="#e15b64"> <animate attributeName="r" repeatCount="indefinite" dur="0.25s" calcMode="spline" keyTimes="0;1" values="10;0" keySplines="0 0.5 0.5 1" begin="0s"></animate> <animate attributeName="fill" repeatCount="indefinite" dur="1s" calcMode="discrete" keyTimes="0;0.25;0.5;0.75;1" values="#e15b64;#abbd81;#f8b26a;#f47e60;#e15b64" begin="0s"> </animate> </circle> <circle cx="16" cy="50" r="10" fill="#e15b64"> <animate attributeName="r" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"></animate> <animate attributeName="cx" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="0s"> </animate> </circle> <circle cx="50" cy="50" r="10" fill="#f47e60"> <animate attributeName="r" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.25s"> </animate> <animate attributeName="cx" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.25s"> </animate> </circle> <circle cx="84" cy="50" r="10" fill="#f8b26a"> <animate attributeName="r" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.5s"> </animate> <animate attributeName="cx" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.5s"> </animate> </circle> <circle cx="16" cy="50" r="10" fill="#abbd81"> <animate attributeName="r" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="0;0;10;10;10" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.75s"> </animate> <animate attributeName="cx" repeatCount="indefinite" dur="1s" calcMode="spline" keyTimes="0;0.25;0.5;0.75;1" values="16;16;16;50;84" keySplines="0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1;0 0.5 0.5 1" begin="-0.75s"> </animate> </circle> </svg> </div> </div> <script> var seconds = 10; function countdown() { seconds = seconds - 1; if (seconds > 0) { setTimeout(countdown, 1000); } else { window.location.href = "./login.html"; } } setTimeout(countdown, 1000); </script> </body> </html> ``` ### 登入頁面 js ```html <script> const CorrectEmail = "123456@gmail.com"; const CorrectPassword = "123456789"; const form = document.getElementById('form') form.addEventListener('submit', () => { event.preventDefault(); }) function login() { const inputEmail = document.getElementById('emailInput'); const inputPassword = document.getElementById('passwordInput'); let errorhtml = document.getElementById('errormsg'); if (inputEmail.value === CorrectEmail && inputPassword.value === CorrectPassword) { errorhtml.innerHTML = ''; window.location.href = "../9_JS/Loading.html"; } else { const error = '<div class="alert alert-danger py-1 mt-1" role="alert">電子郵件或密碼錯誤</div>' errorhtml.innerHTML = error; } } </script> ```