跳至主內容

常見的 Bootstrap 新手中伏位:從手帶 app (居安抗疫) 下載頁一齊睇

常見的 Bootstrap 新手中伏位:從手帶 app (居安抗疫) 下載頁一齊睇
Alex Lau 劉光曆
2020-03-26

今早有朋友抱怨入境手帶的安排,其一個連登巴打聲稱收到所謂手帶 app (居安抗疫) 的下載 SMS,原來只是一條簡易網址 (http://bit.ly/33sPSpK) 。

這網址的作用,就是讓用家自行選擇自己到底是用 Android 手機還是 iOS 手機,再引導到相應的 Google Play Store 或 App Store。筆者一看到這個網站就覺得排位怪怪的,打開後發現,充滿著常見的 Bootstrap 新手中伏位!讓我們一起來看一看!

源始碼

希望這篇 Blog 推出之後,有關方面自然會更新一下這個頁面。故此,我先把我這刻看到的 Source Code 儲存下來:


<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.3.6/mobile-detect.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css "/>
  </head>
  <body>
    <div class="container">
      <h1 class="page-header">
        Download StayHomeSafe
        下載居安抗疫
      </h1>
      <div class="row text-center">
        <ul class="list-group">
          <li class="list-group-item"><a class="btn btn-lg btn-success big-btn android-btn" href="https://play.google.com/store/apps/details?id=com.compathnion.equarantine">
              <!-- img.pull-left(src='./google_play_04.png', width='80px')--><i class="fa fab fa-google-play"></i>
              <div class="btn-text"><small>Available on</small><br/><strong>Google Play</strong></div></a></li>
          <li class="list-group-item"><a class="btn btn-lg btn-primary big-btn apple-btn" href="https://apps.apple.com/hk/app/stayhomesafe-app/id1499780720"><i class="fa fa-apple"></i>
              <div class="btn-text"><small>Download on the</small><br/><strong>App Store</strong></div></a></li>
        </ul>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.j"></script>
      </div>
    </div>
  </body>
</html>

中伏一:沒有 viewport

以下是真實的手機畫面,有沒有發現所有按鈕都很細?

居安抗疫手機畫面

沒錯!雖然這個網站排版非常簡單,照道理應該是一個 Responsive Web Design (即可適用於手機、平板和桌面的網頁)。不過,即使這個網頁使用了 Bootstrap,也不會自然地放大畫面成為手機合適的版本。我們需要在 <head> 之中加入以下這句:

<meta name="viewport" content="width=device-width, initial-scale=1">

這樣才能使手機用戶第一刻瀏覽網頁時,顯示為最佳的闊度,有「手機版」的感覺。

在瀏覽器模擬加入 viewport 後的效果:

加入viewport後瀏覽器截圖

中伏二:不按 Bootstrap Grid System 排版

即使轉成了手機版,你有沒有發現排版有一點點走位?那個大標題和下邊的按鈕不是垂直對齊,而且那條灰色邊線還緊貼了側邊,應該不是設計原意。

另一個常犯的新手錯誤,就是搞不清 container, rowcol 這三款 class 的用法。

container 是用來把頁面在桌面版時把闊度壓縮,好讓頁面不會太闊;而在手機版,則讓左右兩邊留有少空隙。它還有一個變異版本,就是 container-fluid,這個會用盡整個頁面的闊度。

不過,row 雖然看似用來分行數,但真正的目的只有一個:就是用來放置 col。不論如何,所有 row 都必須在 containercontainer-fluid 之中,而所有 row 之中只應放著 col 相關的 class。

In a grid layout, content must be placed within columns and only columns may be immediate children of rows. (參考:https://getbootstrap.com/docs/4.4/layout/grid/

開發者在「居安抗疫」這個頁面中,在 row 之下放置了 list-group,導致那條灰邊跌了出去。如果當中再加多一兩層的 row,很快整個版面都會走位。

在瀏覽器模擬加入 col 後的效果:

加入col後瀏覽器截圖

中伏三:錯誤安裝無關的 JS + 打錯字

整個頁面其實沒有什麼互動功能,為了整潔而使用 Bootstrap 的 CSS 絕對是無可厚非,但令筆者驚嘆的是,在頁面中最下方,竟然放置了 Bootstrap JS 相關的 <script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.j"></script>

安裝 Bootstrap JS 不但是多餘,更犯了兩個錯誤:

  1. 竟然打漏了最後的 s 這個字母,這應該是 .js 不是 .j 啊!!!(筆者崩潰)

  2. 竟然沒有先放置 jQuery 的 <script>,Bootstrap JS 4 是需要 jQuery 的呢!

結語

的確,是不是很多人參與科技研發與 Bootstrap 用得好不好未必有直接關係,但常言道香港科技需要進步,如果連最基本的網站開發都做不好,還是會被其他國家淪為笑柄,並被他們拋離得越來越遠。希望指出我們科技同行的中伏位,能夠鼓勵大家的技術水平有所提升。

留言

閱讀更多

科技會過時?

科技會過時?

科技會過時?
Gordon Lau 劉偉中
2019-04-18

不諳編程或是編程初學者常常會有一個印象:就是資訊科技發展很快,一種最新技術可能數年又會變得「不再流行」,又時時會有一些新穎的科技流行語(Buzzword),早幾年是雲端、大數據,過了一會又是數據科學、人工智能、現在又出現了所謂的區塊鏈技術。編程初學者,在沒有先前經驗的情況下,往往無所適從,不知如何是好。


天文台的理想與現實

天文台的理想與現實

天文台的理想與現實
Alex Lau 劉光曆
2019-05-03

香港天文台的預測經常令你失望?是你的心理作用,還是這台的預測真的有偏差?配合 Web Scraping 和 d3.js 讓大家都把誰是誰非一眼看通透!


學好手勢 == 學好Coding

學好手勢 == 學好Coding

學好手勢 == 學好Coding
Gordon Lau 劉偉中
2019-08-21

編程老手與編程新手在工作時,不論效率、思維方向、甚至打字速度都截然不同,不過在學習編程的道路上,有一個方面常被忽略,就是編程手勢(Coding Practice),有豐富實戰經驗的工程師,通常培養了良好的編程手勢,工作時,自然錯誤較少,也因為除錯得少,省略了不少寶貴的時間,整體結果也蔚然不同。


學寫Code失敗之四大原因

學寫Code失敗之四大原因

學寫Code失敗之四大原因
Gordon Lau 劉偉中
2020-03-21

不知不覺間,筆者從事編程教育已踏入第三個半的年頭:在這段時間之中,見證了二百多位同學由編程初哥開始,經過十多星期的努力、挫折、合作,最終成為專業的程式設計師。當然,在這段時間之中,筆者亦見證了一些學寫Code失敗的情況,固然每個人的天份才能有所不同,有些同學的思考方式天生就與編程較為契合,有些同學則要花九牛二虎之力,才能成為一個專業的程式設計師。 因此,筆者由數年的觀察所得,發現學寫Code失敗的同學皆有一些共通點,因此希望在此分享,如果你有意踏入資訊科技一行,或是想報讀我們Tecky的課程,不妨留意一下自己編程有否這些自己不察覺的問題啊!


索取課程大綱
提交後, 請檢查你的電郵
hello@tecky.iot.me/tecky_hub+852 9725 6400
green_org
商界展關懷 2019-2022
英國頒證機構 TQUK 認可中心
aws_partner
薯片叔叔共創社 重塑教育挑戰大獎
B Corp™ 認證共益企業
無障礙網頁內容指引 (WCAG) 2.1 AA 級
香港無障礙網頁 金獎
© 2024 Tecky Academy Limited