開發日誌-框架選擇-Bootstrap

by Alvin

開始進入網頁設計架構的開發,今天來跟大家介紹Bootstrap這個framework,為何我會選定它,選它的主要原因有3點:

-完整度高

我們從WIKI可以得到Bootstrap的相關資訊,從2011年至今有1X多年的發展歷史,過程中的版本不斷持續精修,直到最近的Bootstrap5版,開發/功能性大幅提升,使用介面也越來越人性

官網的標題可以看到斗大的字眼 “Build fast, responsive sites with Bootstrap” 目的就是要用框架來快速打造出RWD的網站,所以在Bootstrap本身的所有設計,只要透過class(樣式表)的設定,就可以達成RWD的能力,可以從電腦控制到手機版本,方便處理也不需要額外下css,我把完整度的部分整理一下資訊:

  • 響應式的網格系統

就如我前面所說的,Bootstrap的網格系統至今已經開發的越來越便利了,在css的命名也變得非常的好理解,你可以直接透過框格系統來了,因應不同的裝置給予不同的樣式設定

利用Google chrome的開發者工具來檢視,sm/md/lg/xl/xxl等各種不同的樣式所控制的範圍!

透過樣式將不同的裝置給予不同的排版模式,優點是可以保持良好的圖文品質及閱讀性!

 

  • 豐富便利的元件

這邊提供了各式HTML5的元素與基本功能,方便在開發的過程來取用,參考網址

 

  • 強大JavaScript的插件

框架已經將基本該有的能力整併進來了,如果要引入一些基本功能如:

    • Modal(模態對話方塊)
    • Dropdown(下拉式選單)
    • Scrollspy(捲動監聽)
    • Tab(分頁)
    • Tooltip(工具提示)
    • Popover(浮動提示)
    • Alert(警告)
    • Button(按鈕)
    • Collapse(摺疊)
    • Carousel(輪播)
    • Typeahead(輸入提示)
    • Affix(附加導航)

等...都無須在網路下載安裝了~

-資訊量多

說到資訊的部分,其實很多開發者都會以Bootstrap做為開發基礎,方便整合時不需要另外附掛或是修改核心原始碼,導致不相容的狀況發生,所以如果特殊額外的需求,網路幾乎可以幫你解決一大半的問題,而選擇了Bootstrap也無須擔心下一點整合的問題!

-整合性高

首先我將這次開發的資訊統整一下:(未來會持續新增)

以上基本都是建立在Bootstrap的基礎框架上,所以使用的樣式語法基本都是相同的,只有少部分需要額外處理,但已經省掉大部分的開發工時了!

Related Posts