Bootstrap x RWD

響應式網站設計 RWD x Bootstrap
Icon made by Freepik , Smashicons from www.ﬂaticon.com

HTML & CSS 基礎操作 72% RWD By CSS 63% 查詢使⽤用Bootstrap的
84% GOAL

HTML & CSS 基礎操作 RWD 概念念查詢 & 使⽤用Bootstrap的能⼒力力 GOAL

TOPIC IDE (Visual Studio Code)設定複習 HTML ＼ CSS ⽤用
CSS 做 RWD Bootstrap Bootstrap實戰練習：Landing Page

Visual Studio Code

VS code Plug-in JavaScript Snippet Eclipse keymap Chinese (Traditional) Preview
On Web Server QSFWJFX4FSWFSQPSU $USM TIJGU M $USM TIJGU W ࡏᖣ᧸ث։啟৽ࢹᜬฒ׌ࣗಈಉ㑊 ࡏ74DPEF㚎։啟ࢹᜬฒ׌ࣗಈಉ㑊

VS code Hotkey Shift + Ctrl + K 刪除⼀一整⾏行行 Shift
+ Alt + ↓/↑ 複製⼀一整⾏行行 Shift + Ctrl + F 整理理程式碼 Alt + 滑鼠點擊多游標模式 Ctrl + Alt + ↓/↑ 往上/下多游標模式

HTML \ CSS

HTML 超⽂文本標記語⾔言（英語：HyperText Markup Language，簡稱：HTML）是⼀一種⽤用於建立網⾴頁的標準標記語⾔言。HTML是⼀一種基礎技術，常與CSS、JavaScript⼀一起被眾多網站⽤用於設計賞⼼心悅⽬目的網⾴頁、網⾴頁應⽤用程式以及⾏行行動應⽤用程式的使⽤用者介⾯面[3]。網⾴頁瀏覽器可以讀取HTML檔案，並將其彩現成視覺化網⾴頁。HTML描述了了⼀一個網站的結構語意隨著線索的呈現，使之成為⼀一種標記語⾔言⽽而非程式語⾔言。 HTML元素是構建網站的基⽯石。HTML允許嵌入圖像與物件，並且可以⽤用於建立互動式表單，它被⽤用來來結構化資訊——例例如標題、段落落和列列表等等，也可⽤用來來在⼀一定程度上
描述⽂文件的外觀和語意。HTML的語⾔言形式為尖括號包圍的HTML元素（如 <html>），瀏覽器使⽤用HTML標籤和指令碼來來詮釋網⾴頁內容，但不會將它們顯⽰示在⾴頁⾯面上。 HTML可以嵌入如JavaScript的⼿手稿語⾔言，它們會影響HTML網⾴頁的⾏行行為。網⾴頁瀏覽器也可以參參照階層式樣式表（CSS）來來定義⽂文字和其它元素的外觀與布局。維護HTML和CSS標準的組織全球資訊網協會（W3C）⿎鼓勵⼈人們使⽤用CSS替代⼀一些⽤用於表現的HTML元素[4]。

HTML CSS 毛坯屋裝潢照片版權中二主婦哞太太

HTML 組成 : 標籤 <!DOCTYPE html> <html> <head> <title>This is
a title</title> </head> <body> <p>Hello world!</p> </body> </html> <標籤名>.........</標籤名> 開頭標籤結尾標籤 <標籤名>.........</標籤名> 開頭標籤元素空元素 Ex: <p> ..段落落內容.. </p> Ex: <input type=“text”>

HTML 組成 : 屬性 <dog name=“lulumi” sex=“M” age=“4” weight=“5kg”></dog> <標籤名
屬性1=“屬性值1” 屬性2=“屬性值2”>....</標籤名> 開頭標籤結尾標籤 <people name=“peter” job=“developer” age=“30”> <phone brand=“iphone” model=“XS” color=“black”></phone>

<people name=“Jessie” id=“E123999000” class=“台北⼈”> <people name=“Peter” id=“A123111999” class=“台北⼈”></people> <people name=“John”
id=“R113399123” class=“台南⼈”></people> <people name=“Zoe” id=“H223435903” class=“⾼雄⼈”></people> 常⽤用屬性 id / class <people name=“Mary” id=“R299194321” class=“台北⼈”></people> <people name=“Alan” id=“H123445174” class=“南投⼈”></people>

<people name=“Jessie” id=“E123999000” class=“台北⼈基督徒上班族”> 通⽤用屬性 id / class
可塞多個class

