iT邦幫忙

1

[鼠年全馬鐵人挑戰] Week15 - 超新手學前端 - Bootstrap 4 概念筆記

  • 分享至 

  • xImage
  •  

什麼是 Bootstrap 4

Bootstrap 是一種由 HTML、CSS 和 JavaScript 寫成的前端框架,可以更快更方便的開發網站
Bootstrap 可用於排版,表單,按鈕,表格,導航,模態,圖像輪播等基於HTML和CSS的設計模板,以及可選的JavaScript插件。
目標是為了達成 優先讀取響應式與行動裝置,也就是讓你的網站排版可以自適應不同裝置螢幕的大小。它預先做好一套網站的基礎建設,讓你能在框架的基礎上進行開發,不需要再去煩惱瑣碎的設定。
Bootstrap 的特色就是可以不用全手刻 CSS,只要寫好 HTML 架構再加上幾個 Bootstrap class,就能幫你快速解決之前純手刻的遇到的問題,個人覺得也是一種毒藥工具(大誤XDD

版本差異

Bootstrap 就像其他程式一樣,隨著時代潮流不同也會新增修一些 bug 及符合使用者需求,現在 Bootstrap 最新的版本是 Bootstrap 4,帶有新組件,更快的樣式表和更快的響應速度。
Bootstrap 4可以支援所有主要瀏覽器和平台的最新版本。但卻不支持Internet Explorer 9及更低版本(該死的ieXDD),所以如果專案需求需要支援到 IE ,那就需要使用Bootstrap 3 來寫。

Bootstrap的優點

  • 新手較易上手: 新手只要有基本的 HTML 及 CSS的基本排版概念,就能開使用 Bootstrap。
  • 自適應功能: Bootstrap的自適應CSS可以適應各種裝置。
  • 瀏覽器兼容性: Bootstrap 4與所有現代瀏覽器(Chrome,Firefox,Internet Explorer 10 +,Edge, Safari和Opera)都可以相容,但較低的版本則不行。
  • 降低開發時間: 如果需要在短時間開發出你想要的效果,那 Bootstrap 可以達成你的需求。
  • 懶人必備: 如果不想純手刻 CSS ,選擇使用那 Bootstrap 也是個不錯的選擇。

Bootstrap的缺點

除了上面的優點,反之一定也有缺點,但我認為的缺點或是你們的優點,就好像女生的化妝品保養品百百款,總有喜歡這產品跟不喜歡這產品的使用者,我的蜜糖也有可能是你的毒藥就是這樣來的XDD
前端工程師在排版的過程中,基本上有分三派:

  • 純手刻排版,不使用或很少用 Bootstrap。
  • 一半手刻,但會去看 Bootstrap 有沒有適應自已專案的功能並且去使用它。
  • 以 Bootstrap 排版為主,一點點的手刻。

個人是比較偏好純手刻排版,真的手刻不出來或是趕時間才會使用到 Bootstrap ,尤其是新手,如果一開始基本的 HTML 及 CSS 排版還很不熟不穩,那我建議一開始先純手刻,等基礎功穩一點在慢慢加入學習 Bootstrap 也是可以的。

不管是哪一派,其實都沒有對錯,只要依你平常的撰寫習慣即可,重要的是要讓自已學到東西,在日後處理專案可以更加順手順利才是重點呢:)
下一篇來寫寫 Bootstrap 的應用吧:)


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
iT邦新手 5 級 ‧ 2020-05-19 12:28:32

手刻彈性比較大
我自己是因為工作上要做的介面客製化成分多(包含RWD)
所以用Bs就沒有那麼大的優勢...

我要留言

立即登入留言