其他資源 技能 技能提升 軟體工程

【Bootstrap 教學】網頁設計小白也能輕鬆駕馭

updated on 0 Comment on 【Bootstrap 教學】網頁設計小白也能輕鬆駕馭

隨著現在的行動裝置愈來愈多元，網頁設計已不再像早期一樣，只要將桌機版設計好就好，RWD響應式網頁，也有助於SEO搜尋排名，因此現在設計網頁RWD響應式網頁，已成為網頁設計的基本需求，現在有許多RWD響應式網頁的前端框架，而Bootstrap是目前相對受歡迎、也是最多人使用的前端網頁框架之一！這篇簡短的文章Glints要來簡單介紹Bootstrap，讓新手能對bootstrap網頁設計框架有一定的了解。

Bootstrap是甚麼?

Bootstrap是由Twitter公司所推出的前端框架，擁有龐大的使用者經驗資料，無論在特效還是使用介面，都能符合現今大眾的使用習慣，甚至Bootstrap還整合網頁常會使用到的元素，如：圖像輪播、導覽列、下拉選單、滾動式頁籤、網格系統、表單等功能。最厲害的是這些特效與編排，完全無需撰寫到任何的CS、Javascript，只需要透過html標籤與架構設定，就能輕鬆的製作出各式的網頁特效與RWD版面編排。即便完全不懂CSS與Javascript，也能製作出各種酷炫的網頁效果，讓製作RWD響應式網頁，變得更簡單更快速。

如果想要了解何為前端軟體工程師的人，可以閱讀一下文章：【前端軟體工程師職責是包含什麼？如何找到高薪前端職位？】

Bootstrap的核心

Bootstrap是一個由HTML、CSS和JavaScript寫成的前端框架，核心的設計目標是達成RWD響應式與行動優先，也就是讓你的網站排版可以自動適應螢幕大小。它預先做好一套網站的基礎建設，讓你能在框架的基礎上進行開發，不需要再去煩惱瑣碎的設定。

Bootstrap的導入方式和平常引入CSS和JavaScript檔案的方式基本上也一樣，下載檔案之後，將其引入到HTML檔案裡。在官網的Getting Started頁面有介紹各種導入方式。

以下是引入專案的方式：

  • 請將CSS的<link>標籤放在<head>裡，請記得瀏覽器是由上而下載入檔案，後面載入的會覆蓋掉前請載入的，如果Bootstrap和你自己的CSS發生衝突，應該要以你的為主，所以你的檔案要放在Bootstrap的後面。
CSS links
  • JavaScript會用到 jQuery、Popper.js、和Bootstrap的JavaScript函式庫，因此共有3支檔案。請依序將這些 jQuery、Popper.js、和Bootstrap檔案放在JavaScript的函式庫之前，同理，如果你有另外寫自己的JavaScript檔案，應該放在它們之後。
implied CSS and JS

Bootstrap編碼使用

安裝好Bootstrap之後，接下來就是在需要的時候，到官方文件上去尋找現成的元素，通常做法是把文件上的HTML複製到專案再修改。因為Bootstrap的使用方法是「翻找文件、複製貼上」，所以需要稍微熟悉文件裡有哪些項目。這份文件包羅萬象，我們建議你可以先快速瀏覽以下幾個頁面：

內容

Reboot建立在Normalize的基礎上，僅使用元素選擇器就提供了許多具有自選好樣式的HTML元素。額外的樣式只能通過其他類別來完成。例如，我們Reboot一些<table>樣式以獲得更簡單的基準，然後提供.table、.table-bordered等。

Bootstrap排版的文檔和示例，包括排版中的全局設置、標題、正文、列表等。

headings

這套傳統模組的標題大小最適合新手需要的網頁。當你需要凸顯一個標題時，可以考慮使用顯示標題：一種更大、更顯眼的標題樣式。Bootstrap已經預先寫好了CSS class，只要把class加到 <p> 元素裡面，打成一串指令，就會產生不同大小的標題了。

display headings

組件

組件是Bootstrap的核心所在，它把現代網頁常用的元件如導覽列、下拉選單、警告訊息、按鈕都事先做好，讓你可以複製貼上。Bootstrap的自定義按鈕樣式用於表單、對話框等中的操作，並支持多種尺寸、狀態等。

Components

.btn類旨在與<button>元素一起使用。但是，你也可以在<a>或<input>元素上使用這些類，儘管某些網頁可能會應用略有不同的渲染。

在用於觸發頁面內功能的<a>元素上使用按鈕類時，而不是鏈接到當前頁面中的新頁面或部分，這些鏈接應該被賦予一個role=”button”以適當地將其目的傳達給輔助技術，例如屏幕閱讀器。

Button tags

佈局

如果你對RWD已經有所認識，運用Bootstrap Grid系統可以讓設計網站原型（prototyping）快速有效率。

Containers是Bootstrap中最基本的佈局元素，在使用我們的默認網格系統時是必需的。從響應式、固定寬度的containers（意味著其最大寬度可以在每個斷點處更改）或流體寬度（100%的寬度）中進行選擇。

Containers

總結

Bootstrap知名的原因是它的RWD響應式佈局框架。即使你想要鍛練自己手刻CSS的技術，我們仍然會建議你先熟悉Bootstrap ，因為Bootstrap撰寫CSS的方式也很值得學習，在導入Bootstrap之後，你可以隨時打開Typographs，幫助自己觀摩更多專業的CSS設定細節。

如果你希望可以得到更多資訊，可以追蹤Glints的臉書粉絲頁，每個星期都可以看到熱門職缺與職涯資訊 。

你也可以到Glints – Taiwan去了解更多！或是註冊帳號，收到職缺通知！

延伸閱讀：

對軟體工程師求職有興趣的人，可以看看Glints的其他精選文章

Leave A Comment

Your email address will not be published. Required fields are marked *