常⽤用標籤 <p> … 段落內容 … </p> 段落落 p <p> …
段落內容 … </p> <p> … 段落內容 … </p> <h1> 標題1標籤 </h1> <h2> 標題2標籤 </h2> <h3> 標題3標籤 </h3> <h4> 標題4標籤 </h4> <h5> 標題5標籤 </h5> 標題 h1 ~ h6 <h6> 標題6標籤 </h6> 區塊元素

常⽤用標籤 <ul> <li> 列點標籤 </li> <li> 列點標籤 </li> </ul> <ol>
<li> 列點標籤 </li> <li> 列點標籤 </li> </ol> 無序號列列點 ul 有序號列列點 ol 區塊元素

常⽤用標籤 <form> <input type=“text”/> <input type=“password”/> <button type=“button”> 我是按鈕 </button>
</from> 表單標籤 form 區塊元素 <form> <input type=“text”/> <input type=“password”/> <button type=“button”> 我是按鈕 </button> </from> 按鈕標籤 button 輸入標籤 input <form> <input type=“text”> <input type=“password”> <input type=“email”> <input type=“checkbox”> <input type=“button”> ….. </from> 它不是區塊元素

常⽤用標籤 Div標籤 div <div> <h1> 我是標題1 </h1> <form> <input type=“text”>
<input type=“password”> <input type=“email”> <input type=“checkbox”> <input type=“button”> ….. <form> <p> ⽂章段落 </p> </div> 區塊元素

常⽤用標籤 <a href=“www.goolge.com”> Google </a> 超連結標籤 a 斷⾏行行標籤 br ⾏行行內元素
<p> 我是⽂章段落 …. <span> ..我是重點 .. </span> </p> span標籤 span <br> <i> ⽂字斜體內容 </i> 斜體標籤 i 粗體標籤 strong <strong> ⽂字粗體內容 </strong> 底線標籤 u <u> ⽂字底線內容 </u>

常⽤用標籤圖片標籤 img ⾏行行內區塊元素 <img src=“圖⽚網址/路徑” alt=“圖⽚名稱”> 輸入標籤 input <form>
<input type=“text”> <input type=“password”> <input type=“email”> <input type=“checkbox”> <input type=“button”> ….. </from>

HTML元素類型⾏行行內元素 <a> | <span> | <strong> | <i> |
<u> <a href=“www.goolge.com”> Google </a> <a href=“www.facebook.com"> Facebook </a> <i> 我是斜體 </i> <strong> 我是粗體 </strong> <u> 我有底線 </u> 特性無法設定元素的⾼度、寬度，區塊元素所擁有的性質可以與其他元素在同⼀⾏內 display: inline;

HTML元素類型區塊元素 <div> | <p> | <h1> <h1> 我是標題 </h1>
<p> 我是⽂章段落1 </p> <p> 我是⽂章段落2 </p> <div> <a href=“www.goolge.com”> Google </a> <i> 我是斜體 </i> </div> <strong> 我是粗體 </strong> <u> 我有底線 </u> 特性可以設定元素的⾼度、寬度、邊距區塊元素所擁有的性質無法與其他元素共處在同⼀⾏內，會⾃⼰佔據⼀⾏預設寬度為⾃⼰⽗容器的100% display: block;

HTML⽗父⼦子結構關係 <div> <h1> 我是標題 </h1> <p> 我是⽂章段落1 </p> <p> 我是⽂章段落2
</p> <div> <a href=“www.goolge.com”> Google </a> <i> 我是斜體 </i> </div> <strong> 我是粗體 </strong> <u> 我有底線 </u> </div> <div> 是底下元素的⽗親 <a href=“www.goolge.com”> Google </a> <i> 我是斜體 </i> <div> 是底下元素的⽗親 <h1> 我是標題 </h1> <p> 我是⽂章段落1 </p> <p> 我是⽂章段落2 </p> <div></div> <strong> 我是粗體 </strong> <u> 我有底線 </u> <div> 是底下元素的祖⽗ <a href=“www.goolge.com”> Google </a> <i> 我是斜體 </i>

HTML 偷懶懶好幫⼿手 Emmet ! Html 基本版型標籤名 p /
div / span 標籤名.class p.abc 標籤名#id p#abc > 下⼀層 div>p + 同⼀層 div+p * 重複幾次 div*5

