形象首頁版型介紹

CH9 86

| Landing page 拆解 |

  • 先架設上方 navbar 與 icons 部分

Bootstrap-laddingpage-navbar示意

  • Carousel 輪播圖片部分可用 <header> 包覆
    • 直接 HTML 貼入 <img> 會以圖片原始大小呈現，這邊在 HTML 使用背景圖方式讓圖片固定高
      1. 先設定圖片高度 .header-carousel-item ( 不直接修改 .carousel-item 這個元件，另外自訂一個 .header-carousel-item )
      2. 於 .carousel-item 拿掉 <img> 換上背景圖 → style="background-image: url( );"
      3. 輪播圖片顯示出來後，發現位置怪怪的，可自訂 .bg-cover ( background-size : cover ; background-posiion : center center ; ) 讓圖片填滿容器並置中
        • cover : 背景圖片小於容器時，將背景圖片的大小放大至容器大小並填滿文章
<--
<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="https://images.unsplash.com/photo-1492683513054-55277abccd99?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
        <img src="https://images.unsplash.com/photo-1497668512640-fcbd959e5338?dpr=2&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=" class="d-block w-100" alt="...">
    </div>
</div>
-->
改成 ↓ :

<div class="carousel-inner">
    <div class="carousel-item header-carousel-item bg-cover active"
        style="background-image: url(https://images.unsplash.com/photo-1492683513054-55277abccd99?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=);">
    </div>
    <div class="carousel-item header-carousel-item bg-cover"
        style="background-image: url(https://images.unsplash.com/photo-1497668512640-fcbd959e5338?dpr=2&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=);">
    </div>
</div>

| 三欄式排版 |

  • Font awesome icon 如果沒有 <a> 包起，建議用 div 包起，方便調整外觀。
  • <section> 包覆三欄式排版，方便作調整

| 使用格線做混合排版-兩欄式 | 範例

環境 ： 左邊圖片延伸至左，右邊文字對齊 container。md ( .col-md 為中斷點 ) 以下變一欄式文字在圖片上方 。

  1. 最外層使用 <section> ，並使用流體的 .container → .container-fluid 。設定 style=" position : relative ; " 。
  2. 左方 RWD圖片 ： <section> 內使用 Grid system ( .row .col-md-5 ) ，往左滿版自動貼齊邊線的圖片使用 style=" position : absolute ; top:0; bottom:0; "; ＆ 加入前方設定的 bg-cover 。
    • position : absolute ; → 跟隨 .container-fluid 上下撐開。
    • top:0; bottom:0 ; → 上下撐開 。內容量會因左方文字內容而自動上與下伸展開來。
  3. 右方文字內容 ： 與上方 navbar 一樣左右有固定空間，所以使用 .container 內再使用 Grid system ( .row .col-md-7 )
  4. 圖片是透過 .col-md-5 調整寬度 ，文字是透過 .col-md-7 調整寬度
  5. 右方文字內容內還有兩欄式排列的文內容，該如何處理？
    • 於 .col-md-7 內再加入 Grid system ( .row .col-md-6 .col-md-6 )
  6. 文字顏色調整 ：斷點 md 以下文字為白色，以上為黑色。
    • 一律先套上白色字 ( .container-fluid.text-white )，在斷點 md 以上時套上深色字 ( 文字的 .container 內層 .row.text-md-dark )
    • Bootstrap 4 內沒設定 .text-md-dark ，需自行設定。 路徑 ： Layout / Responsive breakpoints 複製 md 斷點的 media quries ，這樣視窗於 md 以上自體會呈現深色，以下會呈現白色
@media (min-width: 768px) { 
    text-md-darK{
        Color:#333;
    }
 }

『註』

  • section 內同時存在 .row 與 .container 會有影響嗎？.row 的內容有一個絕對定位 ( absolute )是不占空間的，所以不會影響 。
  • Grid system 可再包 Grid system ，但 row 內層一定要是 column， column 外層一定要是 row 。

