Bootstrap 3 和 4 的區別

描述

Bootstrap 是一個強大且流行的移動優先前端框架，用於使用 HTML、CSS 和 JS 框架構建響應式移動優先網站。

下表顯示了 Bootstrap 3 和 Bootstrap 4 的區別：

序號	元件	Bootstrap 3	Bootstrap 4
1	CSS 原始檔	LESS	SCSS
2	網格系統	4 層網格系統 (xs, sm, md, lg)	5 層網格系統 (xs, sm, md, lg, xl)
3	CSS 單位	px	rem
4	字型大小	14px	16px
5	下拉選單結構	使用 <ul> 和 <li> 建立	使用 <ul> 或 <div> 建立
6	列偏移	col-md-offset-4	offset-md-4
7	影像	.img-responsive 類	.img-fluid 類
8	表格	向父 <div> 元素新增 .table-responsive 類	向 <table> 元素新增 .table-responsive 類
9	Glyphicons	支援	不支援
10	媒體物件	使用媒體物件的類，例如 .media、.media-body、.media-object、.media-heading、.media-right、.media-left、.media-list 和 .media-body	僅使用 .media 類用於媒體物件。
11	深色/反向表格	不支援	使用 .table-dark 類建立深色/反向表格
12	複選框和單選按鈕	使用 .radio、.radio-inline、.checkbox 或 .checkbox-inline 類顯示覆選框和單選按鈕	使用 .form-check、.form-check-label、.form-check-input 或 .form-check-inline 類顯示覆選框和單選按鈕
13	表單控制元件大小	使用 .input-lg 和 .input-sm 類增加或減少輸入控制元件的大小	使用 .form-control-lg 和 .form-control-sm 類增加或減少輸入控制元件的大小
14	幫助文字	使用 .help-block 類顯示幫助文字	使用 .form-text 類顯示幫助文字
15	樣式	在按鈕上使用 .btn-default 和 .btn-info 類	在按鈕上使用 .btn-secondary、.btn-light 和 .btn-dark 類，並刪除了 .btn-default 類。
16	輪廓按鈕	不支援	使用 .btn-outline-* 類為按鈕設定輪廓顏色樣式
17	按鈕大小	提供 .btn-xs 類	僅提供 .btn-sm 和 .btn-lg 類，並刪除了 .btn-xs 類
18	選單標題	將 .dropdown-header 類用於 li 標籤	將 .dropdown-header 類用於 h1 - h2 標籤
19	分隔符	在 li 元素中使用 .divider 類	在 div 元素中使用 .dropdown-divider 類
20	固定導航欄	使用 .navbar-fixed-top 和 .navbar-fixed-bottom 類將導航欄固定到頂部或底部	使用 .fixed-top 和 .fixed-bottom 類將導航欄固定到頂部或底部
21	分頁器	使用 .previous 和 .next 類對齊頁面	不支援
22	全寬 Jumbotron	在全寬 Jumbotron 上不使用 .jumbotron-fluid 類	在全寬 Jumbotron 上使用 .jumbotron-fluid 類
23	輪播專案	對輪播專案使用 .item 類。	對輪播專案使用 .carousel-item 類。
24	井、面板和縮圖	支援	不支援。改用卡片。
25	內聯導航	不包含 .nav-inline 類	使用 .nav-inline 類將導航顯示為內聯

列印頁面