CSS 層疊樣式表（英語：Cascading Style Sheets，簡寫CSS），⼜又稱串串樣式列列表、級聯聯樣式表、串串接樣式表、階層式樣式表。⼀一種⽤用來來為結構化⽂文件（如HTML⽂文件或XML應⽤用）添加樣式（字型、間距和顏⾊色等）的電腦語⾔言，由W3C定義和維護。⽬目前最新版本是CSS2.1，為W3C的推薦標準。 CSS3現在已被⼤大部分現代瀏覽器⽀支援，⽽而下⼀一版的CSS4仍在開發中。

CSS 組成 : 選擇器 { 屬性：屬性值 ; color: pink; font-size:
24px; ….. …. .. }

Inline <people name=“Mart” id=“E123999000” style=“⽪膚⽩; ⾦髮; 粉紅⾊⼝紅” class=“台北⼈”> <p style=“color:
blue; font-size: 20px”> .... ⽂章段落內容 ... </p> 套用CSS

常⽤用CSS樣式文字類型樣式 font-size 文字大小 color 文字顏色 text-align 文字對齊 line-height 文字行高
區塊元素類型樣式 background 背景顏色 width 寬度 height 高度 border 邊緣 border-radius 導角

常⽤用CSS樣式元素類型顯示 display : inline 行內元素 display: block 區塊元素 display:
inline-block 行內區塊元素 display: none 隱藏顯示

<html> <head> <title>This is a title</title> <style> 選擇器 { 屬性：屬性值
; color: pink; font-size: 24px; } </style> </head> <body> <p> ….. </p> <p> ….. </p> <div> ….. </div> </body> </html> Embed 套用CSS

<people name=“Jessie” id=“E123999000” class=“台北⼈”> <people name=“Peter” id=“A123111999” class=“台北⼈”> <people name=“John”
id=“R113399123” class=“台南⼈”> <people name=“Zoe” id=“H223435903” class=“⾼雄⼈”> ⼀一間房間有. . . . . <people name=“Mary” id=“R299194321” class=“台北⼈”> <people name=“Alan” id=“H123445174” class=“台南⼈”> <dog name=“lulumi” sex=“M” age=“4” class=“博美” weight=“5kg”></dog> <dog name=“candy” sex=“F” age=“1” class=“博美” weight=“1kg”></dog> <dog name=“sugar” sex=“M” age=“4” class=“⿈⾦獵⽝” weight=“10kg”></dog>

CSS 選擇器標籤 people { skin-color: white; hair-color: blue; lips-color:
pink; } class .台北⼈ { skin-color: white; hair-color: blue; lips-color: pink; } dog { fur-color: yellow; height: 50cm; fur-lenght: long; } .博美 { fur-color: yellow; height: 50cm; fur-lenght: long; } 選擇範圍最大選擇範圍中等 id ＃R113399123 { skin-color: white; hair-color: blue; lips-color: pink; } ＃H223435903 { skin-color: white; hair-color: blue; lips-color: pink; } 選擇範圍最小 => 只選到一個

CSS 選擇器 .classA , .classB .台北⼈ , .⾼雄⼈ { skin-color:
white; hair-color: blue; lips-color: pink; } .博美 , .⿈⾦獵⽝ { fur-color: yellow; height: 50cm; fur-lenght: long; } classA 與 classB 套⽤同⼀組 css .dadClass .kidClass dadClass 裡⾯所有的 kidClass 都套⽤同⼀組 css <div class="dadClass"> <p class='article'> 我是⽂章段落1 </p> <p class='kidClass'> 我是⽂章段落2 </p> <strong class='kidClass'> 我是粗體 </strong> <a href="http://google.com">Google</a> </div> .dadClass .kidClass { …… } 空格

<html> <head> <title>This is a title</title> </head> …. Link 套用CSS
<link rel="stylesheet" href=“CSS路徑/網址”> ./ ../ 目前的資料夾往上一層資料夾

CSS 合成特性 <people name=“Jessie” id=“E123999000” class=“台北⼈基督徒上班族”> 可塞多個class <div
class=“size background border round”></div> .size { width: 300px; height: 300px; } .background{ background: pink; } .border{ border: 1px solid red; } .round{ border-radius: 50%; }

CSS 單位 px ％絕對尺寸以父元素為基準值換算比例 <div class="dadClass"> <div
class='kidClass'></div> </div> .dadClass{ width: 100px; } .kidClass{ width: 10%; }

