RWD 與 Bootstrap入門

講者：王婕瑜

日期：2020/4/9

OUTLINE

  • RWD 介紹

  • Bootstrap 介紹

RWD 介紹

  • 基本概念
  • 實作
  • LAB-01
  • LAB-02
Responsive web design
響應式設計
舉個例子

基本概念

為什麼要用 RWD？

減少開發成本

舒適的瀏覽體驗

實作

設定 Viewport

<!--<head>-->
<meta name="viewport" content="width=device-width; initial-scale=1.0">
屬性 解釋
width 畫面寬度
height 畫面高度
initial-scale 初始縮放比例
minimum-scale 最小縮放比例
maximum-scale 最大縮放比例
user-scaleble 是否允許使用者改變縮放比例

圖片設定

/*<style>*/
img {
width:100%;
height:auto;
}

設計模式

回應式網頁設計模式

Media Queries

屬性 解釋
width 視區寬度
height 視區高度
device-width 裝置寬度
device-height 裝置高度
orientation 裝置寬高比
aspect-ratio 視區寬高比
裝置類型
all 所有裝置
screen 一般電腦螢幕
print 印表機列印輸出
speech 朗讀式裝置
條件語法
and 符合多個條件
only 單一條件
not 不要某一個條件

版面流動方式

@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-->

完整程式碼

<!DOCTYPE html>
<html>
<head>
  <title>LAB 2</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width; initial-scale=1.0">
  <style type="text/css">
      * {
    box-sizing: border-box;
    background-color: #FAF0E6;
  }

    p {
      margin: 20px;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      flex-flow: row wrap;
    }

    .s1, .s2, .s3{
      width: 100%;
      border: 1px solid #000;
    }

    .s1 {
      background-color: #FFE4C4;
    }

    .s2 {
      background-color: #FAEBD7;
    }

    .s3 {
      background-color: #FFF8DC;
    }

    .footer {
      background-color: #FFE8BF;  
    }

    /* media query */
    @media (min-width: 600px) {
      .s2, .s3{
        width: 50%;
      }
    }

    @media (min-width: 800px){
      .s1{
        width: 90%;
      }
      .s2 {
        width: 45%;
      }
      .s3{
        width: 45%;
      }
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>When your life is not going right, then turn left.</h1>
  </div>
  <div class="container">
    <img src="https://cdn.royalcanin-weshare-online.io/jyJEPmYBaxEApS7LtgZ4/v3/ec52h-older-cats-and-incontinence-causes-and-treatment-hero-cat"></a>
    <h2>Lorem ipsum</h2>
    <div class="s1">
      <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="s2">
      <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="s3">
      <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>
</body>
</html>

完整程式碼

Bootstrap 介紹

  • 基本概念
  • 實作
  • Grid System
  • LAB-03

基本概念

  • 前端框架
  • 提供建立 RWD 網站的功能

Bootstrap 3 vs Bootstrap 4

為什麼要使用 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">

實作

語言設定

<html lang="zh-TW">
<p lang="fr">Je suis français</p>

特定段落設定語言

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 - 03

官方文件

用 Grid system 的概念，改寫 LAB - 02

LAB - 03

官方文件

<!DOCTYPE html>
<html>
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width; initial-scale=1.0">
  <title>lab 3</title>
  <style type="text/css">
    * {
    box-sizing: border-box;
    background-color: #FAF0E6;
    }

    p {
      margin: 20px;
      text-align: center;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      flex-flow: row wrap;
    }

  </style>
</head>
<body>
  <div class="header">
    <h1>When your life is not going right, then turn left.</h1>
  </div>
  <div class="container">
    <img src="https://cdn.royalcanin-weshare-online.io/jyJEPmYBaxEApS7LtgZ4/v3/ec52h-older-cats-and-incontinence-causes-and-treatment-hero-cat"></a>
    <h2>Lorem ipsum</h2>
    <div class="row">
      <div style="background-color: #FFE4C4; width: 100%; 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; width: 100%; 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; width: 100%; 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; width: 100%; 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>
</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; width: 100%; 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 3</title>
  <style type="text/css">
    * {
    box-sizing: border-box;
    background-color: #FAF0E6;
    }

    p {
      margin: 20px;
      text-align: center;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      flex-flow: row wrap;
    }

  </style>
</head>
<body>
  <div class="header">
    <h1>When your life is not going right, then turn left.</h1>
  </div>
  <div class="container">
    <img src="https://cdn.royalcanin-weshare-online.io/jyJEPmYBaxEApS7LtgZ4/v3/ec52h-older-cats-and-incontinence-causes-and-treatment-hero-cat"></a>
    <h2>Lorem ipsum</h2>
    <div class="row">
      <div class="col-xs-6 col-sm-4 col-md-3" style="background-color: #FFE4C4; width: 100%; 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; width: 100%; 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; width: 100%; 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: #FFF8DC; width: 100%; 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 class="container-fluid">
      <div class="row">
        <p>i am a footer</p>
      </div>
    </div>
  </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/

THANKS FOR LISTENING

Made with Slides.com