Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
最大的改變?
- 開始有了初始值的概念(如:.col / .col-12)
- 增加一個裝置尺寸區間 576px ~ 767px
- 將原本的float改成使用flex
- 因為採用了flex之後增加更多的對齊方式(如:.justify-con...
padding-left: 0;
消除row自身margin以及其下一層欄(col)的padding為0,目的是為了製作滿版無欄距的版面
.col
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
寬度...
讓欄位變成最後一欄,但當多個欄都有設定時,則會依原始順序排列。
.flex-尺寸代號-last
order: 1;
.flex-unordered {
order: 0;
讓欄位恢復原始排列順序,由於撰寫位置放在 flex-first 與 fl...
.flex-裝置尺寸代號-wrap-reverse
flex-wrap: wrap-reverse !important;
格線主軸對齊控制============================.justify-content-start j...
.align-items-裝置尺寸代號-baseline
align-items: baseline !important;
.align-items-stretch
align-items: stretch !important;
.alig...
.align-self-end
align-self: flex-end !important;
.align-self-裝置尺寸代號-end
align-self: flex-end !important;
.align-self-cente...
.table-sm td
padding: 0.3rem;
表格色彩============================舊版名稱.warning
.table-warning,
.table-warning > th,
.table-war...
.d-裝置尺寸代號-none
display: none !important;
此控制將會控制該裝置以上所有的尺寸都受到影響
----------------------------------
.text-hide {
font: 0/0 ...
外距控制============================.m-數字margin: 0.25rem 0.25rem; 數字
共有0~5共6個級距,由0開始,每個級距分別是0: 0rem 1: 0.25rem 2: 0.5rem 3: 1r...
.my-auto
margin-top: auto;
margin-bottom: auto;
.my-裝置尺寸代號-auto
margin-top: auto;
margin-bottom: auto;
設定margin為auto,因為撰寫位...
文字色彩(多了兩個)=======================.text-white (新) .text-muted .text-
primary .text-success .text-info .text-warning .text-d...
.rounded-top
border-top-right-radius: 0.25rem;
border-top-left-radius: 0.25rem;
.rounded-right
border-bottom-right-radius:...
Nächste SlideShare
Wird geladen in …5
×

twMVC#30 | Bootstrap 搶先玩

846 Aufrufe

Veröffentlicht am

Bootstrap 是一個老少皆宜、前後通用、遠近馳名、輕鬆上手的一套 Framework ,到了第 4 版採用了新的 CSS 屬性之後,讓 RWD 網頁更加容易就能製作完成,這次 Amos 會把 Bootstrap 的原始碼掀開讓各位了解他的原始概念跟應用,讓大家可以輕鬆了解到 Bootstrap 4 的強大功能。

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

twMVC#30 | Bootstrap 搶先玩

  1. 1. 最大的改變? - 開始有了初始值的概念(如:.col / .col-12) - 增加一個裝置尺寸區間 576px ~ 767px - 將原本的float改成使用flex - 因為採用了flex之後增加更多的對齊方式(如:.justify-content-start) - 針對小型區塊的排版增加了可直接套用的class(如:.col) - 細化了各裝置上的控制項目(如:.text-sm-left) - 將原本在購買現成樣版才有的class直接內建(如:.mt / .mb / .ml / .mr) - 顯示與隱藏區塊更加的符合使用情境(.hidden-md-up / .hidden-md-down) - 簡化了CSS class名稱,更加直覺了(?) - 大量使用 rem 單位,只要修改html文字尺寸,就能改變整體字級。 - 添加了更多的色彩可供運用。 - CSS僅增加30kb的大小 col-裝置尺寸代號-寬度 解決了什麼? - 解決了排版上的死板與不彈性(因為flex對版面的強大控制) - 解決了各式的對齊問題 - 解決了各式的區塊排序問題(還是有一些瑕疵) - 解決了需要手寫細節的問題(寬度、高度、尺寸) - 解決了各裝置之間受限於float屬性的排版問題 - 解決了各區間細節控制問題 學習上會遇到什麼問題? - flex的特性的不熟悉 - 各個class name之間屬性衝突與優先權的問題 - 不支援 IE10 以下 BS4 尺寸========================xs 576以下(預設)sm 576以上(手機躺平) md 768以上(平板) lg 992以上(平板躺平) xl 1200以上(桌機) 格線系統========================.container xs 576以下(width: auto) sm 576以上 (width: 540px) md 768以上(width: 720px) lg 992以上(width: 960px) xl 1200以上(width: 1140px) .row display: flex; flex-wrap: wrap; 預設子物件換行排列,跟bootstrap3版一樣,不同的是採用了flex的屬性。 .no-gutters margin-right: 0; margin-left: 0; > .col, > [class*="col-"] padding-right: 0;
  2. 2. padding-left: 0; 消除row自身margin以及其下一層欄(col)的padding為0,目的是為了製作滿版無欄距的版面 .col flex-grow: 1; flex-basis: 0; max-width: 100%; 寬度自動等分,若搭配「.col-數字」的話,可能會導致寬度不一,要注意。當版面不需要特定寬度時,使用此class是非常省事的做法 .col-auto flex: 0 0 auto; width: auto; 寬度自動,內容文字自動變成不換行,適合用於小組件區塊的資料,不適合頁面大板塊。且預設沒有左右各15px的內距,故需要搭配 .col-裝置尺寸代號-auto flex: 0 0 auto; .col-裝置尺寸代號 flex-grow: 1; flex-basis: 0; 在特定裝置下,寬度自動等分。 .col-數字 flex: 0 0 8.333333%; max-width: 8.333333%; 使用限制最大寬度來控制欄寬,基本上等同於bootstrap3版的格線。 欄偏移控制============================舊版名稱.col-sm-push-1 .push-數字 left: 8.333333%; .push-尺寸代號-數字 left: 8.333333%; .pull-數字 right: 8.333333%; .pull-尺寸代號-數字 right: 8.333333%; .offset-數字 margin-left: 8.333333%; .offset-尺寸代號-數字 margin-left: 0%; 格線排序控制============================.flex-first order: -1; 讓欄位變到第一 欄,但當多個欄都有設定時,則會依原始順序排列。 .flex-尺寸代號-first order: -1; .flex-last order: 1;
  3. 3. 讓欄位變成最後一欄,但當多個欄都有設定時,則會依原始順序排列。 .flex-尺寸代號-last order: 1; .flex-unordered { order: 0; 讓欄位恢復原始排列順序,由於撰寫位置放在 flex-first 與 flex-last 的後方,所以同時設定時,會依此設定為優先。 .flex-尺寸代號-unordered order: 0; 格線走向控制============================.flex-row flex-direction: row !important; 設定排列方向為橫向。 .flex-裝置尺寸代號-row flex-direction: row !important; .flex-column flex-direction: column !important; 設定排列方向為直向,由於撰寫位置是在 flex-row 的後方,所以當兩個同時設定時,會依此設定為優先。 .flex-裝置尺寸代號-column flex-direction: column !important; .flex-row-reverse flex-direction: row-reverse !important; 設定排列方向為列反向。 .flex-sm-row-reverse flex-direction: row-reverse !important; .flex-裝置尺寸代號-column-reverse flex-direction: column-reverse !important; 格線換行控制============================.flex-wrap flex-wrap: wrap !important; .flex-裝置尺寸代號-wrap flex-wrap: wrap !important; .flex-nowrap flex-wrap: nowrap !important; 設定格線不換行, .row 預設就是換行,添加此設定即可不換行。 .flex-裝置尺寸代號-nowrap flex-wrap: nowrap !important; 格線換行走向控制============================.flex-wrap-reverse flex-wrap: wrap-reverse !important; 反向換列。
  4. 4. .flex-裝置尺寸代號-wrap-reverse flex-wrap: wrap-reverse !important; 格線主軸對齊控制============================.justify-content-start justify- content: flex-start !important; .justify-content-end justify-content: flex-end !important; .justify-content-center justify-content: center !important; .justify-content-between justify-content: space-between !important; .justify-content-around justify-content: space-around !important; .justify-content-裝置尺寸代號-start justify-content: flex-start !important; .justify-content-裝置尺寸代號-end justify-content: flex-end !important; .justify-content-裝置尺寸代號-center justify-content: center !important; .justify-content-裝置尺寸代號-between justify-content: space-between !important; .justify-content-裝置尺寸代號-aroun justify-content: space-around !important; 格線次軸對齊控制============================.align-items-start align-items: flex-start !important; .align-items-裝置尺寸代號-start align-items: flex-start !important; .align-items-end align-items: flex-end !important; .align-items-裝置尺寸代號-end align-items: flex-end !important; .align-items-center align-items: center !important; .align-items-裝置尺寸代號-center align-items: center !important; .align-items-baseline align-items: baseline !important;
  5. 5. .align-items-裝置尺寸代號-baseline align-items: baseline !important; .align-items-stretch align-items: stretch !important; .align-items-裝置尺寸代號-stretch align-items: stretch !important; ---------------------------------------- .align-content-start align-content: flex-start !important; .align-content-裝置尺寸代號-start align-content: flex-start !important; .align-content-end align-content: flex-end !important; .align-content-裝置尺寸代號-end align-content: flex-end !important; .align-content-center align-content: center !important; .align-content-裝置尺寸代號-center align-content: center !important; .align-content-between align-content: space-between !important; .align-content-裝置尺寸代號-between align-content: space-between !important; .align-content-around align-content: space-around !important; .align-content-裝置尺寸代號-around align-content: space-around !important; .align-content-stretch align-content: stretch !important; .align-content-裝置尺寸代號-stretch align-content: stretch !important; 格線自身self對齊控制=========================.align-self-auto align-self: auto !important; .align-self-裝置尺寸代號-auto align-self: auto !important; .align-self-start align-self: flex-start !important; .align-self-裝置尺寸代號-start align-self: flex-start !important;
  6. 6. .align-self-end align-self: flex-end !important; .align-self-裝置尺寸代號-end align-self: flex-end !important; .align-self-center align-self: center !important; .align-self-裝置尺寸代號-center align-self: center !important; .align-self-baseline align-self: baseline !important; .align-self-裝置尺寸代號-baseline align-self: baseline !important; .align-self-stretch align-self: stretch !important; .align-self-裝置尺寸代號-stretch align-self: stretch !important; 定位fixed控制============================.fixed-top position: fixed; top: 0; right: 0; left: 0; .fixed-bottom position: fixed; right: 0; bottom: 0; left: 0; .sticky-top(新) position: -webkit-sticky; position: sticky; top: 0; 浮動控制============================舊版名稱.pull-left .float-left float: left !important; .float-right float: right !important; .float-none float: none !important; .float-裝置尺寸代號-左右 float: left !important; 表格============================.table .table td padding: 0.75rem;
  7. 7. .table-sm td padding: 0.3rem; 表格色彩============================舊版名稱.warning .table-warning, .table-warning > th, .table-warning > td background-color: #fcf8e3; 顯示屬性控制============================.d-inline display: inline !important; .d-裝置尺寸代號-inline display: inline !important; ------------------------------------ .d-inline-block display: inline-block !important; .d-裝置尺寸代號-inline-block display: inline-block !important; ------------------------------------ .d-block display: block !important; .d-裝置尺寸代號-block display: block !important; ------------------------------------ .d-table display: table !important; .d-裝置尺寸代號-table display: table !important; ------------------------------------ .d-table-cell display: table-cell !important; .d-裝置尺寸代號-table-cell display: table-cell !important; ------------------------------------ .d-flex display: flex !important; .d-裝置尺寸代號-flex display: flex !important; ------------------------------------ .d-inline-flex display: inline-flex !important; .d-裝置尺寸代號-inline-flex display: inline-flex !important; 隱藏控制============================.d-none display: none !important;
  8. 8. .d-裝置尺寸代號-none display: none !important; 此控制將會控制該裝置以上所有的尺寸都受到影響 ---------------------------------- .text-hide { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } .invisible { visibility: hidden !important; } ---------------------------------- .hidden-裝置尺寸代號-up display: none !important; 於該裝置代號以上尺寸做隱藏 .hidden-裝置尺寸代號-down { display: none !important; 於該裝置代號以下尺寸做隱藏 列印控制============================.visible-print-block display: block !important; 僅在列印時顯示 .visible-print-inline display: inline !important; 僅在列印時顯示 .visible-print-inline-block display: inline-block !important; 僅在列印時顯示 .hidden-print display: none !important; 容器尺寸控制(新) ============================.w-25 width: 25% 共四種尺寸 25/50/75/100 .h-25 height: 25% 共四種尺寸25/50/75/100 .mw-25 max-width: 25% 共四種尺寸25/50/75/100 .mh-25 max-height: 25% 共四種尺寸25/50/75/100
  9. 9. 外距控制============================.m-數字margin: 0.25rem 0.25rem; 數字 共有0~5共6個級距,由0開始,每個級距分別是0: 0rem 1: 0.25rem 2: 0.5rem 3: 1rem 4: 1.5rem 5: 3rem .mt-數字 margin-top: 0 共四個方向,mt/mr/mb/ml 數字共有0~5共6個級距,由0開始,每個級距分別是 0: 0rem 1: 0.25rem 2: 0.5rem 3: 1rem 4: 1.5rem 5: 3rem .mx-數字 margin-left: 0; margin-right: 0; 設定X軸的margin尺寸 .mx-裝置尺寸代號-數字 margin-left: 0; margin-right: 0; 設定X軸的margin尺寸 .my-數字 margin-top: 0; margin-bottom: 0; 設定Y軸的margin尺寸 .my-裝置尺寸代號-數字 margin-top: 0; margin-bottom: 0; 設定Y軸的margin尺寸 .mt-數字 margin-top: 0.25rem; 共有四個方向,top/right/bottom/left。 .mt-裝置尺寸代號-數字 margin-top: 0.25rem; 共有四個方向,top/right/bottom/left。 .m-auto margin: auto; 設定margin為auto,因為撰寫位置在其他margin設定的下方,所以優先權會比固定數值設定要來得高。 .m-裝置尺寸代號-auto margin: auto; 設定margin為auto,因為撰寫位置在其他margin設定的下方,所以優先權會比固定數值設定要來得高。 .mx-auto margin-left: auto; margin-right: auto; .mx-裝置尺寸代號-auto margin-left: auto; margin-right: auto; 設定margin為auto,因為撰寫位置在其他margin設定的下方,所以優先權會比固定數值設定要來得高。
  10. 10. .my-auto margin-top: auto; margin-bottom: auto; .my-裝置尺寸代號-auto margin-top: auto; margin-bottom: auto; 設定margin為auto,因為撰寫位置在其他margin設定的下方,所以優先權會比固定數值設定要來得高。 內距控制============================.p-數字padding: 0 0 !important; 數字共 有0~5共6個級距,由0開始,每個級距分別是0: 0rem 1: 0.25rem 2: 0.5rem 3: 1rem 4: 1.5rem 5: 3rem .p-裝置尺寸代號-數字 padding: 0.25rem; 共有四個方向,top/right/bottom/left。 .pt-數字 padding-top: 0 !important; 共有四個方向,top/right/bottom/left。 .pt-裝置尺寸代號-數字 padding-top: 0.25rem; 共有四個方向,top/right/bottom/left。 .px-數字 padding: 0 0 !important; 設定X軸的padding尺寸 .px-裝置尺寸代號-數字 padding: 0 0 !important; 設定X軸的padding尺寸 .py-數字 padding: 0 0 !important; 設定Y軸的padding尺寸 .py-裝置尺寸代號-數字 padding: 0 0 !important; 設定Y軸的padding尺寸 文字對齊============================.text-left text-align: left; .text-right text-align: right; .text-center text-align: center; .text-裝置尺寸代號-left text-align: left; .text-裝置尺寸代號-right text-align: right; .text-裝置尺寸代號-center text-align: center;
  11. 11. 文字色彩(多了兩個)=======================.text-white (新) .text-muted .text- primary .text-success .text-info .text-warning .text-danger .text-gray-dark (新) 文字控制============================.text-hide font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; .text-nowrap white-space: nowrap !important; .text-truncate (新) overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 文字變體(多了粗細/斜體控制) ===================.text-lowercase text-transform: lowercase !important; .text-uppercase text-transform: uppercase !important; .text-capitalize text-transform: capitalize !important; .font-weight-normal font-weight: normal; .font-weight-bold font-weight: bold; .font-italic font-style: italic; 移除邊框(新)===========================.border-0 border: 0 !important; .border-top-0 border-top: 0 !important; .border-right-0 border-right: 0 !important; .border-bottom-0 border-bottom: 0 !important; .border-left-0 border-left: 0 !important; 圓角控制(新) ===========================.rounded border-radius: 0.25rem;
  12. 12. .rounded-top border-top-right-radius: 0.25rem; border-top-left-radius: 0.25rem; .rounded-right border-bottom-right-radius: 0.25rem; border-top-right-radius: 0.25rem; .rounded-bottom border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; .rounded-left border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem; ---------------------------------------- .rounded-circle border-radius: 50%; .rounded-0 border-radius: 0; 按鈕============================.btn .btn.active .btn.disabled .btn-primary .btn-info .btn-success .btn-warning .btn-danger ------------------------------------- .btn-secondary(新) .btn-outline-primary (新) .btn-outline-secondary (新) .btn-outline-info (新) .btn-outline-success (新) .btn-outline-warning (新) .btn-outline-danger (新)

×