CSS 盒⼦子模型內容物 padding padding border border margin margin 區塊元素專有屬性
padding box的邊框到內容物的距離 border box的邊框的粗細度 margin box與其他box之間的距離 box-sizing border-box Hello padding padding border border margin margin 定義多少的寬度就是多少的寬度 margin

CSS 盒⼦子模型 margin \ padding 幾種寫法 padding : 5px ;
1個數字 padding : 5px 10px; 2個數字 padding : 5px 10px 15px 20px; 4個數字上上 \ 右 \ 下 \ 左上下左右右下左 margin : 5px ; 1個數字 margin : 5px 10px; 2個數字 margin : 5px 10px 15px 20px; 4個數字上上 \ 右 \ 下 \ 左上下左右右下左 padding margin margin-top : 5px ; margin-right : 5px ; margin-bottom : 5px ; margin-left : 5px ; padding-top : 5px ; padding-right : 5px ; padding-bottom : 5px ; padding-left : 5px ;

CSS 盒⼦子模型 Div 置左＼置中＼置右小技巧 margin-right : auto ; 置左
auto margin-left : auto ; 置右 auto margin-left : auto ; 置中 auto margin-right : auto ; auto margin : 0 auto ;

CSS Layout Div 佈局 Float float: left / right; Flex
display: flex;

CSS Layout Div 佈局 Float float: left / right; clear:
both; margin : 1%; width: calc((100% - 8%) / 4); 4個Div左右共8個margin的總和 Div的個數

CSS Layout Div 佈局 Flex 主軸 Main Axis 交錯軸 Cross
Axis Flex Container => display: flex (Dad) Flex Item (Child) Flex Item (Child) Flex Item (Child) Flex Item (Child)

CSS Layout Div 佈局 Flex 有父子關係有1 個Container(Dad) & n
個 Items(Children) 主軸＆交錯軸小孩排列的方向與小孩排列的方向垂直的

CSS Layout Div 佈局 Flex Container(Dad) display: flex flex-direction flex-wrap
justify-content (主軸方向小孩的分佈) align-items (交錯軸方向小孩的分佈) Items(Children) align-self order

RWD (Responsive Web Design) 響應式網⾴頁設計（英語：Responsive web design，通常縮寫為 RWD），或稱⾃自適應網⾴頁設計、回應式網⾴頁設計、對應式網⾴頁設計。是⼀一種網⾴頁設計的技術做法，該設計可使網站在不同的裝置（從
桌⾯面電腦顯⽰示器到⾏行行動電話或其他⾏行行動產品裝置）上瀏覽時對應不同解析度皆有適合的呈現，減少使⽤用者進⾏行行縮放、平移和捲動等操作⾏行行為。對於網站設計師和前端⼯工程師來來說，有別於過去需要針對各種裝置進⾏行行不同的設計，使⽤用此種設計⽅方式將更更易易於維護網⾴頁。此概念念於2010年年5⽉月由國外著名網⾴頁設計師Ethan Marcotte所提出。[4]

RWD 同一個網站︐卻有能力針對不同的裝置上有不同的呈現方式寬度精準地說

RWD Viewport (HTML) <meta name="viewport" content="width=device-width, initial-scale=1.0"> Media Query (CSS)
@media screen and (max-width: 1080px){ ...... ... } 強迫目前網頁的內容以目前裝置的寬度來呈現偵測使用者裝置的寬度︐如果在1080px 的範圍內︐就執行這個區塊的CSS樣式

RWD 流動網格以裝置寬度控制網格的顯示 1980 px 768 px 400 px

RWD 流動網格以裝置寬度控制網格的顯示 1980 px 768 px 400 px @media
screen and (max-width: 768px) { .box{ width: 50%; } } @media screen and (max-width: 400px){ .box{ width: 100%; } } <style> .box{ width: 25%; } </style>

Bootstrap Bootstrap是⼀一組⽤用於網站和網路路應⽤用程式開發的開源前端（所謂「前端」，指的是展現給終端使⽤用者的介⾯面。與之對應的「後端」是在伺服器上⾯面執⾏行行的程式碼）框架，包括HTML、CSS及JavaScript的框架，提供字體排印、表單、按鈕、導航及其他各種元件及 Javascript擴充套件，旨在使動態網⾴頁和Web應⽤用的開發更更加容易易。

Bootstrap Why 一個好的網站對於開發者來說需要哪些元素︖ 好看的版面基本的功能支援手機瀏覽開發快速

Bootstrap Why

Bootstrap 安裝 v4.3 <link rel="stylesheet" href=“https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src=“https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src=“https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Bootstrap 版本⼩小提醒 v3.3.7 v4.*

