Bootstrap教學大補帖 : 網頁設計的必備工具

Bootstrap教學大補帖 : 網頁設計的必備工具

梅干桑

2021/10/18

3362


一、網頁設計必備的Bootstrap

隨著現在的裝置愈來愈多元,網頁設計已不再像早期一樣,只要將桌機版設計好就好,同時RWD響應式網頁,也有助於SEO搜尋排名,因此現在設計網頁RWD響應式網頁,已成為網頁設計的基本需求,而目前有許多RWD響應式網頁的前端框架,但Bootstrap全球有1/4的使用率,是目前最愛歡迎的前端網頁框架之一!

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

二、用速碼輕鬆快速做出網頁

梅干老師精通網頁開發、商品打光攝影、影像精修後製等領域,至今已出版 8 本相關著作,包含《iPad2 超速影像編修技法》、《梅問題的超質感商品攝影手法大公開》等。

2007 年創立「梅問題.教學網」,主要教學網頁設計相關技能,梅干系實用、易懂的教學風格深受學員喜愛,開站至今已累積了近 3 萬名粉絲,並開設無數堂實體課。

三、新版Bootstrap5功能有哪些?

由於Bootstrap一直以來,內建以賴著jQuery,但在Boostrap5.0則正式的告別jQuery框架,進而提升網頁的效能,同時也不會因為要使用新版jQuery的函式,而造成載入新版的jQuery與Bootrap所引用的jQuery版本衝突的冏境,甚至Bootstrap5.0也正式的放棄了對 Internet Explorer(IE)的支援,並且內建Iconfont讓在設計網頁時,無需再載入第三方Iconfont模組與使用版權上的問題,甚至Bootstrap5.0更支援文字字級的RWD效果,讓文字也會隨著裝置顯示尺寸自動的縮放,以及區塊間的距離,也提供新的設計屬性,只需修改HTML的標籤,就可讓區塊在行動版時,不會上下黏在一起,同時Bootstrap5.0讓網頁截入速度更快。

1. Bootstrap5 : 區塊間距可移動

Grid網格系統,一直是Bootstrap重要的核心,透過Grid就可快速的規畫出版塊的大小,甚至到了Bootstrap5.0還新增了許多的參數可作設定,讓原本,只有左右間隔15像素,現在可自訂左右間距,甚至還可控制上下間距,而這些設定,完全無需寫到CSS,一切都只要透過HTML標籤的設定,立即就可完成,因此就即便是新手,也能操控自如的編排出所需的版面。

2. Bootstrap5 : 自由載入jQuery

雖然Bootstrap5.0將不再依賴jQuery框架,這反而讓在設計網頁時,有更靈活的運用,網頁設計者就可依需求,自行的載入所需的jQuery版本,也不會再受限於Bootstrap內建jQuery載入的版本,甚至網頁設計者也可依需求,載入其它的Javascript框架。

3. Bootstrap5 : 內建豐富SVG素材

網頁圖示文字,是目前設計網頁時,常會使用到的素材之一,透過向量圖示文字,讓圖示透過CSS就能改變圖示的大小與顏色,且完全不會影響到畫質,甚至在使用上也無版權的疑慮,同時Bootstrap5.0所提供的圖示,與3.0版相較下,要來的精緻與平滑許多。

4. Bootstrap5 : 內建文字RWD響應式效果

文字對於RWD一直是許多人心中的痛,由於文字不像圖片,擁有自動縮放的功能,因此就得全手工的方式,自行的設定文字在什麼裝置底下,標題、內文、備註...文字字級,是一件相當麻煩的事,但現在透過Bootstrap5.0後,內建就已提供文字RWD響應式的效果,讓文字可隨著裝置自行的縮放調整。

四、如何用Bootstrap設計網頁?

雖然Bootstrap內建包含了許許多多的功能與特效,有些是前端用有些是後端用,可以透過梅干老師的這堂課 : Bootstrap 5速碼現學現用!輕鬆打造排版、特效、RWD一頁式網頁,只針對前端網頁常會用到的特效與元素進行分享,減少摸索時間,並以重點式教學,讓你能在最短的時間內,立即上手Bootstrap,甚至搭配梅干獨家的速度,讓你完全不用背Bootstrap的原始碼,輸入短碼(速碼)立即產生,而每個範例都各自獨立,讓日後在複習時,可以快速的理解,同時在課程最後,也會將前面所學的,實際的製作一個完整的範例,更能讓你了解每個效果的應用與網格編排的技巧。

梅干桑
● TWCA 台灣網路認證公司 Bootstrap 講師
● 展碁國際股份有限公司 HTML5、CSS3、Bootstrap 網頁課程講師
● 巨匠電腦 美工/網頁/多媒體講師