| 充滿自由的 Flex 排版 |

  • 儘可能不要在 column 上做事，所以在 .col-md-6 下寫一個 .d-flex
    • 因為 column 本身是還有包含 Gutter ，如果在上面直接運作，容易將 Gutter 給覆蓋掉，導致格線的顯示不一致喔

Bootstrap-column下的flex排版

| 上方使用格線做混合排版-兩欄式的反向 | 範例

  • 文字於右方圖片於左方，手機板 : 文字於圖片上方
  • 外層一樣使用 section.container-fluid 並做 relative ，圖片文字皆使用 Grid system ，圖片部分用 absolute 做上下展開 ( top:0; bottom:0; ) ，靠右對齊 ( right:0; ) 於 .container-fluid 。 文字部分因為沒有貼齊邊線，所以用 .container 做包覆
  • 圖片於右方，md 以下文字會在圖片上方變白色。這時圖片會把文字蓋住，使用 z-index 讓文字置上

| 網頁上放置 Google map 與表單 |

  • 使用 section 與 Gris sysytem
  • 至 google map 複製 " 嵌入地圖 " 的網址 ，把寬度更改為 100% 才能自適應 。
  • radio 部分使用 Bootstrap 的客製 radio ( 帶 transition )

Bootstrap-custom-form_radios

| Bootstrap 簡易表單驗證 |

  • 此方式屬於前端的驗證
  • 於每個 <input> 內加上 required ，如果遇到沒填寫的欄位會跳出警示訊息，避免用戶在沒有填寫任何資訊下送出。
    • 非每個瀏覽器都適用，但目前主流瀏覽器皆通用

Bootstrap 簡易表單驗證

  • 自動送出的樣式-回饋訊息 範例
    • 路徑 : Forms / Validation
    • 於 <form> 加入 Class .needs-validation 與 novalidate 。並於最下方加入 <script>
      • form 的 class 是對應下方的 script 的 getElementsByClassName ( ‘ class ‘ )
    • 回饋訊息的文字加在 .invalid-feedback 或 .valid-feedback

Bootstrap-表單回饋訊息

| 格線系統與背景效果 | 範例

  • column 以 style 加入背景圖片。因為 column 的左右 gutter 是用 padding 推的，所以不會影響背景圖。
  • 這邊內文四周的邊距使用兩個方式
    • 第一層 row 的 column 內再寫一個 Grid system ( .row .col-md-9 )
    • 第一層 column 寫 padding
  • 內文直接寫再第一層 row 的差異 : 電腦版會呈現下圖左方，四周都有等距 。如果再一層 grid 再寫一層 grid 就會如下圖右方圖示依 column 的比例呈現內容大小

Bootstrap-格線系統與背景效果只寫一層grid

| footer 練習 | 範例

  • 不建議使用 ul li排版，因為 Copyright 和其他社群按鈕並非同一主題下的項目

Bootstrap-六角課堂footer練習

| 網頁中不同 Modal 互相切換手法 | 範例