Bootstrap Topics Utilities (幫助類別) Grid System (網格系統) Components (元件)

Utilities (幫助類別) 邊緣(Border) 顏色(Color) 尺寸(Sizing) 間隔(Spacing)

邊緣(Border) 加法四邊都有加上邊緣 .border 只加上其中一邊 .border-top .border-right .border-bottom
.border-left 減法四邊不要邊緣 .border-0 其中一邊不要邊緣 .border-top-0 .border-right-0 .border-bottom-0 .border-left-0

邊緣(Border) 圓角四邊都有圓角 .rounded 其中一邊有圓角 .rounded-top .rounded-right .rounded-bottom
.rounded-left 圓形 .rounded-circle 都不圓角 .rounded-0

顏色(Color) 文字顏色 .text-primary .text-secondary .text-success .text-danger .text-warning .text-info 背景顏色 .bg-primary
.bg-secondary .bg-success .bg-danger .bg-warning .bg-info 邊緣顏色 .border-primary .border-secondary .border-success .border-danger .border-warning

尺寸(Sizing) 寬度 .w-25 .w-50 .w-75 .w-100 .w-auto width: 25% width:
50% width: 75% width: 100% width: auto 高度 .h-25 .h-50 .h-75 .h-100 .h-auto height: 25% height: 50% height: 75% height: 100% height: auto

間隔(Spacing) 屬性設定 .m margin .p padding 邊緣設定 t top b
bottom l left r right x left & right y top & bottom 尺寸設定 0 0 x 0.25 1~5 1 x 0.25 … auto margin auto (必要) (可省略) (必要)

Grid System (網格系統) 響應式斷點 break points 網格系統 grid system 容器
Container

容器(Container) Containers are the most basic layout element in Bootstrap
and are required when using our default grid system. 容器是在Boostrap中基本的排版元素︐必須使用它才能且使用網格系統。 <div class="container"> ..... </div> 窄版容器 container <div class=“container-fluid“> ..... </div> 寬版容器 container-ﬂuid

網格系統(Grid System) 12寬度等分 col row

網格系統(Grid System) 網格 <div class="container"> <div class="row"> <div class="col"></div> <div
class="col"></div> <div class="col"></div> <div class="col"></div> </div> </div> row col 3等分 3等分 3等分 3等分

網格系統(Grid System) col 所有斷點︐ 均等 col-(1~12) 所有斷點︐ 指定寬度等分寬度等分 col-8
col-4 col col col col col col col col col col col col

RWD 流動網格以裝置寬度控制網格的顯示 1980 px 768 px 400 px @media
screen and (max-width: 768px) { .box{ width: 50%; } } @media screen and (max-width: 400px){ .box{ width: 100%; } } <style> .box{ width: 25%; } </style>

響應式斷點(Break Points) Extra Small Small Medium Large Extra Large 576px
768px 992px 1200px

網格系統(Grid System) 12 col 所有斷點︐ 均等 col-(1~12) 所有斷點︐ 指定寬度等分 col-(斷點)-(1~12)
在某個斷點︐ 指定寬度等分斷點指定等分

1980 px 768 px 400 px .col-3 .col-6 .col-12 網格系統(Grid
System) 斷點指定等分 .col-12 <Extra Small> <Medium> <Large> .col-md-6 .col-lg-3

Components (元素) 導覽列 Navar 表單 Forms 輪播 Carousel 卡片 Card
分頁 Pagination 互動視窗 Modal

Font Awesome Font Awesome 是⼀一個基於 CSS 和 LESS 的字體和圖標⼯工具包。它由
Dave Gandy 製作，⽤用於 Twitter Bootstrap，後來來被整合到 BootstrapCDN 中。Font Awesome在其平台上使⽤用第三⽅方 Font Scripts 的網站中佔有 20％的市場份額，排在⾕谷歌字體之後的第⼆二位。[2] Font Awesome 5 於 2017 年年 12 ⽉月 7 ⽇日發布，共有 1,278 個圖標。這版本有兩兩個包：Font Awesome Free 和專有的 Font Awesome Pro（收費）。免費版本（所有版本最多 4 個，免費版本 5 個）可在 SIL Open Font License 1.1，Creative Commons Attribution 4.0 和 MIT License 下獲得。

Google Fonts

Neocities share to World

Finally

Bootstrap x RWD

Bootstrap x RWD

Other Decks in Education

Featured

Transcript