logo

bar_normal

分享:Bootstrap 4 前端自適應網頁框架

Bootstrap 是目前最受歡迎的 CSS 和 Javascript 的框架,提供自適應及行動裝置優先的排版。豐富的CSS 組建以及簡單的JS 模組,讓工程師可以快速的撰寫出簡易的網頁,卻不失美感。社群上也有許多相容的元件套件可使用,例如:Datepicker...等。官方也提供Sass 檔案,讓進階使用者可自訂Bootstrap 樣式。

目前4.0 已經來到 alpha.6 的版本,官方也預告beta 的版本即將釋出。現在就帶大家了解4.0 帶來的新功能吧~

Layout

網格 Grid system

Bootstrap 基於12 列的佈局,並有多層的 media query。4.0 帶入了強大的flexbox 網格系統用來建構各種不同的佈局。

網格組成的三元素:.container(或.container-fluid).row.col-* 。新的Bootstrap 將Responsive breakpoints 切分為5 部分: col-*, col-sm-*, col-md-*, col-lg-*, col-xl-* 可以選擇。

  1. .container: Bootstrap 以容器來裝集網站的內容。.container 是作為固定寬度,如果想使用全寬則可使用.container-fluid
  2. .row: 為水平行,確保.col 在其中能正確排列。
  3. .col-: 為欄,內容必須至於此元素中。在欄中可以為5 種斷點定義所需的欄位數,每行可以切分為12 欄 (ex: 在 medium 斷點上均分為3 欄 .col-md-4)。新的Bootstrap 中,如果沒有指定寬度,將會透過flexbox 均分為等寬 (ex: 4個 .col-sm,每欄將會以25%的寬度呈現)。

See the Pen Bootstrap 4 - Grid system by Bojia (@bojia_su) on CodePen.

Bootstrap 4.0 grid system

※ Bootstrap 4.0 將3.0 原有的.col-xs-* 以.col-* 取代

Alignment

新的Bootstrap 提供了flexbox 功能,讓排版能更加靈活,同時也利用其對齊功能進行水平及垂直的對齊。大幅改善在3.0 時對齊的困擾。

在行中想讓各欄垂直對齊於行中,則在.row 的class 加入.align-items-start, .align-items-center, .align-items-end,即可輕鬆完成垂直對齊。而要讓欄水平對齊於行則在欄的class 加入.align-self-start, .align-self-center, .align-self-end。

See the Pen Bootstrap 4 - Vertical alignment by Bojia (@bojia_su) on CodePen.

以上簡單介紹了Bootstrap 核心Grid system 改進的部分,官方的說明文件上也詳細的列出所有的功能,有興趣的朋友可以到這裡閱讀。