RWD 與 Bootstrap 入門
講者：王婕瑜
日期：2020/11/19
OUTLINE
-
CSS 複習
-
RWD 介紹
-
Bootstrap 介紹
CSS 複習
- 選擇器
- 盒子模式
選擇器
選擇器類型
| 選擇器名 | 控制什麼 | 範例 |
|---|---|---|
| 元素選擇器 | 指定所有 HTML 元素中的特定元素 | p <p> |
| id | 只能綁定一個元素 | #idd <p id="idd"> |
| class | 可以被多個元素使用 | .claass <p class = "claass"> |
| 屬性選擇器 | 指定頁面上的特定屬性元素 | img[src] <img src="pic.img"> |
盒子模式
內容周圍的空格
矩形內容外的實線
外部的空間
margin
margin:上 右 下 左; margin:上下 左右; margin:上 左右 下; margin:四個邊同樣値;
/*讓瀏覽器自己設定*/
margin: auto;
/*外距為 5px，右外距為 10px，下外距為 15px，左外距則為 20px*/
margin: 5px 10px 15px 20px;border
border: 邊框粗細 邊框顏色 邊框樣式 ;
/*下方邊框寬度設為 3px，顏色為藍色，樣式為 dashed*/
border-bottom:3px blue dashed;padding
padding:上 右 下 左; padding:上下 左右; padding:上 左右 下; padding:四個邊同樣値;
/*讓瀏覽器自己設定*/
padding: auto;
/*上方邊框寬度設為 5px，顏色為黑色，樣式為 solid*/
padding: border-top:5px black solid;display
display: 顯示參數;
/*元素以區塊方式呈現，會自動換行*/
display: block;
/*元素在同一行呈現，圖片或文字均不換行*/
display: inline;
/*將元素調整為不顯示*/
display: none;RWD 介紹
- 基本概念
- 實作
- LAB-01
Responsive web design 響應式設計
舉個例子
基本概念
為什麼要用 RWD？
減少開發成本
舒適的瀏覽體驗
實作
設定 Viewport
<!--<head>-->
<meta name="viewport" content="width=device-width; initial-scale=1.0">圖片設定
/*<style>*/
img {
width:100%;
height:auto;
}設計模式
Media Queries
| 屬性 | 解釋 |
|---|---|
| width | 視區寬度 |
| height | 視區高度 |
| device-width | 裝置寬度 |
| device-height | 裝置高度 |
| 裝置類型 | |
|---|---|
| all | 所有裝置 |
| screen | 一般電腦螢幕 |
| 印表機列印輸出 | |
| speech | 朗讀式裝置 |
版面流動方式
@media (min-width: 600px) {
.c2, .c3, .c4, .c5 {
width: 50%;
}
}
@media (min-width: 800px) {
.c1 {
width: 60%;
}
.c2 {
width: 40%;
}
.c3, .c4 {
width: 33%;
}
.c5 {
width: 34%;
}
}LAB - 01
500 px
1000 px
300 px
100px
裝置：一般電腦螢幕
<!DOCTYPE html>
<html>
<head>
<title>lab1</title>
<style>
.box{
width: 300px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>創造一個區塊
<!--Media Queries-->
<style>
@media screen and (min-width: 500px){
.box{
width: 500px;
background-color: green;
}
}
@media screen and (min-width: 1000px){
.box{
width: 1000px;
background-color: blue;
}
}
</style>加上 Media Queries
<!DOCTYPE html>
<html>
<head>
<title>lab1</title>
<style>
.box{
width: 300px;
height: 100px;
background-color: pink;
}
@media screen and (min-width: 500px){
.box{
width: 500px;
background-color: green;
}
}
@media screen and (min-width: 1000px){
.box{
width: 1000px;
background-color: blue;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html><!--Media Queries-->完整程式碼
Bootstrap 介紹
- 基本概念
- Grid System
- LAB-02
基本概念
- 前端框架
- 提供建立 RWD 網站的功能
為什麼要使用 Bootstrap？
- 簡單
- 響應式
- 網頁兼容性
- 行動優先（mobile-first）
載入 BootstrapCDN
<!--放在head標籤裡-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">怎麼用
需要使用 JavaScript 的組件則加入
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>Grid System
Column（行）
Row（列）
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....| 設備 | 縮寫 |
|---|---|
| 手機設備 | xs |
| 平板設備 | sm |
| 電腦版 | md |
| 電腦版桌面 | lg |
.col - 設備 - 占了幾格
LAB - 02
用 Grid system 的概念，改寫程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<title>lab 2</title>
<style type="text/css">
div {
width: 100%;
margin: 10px;
padding: 10px;
box-sizing: border-box;
background-color: #FAF0E6;
}
p {
margin: 20px;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
.container {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-flow: row wrap;
}
.footer{
background-color: #333;
color: #aaa;
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<h2>Lorem ipsum</h2>
<img src="https://cdn.royalcanin-weshare-online.io/jyJEPmYBaxEApS7LtgZ4/v3/ec52h-older-cats-and-incontinence-causes-and-treatment-hero-cat"></a>
<div class="row">
<div style="background-color: #FFE4C4; border: 1px solid #000;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar aliquet fermentum. Integer auctor accumsan turpis. Cras sodales a velit sit amet sagittis.</p>
</div>
<div style="background-color: #FAEBD7; border: 1px solid #000;">
<p>Duis gravida neque dictum lorem rhoncus, vitae placerat nulla vestibulum. Nunc ut nisi at justo placerat malesuada ac vitae odio. Vivamus tempus egestas laoreet. Mauris consequat vitae enim ut auctor. Donec pharetra, orci tincidunt sollicitudin porttitor, dui felis bibendum tellus, quis facilisis ante nulla ut est.</p>
</div>
<div style="background-color: #FFF8DC; border: 1px solid #000;">
<p>Pellentesque efficitur at massa non iaculis. Pellentesque elementum erat quis elit cursus efficitur. Quisque nisl ipsum, mollis sit amet eleifend vel, aliquet eu est.</p>
</div>
<div style="background-color: #FFF8DC; border: 1px solid #000;">
<p>Pellentesque efficitur at massa non iaculis. Pellentesque elementum erat quis elit cursus efficitur. Quisque nisl ipsum, mollis sit amet eleifend vel, aliquet eu est.</p>
</div>
</div>
</div>
<div class="footer">
© copyright 2020 by juliewah
</div>
</body>
</html><html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">設定語言、引入BootstrapCDN
<div class="container">
<h2>Lorem ipsum</h2>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3" style="background-color: #FFE4C4; border: 1px solid #000;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar aliquet fermentum. Integer auctor accumsan turpis. Cras sodales a velit sit amet sagittis.</p>
</div>
</div>
</div>
Grid System
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>lab 2 example</title>
<style type="text/css">
h1 {
background-color: #FAF0E6;
}
div {
width: 100%;
margin: 10px;
padding: 10px;
box-sizing: border-box;
background-color: #FAF0E6;
}
p {
margin: 20px;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
.container {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-flow: row wrap;
}
.footer{
background-color: #333;
color: #aaa;
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<h2>Lorem ipsum</h2>
<img src="https://cdn.royalcanin-weshare-online.io/jyJEPmYBaxEApS7LtgZ4/v3/ec52h-older-cats-and-incontinence-causes-and-treatment-hero-cat"></a>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3" style="background-color: #FFE4C4; border: 1px solid #000;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar aliquet fermentum. Integer auctor accumsan turpis. Cras sodales a velit sit amet sagittis.</p>
</div>
<div class="col-xs-6 col-sm-4 col-md-3" style="background-color: #FAEBD7; border: 1px solid #000;">
<p>Duis gravida neque dictum lorem rhoncus, vitae placerat nulla vestibulum. Nunc ut nisi at justo placerat malesuada ac vitae odio. Vivamus tempus egestas laoreet. Mauris consequat vitae enim ut auctor. Donec pharetra, orci tincidunt sollicitudin porttitor, dui felis bibendum tellus, quis facilisis ante nulla ut est.</p>
</div>
<div class="col-xs-6 col-sm-4 col-md-3" style="background-color: #FFF8DC; border: 1px solid #000;">
<p>Pellentesque efficitur at massa non iaculis. Pellentesque elementum erat quis elit cursus efficitur. Quisque nisl ipsum, mollis sit amet eleifend vel, aliquet eu est.</p>
</div>
<div class="col-xs-6 col-sm-4 col-md-3" style="background-color: #D2B48C; border: 1px solid #000;">
<p>Pellentesque efficitur at massa non iaculis. Pellentesque elementum erat quis elit cursus efficitur. Quisque nisl ipsum, mollis sit amet eleifend vel, aliquet eu est.</p>
</div>
</div>
</div>
<div class="footer">
© copyright 2020 by juliewah
</div>
</body>
</html>完整程式碼
REFERENCES
Dez (2019). RWD 教學入門：響應式網頁設計的實作方法 .Retrieved from https://tw.alphacamp.co/blog/rwd-responsive-web-design-introduction
鳥哥 (2017). 第 10 堂課 - 初探 bootstrap 網頁製作 .Retrieved from http://dic.vbird.tw/webdesign/main2017/unit10.php
Bootstrap (2020) . Bootstrap 4 繁體中文手冊 [六角學院譯] .Retrieved from https://bootstrap.hexschool.com/docs/4.1/getting-started/introduction/