Bootstrap-modal示意圖

  • 路徑： Components / Modal
  • 到上方 navbar 中的登入與註冊加入 data-toggle="modal" 與 data-target="#自訂ID"
  • 複製 .modal 架構放入 html 下方 <script> 前。.modal 內 id 更改為上方按鈕的對應 ID
  • 修改 modal 內登入資訊位置的背景顏色，可至 .modal-header 加入 .bg-主題色
  • 從 登入 modal 切換至 註冊 modal
    • 於 .modal-footer 加入一個切換連結這邊使用 <a> 並於裡面加入 data-dismiss="modal" ( 關閉此 modal ) 、data-toggle="modal" ( 啟用 )、data-target="對應的ID" ( 記得加入井字號 # )

| 修正 Modal 小錯誤 | 範例

Bootstrap-修正Modal錯誤

Navbar 的登入與註冊 modal 內部做切換時，註冊部分手機板會有頁面太常無法使用 scroll 的問題。開發者工具可見各自按取登入與註冊的切換按鈕時會出現 modal-open 的 Class ，但從登入或註冊的切換按鈕切換過去的 modal 就不會出現 modal-open 的 Class。這邊自行寫入 JavaScript 修正

  • 架設環境 $(document).ready(function () { }); ，並於環境中加入 console.log(‘ready’); 測試環境是否正確。
    • 重新整理頁面，可見開發者工具內 console 有出現 ready

Bootstrap -console視窗01

  • 按下切換鈕觸發特定事件，例如下方程式，同時包含 data-dismiss="modal" 和 data-toggle="modal" ， 所以把有關這兩個的 a 連結選起來 。使用 jQuery 的選擇方式
    • 驗證此段 jQuery 是否正確執行 → 加入 console.log(‘click’); ，到開發者工具的 console 點選切換鈕的 a 連結，會顯示 click 字樣，其他非 data-dismiss="modal" 和 data-toggle="modal" 的 a 連結則不會有 click 出現。
    • 參考文章 MDN web docs 屬性選擇器
//<a class="mr-auto" href="#" data-dismiss="modal" data-toggle="modal" data-target="#registerModal">切換至註冊</a>

$(document).ready(function () {
    console.log('ready');
    $('a[data-dismiss="modal" ][data-dismiss="modal"]').on('click',function()({
        console.log('click');
    });
});
  • 在 <body> 把 .modal-open 加回
    • 把 a 連結上的 data-target 選起 → var target = $(this).data('target');
    • 驗證 : console.log('target' , target ); → 前面 ‘target’ 是字串，後面 target 是取出的變數 。點選雙方切換鈕驗證有出現正確 a 連結的 data-target #ID 即可進行下一步
$(document).ready(function () {
    console.log('ready');
    $('a[data-dismiss="modal" ][data-dismiss="modal"]').on('click',function()({
        console.log('click');
        //把 a 連結上的 data-target 選起▼
        var target=$(this).data('target');
        console.log('target',target);
    });
});

Bootstrap -console視窗02

  • 使用 jQuery 的 select 把它給選回來
  • on 裡面為整個 modal 顯示出來後觸發的事件 ，可參閱 Modal_ Events : shown.bs.modal 完全顯示狀態。加入 ‘show.bs.modal’ 顯示後觸發 body 的 modal-open 的事件
<script>
    $(document).ready(function () {
        //console.log('ready');
        $('a[data-dismiss="modal"][data-toggle="modal"]').on('click',function(){
            //console.log('click');
            //把a連結的data-target選起▼
            var target=$(this).data('target');
            //console.log('targrt',target);

            //on 裡面為整個 modal 顯示出來後觸發的事件▼
            $(target).on('show.bs.modal' , function(){
                $('body').addClass('modal-open');
            });
        });
    });
</script>

課堂問與答

  1. .container-fluid 與 .container 差異 ? 原出處

    • container-fluid 和 container 的效果相似，會將包住的元素置中，不過使用 container 時，會發現在容器外有一個隨著瀏覽器寬度變化而變化的 margin ，而 container-fluid 沒有這功能，使用 container-fluid 螢幕會保持 100% 的寬度你可以看一下這個範例的差異: https://codepen.io/rider159159/pen/bGGGYjm

  2. 使用格線作混合排版問題 原出處

    • .col-md-5 設定為絕對定位後，會往外層找到 .container-fluid (設定為 relative )為基準來決定它的位置，.col-md-5 就會脫離原本預設的版面配置，也就不會佔有空間，原本應該顯示 .col-md-5 的位置會自動由後續的元素 ( .col-md-7 ) 遞補上去，在此節的例子中，.col-md-7 和 .col-md-5 會重疊在一起，所以 .col-md-7 需要加上 .justify-content-end 才能推到 .col-md-5 的右邊去喔!

  3. <head> style 標籤上寫 css 與 <body> 內標籤寫 css 的權重? 原出處

    • 寫在 style 標籤內會如同外連的 CSS 一樣。可以自訂選取器及屬性，權重上也是等同於外連的 CSS。 而寫在標籤上與上述的樣式套用是接近的，兩者差異是在權重，寫在標籤上的權重會大於寫在外連及 style 標籤內

資料來源

最後修改日期: 2 5 月, 2020

作者