開始進入網頁設計架構的開發,今天來跟大家介紹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也無須擔心下一點整合的問題!
-整合性高
首先我將這次開發的資訊統整一下:(未來會持續新增)
- 後台管理(AdminLTE)
- 選單系統(jQuery Menu Editor)
- 版型建構器(contentbuilder.js)
以上基本都是建立在Bootstrap的基礎框架上,所以使用的樣式語法基本都是相同的,只有少部分需要額外處理,但已經省掉大部分的開發工時了!