微痛-結合 Bootstrap
製作小型專案
4 / 15. 講師:陳泓棣
Outline
- 使用 Bootstrap 的起手式
- 想要啥 都複製貼上吧(html)
- 關於一些 css 參數(功能)
- i 學習網
- Lab1. navbar 和 banner1
- Lab2. card
- Lab3. banner2 和 breadcrumb
- Lab4. 變成 RWD 網頁吧
- 參考資源
使用 Bootstrap 的起手式
在原有的 html 起手式
加入 Bootstrap 的 css , js
稍微解釋 CDN
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<!-- viewport RWD必備 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstrap css 新增 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- bootstrap css end 新增 -->
</head>
<body>
<!-- bootstrap js 新增 -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous">
</script>
<!-- bootstrap js end 新增 -->
</body>
</html>
想要啥 都複製貼上吧(html)
我要一個導覽列
我要一個大型圖片版
我要一個小卡版面
我要一個麵包屑
複製貼上完了,然後呢?
i 學習網
Re.從 0 開始的網頁製作
關於一些 css 參數(功能)
position: ;
- fixed
- relative
- absolute
display:flex;
Lab1. navbar 和 banner1
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">i 學習</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 active">
<a class="nav-link" href="#">首頁 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">js 讓子彈飛</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">css 美觀大師</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">React 框架應用</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">html 基本架構</a>
</li>
</ul>
<!-- search -->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">找找看!</button>
</form>
<!-- search end -->
</div>
</nav>
<!-- navbar end -->
<!-- jumbotron -->
<div class="banner1">
<div class="jumbotron">
<!-- 自己加的 text -->
<div class="text">
<h1 class="display-4">Bootstrap課程 </h1>
<p class="lead">化繁為簡,深入淺出</p>
<a class="btn btn-primary btn-lg" href="#" role="button">了解課程</a>
</div>
</div>
</div>
<!-- jumbotron end -->
Lab1. navbar 和 banner1
HTML
.navbar{
width: 100%;
position: fixed;
z-index: 2;
}
.banner1 .jumbotron{
background:
url("https://images.pexels.com/photos/39284/macbook-apple-imac-computer-39284.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260") 100% 100%;
background-size:cover;
height: 400px;
color: aliceblue;
position: relative;
}
.banner1 .jumbotron .text{
position: absolute;
bottom:30px;
}
Lab1. navbar 和 banner1
CSS
Lab2. card
<!-- card -->
<div class="card-wrapper">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">微痛入門 RWD</h5>
<p class="card-text">彈性縮放,配合各種裝置! <br> 又稱 響應式網路設計</p>
<a href="#" class="card-link">維基百科</a>
<a href="http://lisbunny.nctu.me/" class="card-link">Lis Bunny</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Bootstrap 是啥?</h5>
<p class="card-text">一種網站製作加速器!<br>複製貼上好棒棒!</p>
<a href="https://getbootstrap.com/docs/4.4/getting-started/introduction/" class="card-link">
官網介紹</a>
<br>
<a href="#" class="card-link">哪些網站使用 Bootstrap</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">醜話說前頭</h5>
<p class="card-text">電鑽給你了,你卻連一般的鑽頭都不會用,這樣會受傷的!!<br>推薦以下課程</p>
<a href="#" class="card-link">
css 美觀大師
</a>
<a href="#" class="card-link">html 基本架構</a>
</div>
</div>
</div>
<!-- card end -->
Lab2. card
HTML
.card-wrapper{
display: flex;
justify-content: center;
}
.card-wrapper .card{
margin: auto;
}
Lab2. card
CSS
Lab3. banner2 和 breadcrumb
Lab3. banner2 和 breadcrumb
HTML
<!--text-center-wrap -->
<div class="text-center-wrap">
<!-- banner2-->
<div class="banner2">
<!-- text-center -->
<div class="card text-center">
<div class="card-header">
講師介紹
</div>
<div class="card-body">
<img class="face" src="https://i.imgur.com/VEiwZYf.jpg"
alt="my-face">
<h5 class="card-title">阿泓王</h5>
<p class="card-text">輔大 李敏鎬</p>
<a href="#" class="btn btn-primary">聯絡我</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
<!-- text-center end -->
</div>
<!-- banner2 end -->
</div>
<!--text-center-wrap end -->
<!-- breadcrumb -->
<nav aria-label="breadcrumb" class="big-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Lis Bunny</a></li>
<li class="breadcrumb-item"><a href="#">Sirla</a></li>
<li class="breadcrumb-item"><a href="#">輔大圖資系網站</a></li>
</ol>
</nav>
<!-- breadcrumb end -->
Lab3. banner2 和 breadcrumb
CSS
.text-center-wrap .banner2{
margin-top: 2em;
display: flex;
justify-content: center;
background:
url("https://images.pexels.com/photos/3815585/pexels-photo-3815585.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")top right/cover ;
}
.text-center-wrap .text-center{
margin: 2em;
width: 50%;
}
.text-center .card-body .face{
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 20px;
}
Lab4. 變成 RWD 網頁吧
Lab4.
變成 RWD 網頁吧
CSS
/* 媒體查詢 */
@media screen and (max-width: 1000px) {
.banner1 .jumbotron .text{
height: 70%;
width: 90%;
padding: 20px;
backdrop-filter: blur(10px);
}
.banner1 .jumbotron .text .btn{
position: absolute;
right: 10%;
bottom: 20px;
}
.card-wrapper{
display:flex ;
flex-wrap: wrap;
}
.card-wrapper .card{
margin-top: 2em;
}
.text-center{
margin: 2em;
width: 100%;
}
.big-breadcrumb{
width: 100%;
display: flex;
justify-content: center;
}
}
i 學習網
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>bootstrap小型專案實作</title>
<meta name="description" content="">
<!-- viewport RWD必備 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<!-- bootstrap css end -->
<!-- css -->
<style>
/* css reset */
*{
padding: 0;
margin: 0;
list-style: none;
}
/* css reset end */
.navbar{
width: 100%;
position: fixed;
z-index: 2;
}
.banner .jumbotron{
background:
url("https://images.pexels.com/photos/39284/macbook-apple-imac-computer-39284.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260") 100% 100%;
background-size:cover;
height: 400px;
color: aliceblue;
position: relative;
}
.banner .jumbotron .text{
position: absolute;
bottom:30px;
}
.card-wrapper{
display: flex;
justify-content: center;
}
.card-wrapper .card{
margin: auto;
}
.text-center-wrap .banner2{
margin-top: 2em;
display: flex;
justify-content: center;
background:
url("https://images.pexels.com/photos/3815585/pexels-photo-3815585.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")top right/cover ;
}
.text-center-wrap .text-center{
margin: 2em;
width: 50%;
}
.text-center .card-body .face{
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 20px;
}
/* 媒體查詢 */
@media screen and (max-width: 1000px) {
.banner .jumbotron .text{
height: 70%;
width: 90%;
padding: 20px;
backdrop-filter: blur(10px);
}
.banner .jumbotron .text .btn{
position: absolute;
right: 10%;
bottom: 20px;
}
.card-wrapper{
display:flex ;
flex-wrap: wrap;
}
.card-wrapper .card{
margin-top: 2em;
}
.text-center{
margin: 2em;
width: 100%;
}
.big-breadcrumb{
width: 100%;
display: flex;
justify-content: center;
}
}
</style>
<!-- css end -->
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">i 學習</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 active">
<a class="nav-link" href="#">首頁 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">js 讓子彈飛</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">css 美觀大師</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">React 框架應用</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">html 基本架構</a>
</li>
</ul>
<!-- search -->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">找找看!</button>
</form>
<!-- search end -->
</div>
</nav>
<!-- navbar end -->
<!-- jumbotron -->
<div class="banner">
<div class="jumbotron">
<!-- 自己加的 text -->
<div class="text">
<h1 class="display-4">Bootstrap課程 </h1>
<p class="lead">化繁為簡,深入淺出</p>
<a class="btn btn-primary btn-lg" href="#" role="button">了解課程</a>
</div>
</div>
</div>
<!-- jumbotron end -->
<!-- card -->
<div class="card-wrapper">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">微痛入門 RWD</h5>
<p class="card-text">彈性縮放,配合各種裝置! <br> 又稱 響應式網路設計</p>
<a href="#" class="card-link">維基百科</a>
<a href="http://lisbunny.nctu.me/" class="card-link">Lis Bunny</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Bootstrap 是啥?</h5>
<p class="card-text">一種網站製作加速器!<br>複製貼上好棒棒!</p>
<a href="https://getbootstrap.com/docs/4.4/getting-started/introduction/" class="card-link">
官網介紹</a>
<br>
<a href="#" class="card-link">哪些網站使用 Bootstrap</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">醜話說前頭</h5>
<p class="card-text">電鑽給你了,你卻連一般的鑽頭都不會用,這樣會受傷的!!<br>推薦以下課程</p>
<a href="#" class="card-link">
css 美觀大師
</a>
<a href="#" class="card-link">html 基本架構</a>
</div>
</div>
</div>
<!-- card end -->
<!--text-center-wrap -->
<div class="text-center-wrap">
<!-- banner2-->
<div class="banner2">
<!-- text-center -->
<div class="card text-center">
<div class="card-header">
講師介紹
</div>
<div class="card-body">
<img class="face" src="https://i.imgur.com/VEiwZYf.jpg"
alt="my-face">
<h5 class="card-title">阿泓王</h5>
<p class="card-text">輔大 李敏鎬</p>
<a href="#" class="btn btn-primary">聯絡我</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
<!-- text-center end -->
</div>
<!-- banner2 end -->
</div>
<!--text-center-wrap end -->
<!-- breadcrumb -->
<nav aria-label="breadcrumb" class="big-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Lis Bunny</a></li>
<li class="breadcrumb-item"><a href="#">Sirla</a></li>
<li class="breadcrumb-item"><a href="#">輔大圖資系網站</a></li>
</ol>
</nav>
<!-- breadcrumb end -->
<!-- bootstrap js -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
<!-- bootstrap js end -->
</body>
</html>
i 學習網 完整程式碼
參考資源
感謝聆聽
結合 bootstrap 製作小型專案
By Hong di Chen
結合 bootstrap 製作小型專案
- 185