Bootstrap 4 爬 Code [Part2]

by on # css

看 Amos 大大的影片作筆記,下面的擷取內容是以 Bootstrap-4.1.3 為準。

筆記

  • 第 1826 行,在 iPhone 上拿掉 transition。 transition

  • 第 1959 行,BS4 新增的 .form-row,縮小欄位間距,也就是把原本 .row 的地方直接換成 .form-row,相對好看許多。 .form-row

  • 第 2216 行,.form-inline 將內容物橫向排列。 .form-inline

  • 第 2607 行,BS4 新增的 .btn-outline-* 背景透明、只有外框的按鈕。 .btn-outline-*

  • 第 2917 行,.btn-block 超大顆寬滿版按鈕。 .btn-block

  • 第 2932 行,.fade 控制淡入淡出效果,一樣手機部分都會取消 transition。 .fade 要搭配 .show 一起使用才有效果,BS3 是搭配 .in 使用。 .fade

  • 第 2946 行,.collapse 收合、 .collapsing 收合過程。 .collapse

  • 第 2963 行,.dropup / .dropdown / .dropleft / .dropright 是 BS 自己做的下拉選單,並非 select。.dropdown-toggle 是下拉選單的小三角形。 .dropdown

  • 第 3111 行,.dropdown-divider 分隔線,直接套用在 li 上。 .dropdown-divider

  • 第 3152 行,.dropdown-header 拿來做選單的分類標題,通常會設定為不可選,並在下方加上 divider(分隔線)。 .dropdown-header

  • 第 3319 行,.custom-select 和 .custom-file。 .custom-select 和 .custom-file

  • 第 3447 行,.input-group-prepend 和 .input-group-append,名稱由 jQuery 而來,其實就是在表單 前面/後面 加東西的意思。 .input-group-prepend 和 .input-group-append

  • :checked 用在手機選單很好用 :checked

  • Modal 的圓角設定可在 .modal-content 中找到。 Modal 的圓角設定

  • .modal-backdrop 是在 Modal 跳出後動態加入的透明黑背景。 .modal-backdrop

  • .tooltip 可能常會依客戶要求修改顏色,三角形的部分利用邊框線繪製,可在 .tooltip .arrow 這段修改。 .tooltip

  • .popover 跟 .tooltip 差不多,多了 title 可以寫。 .popover

  • .popover-header:empty ,empty 代表一個字、一個空格、連換行都不能有的情況。這招在 badge 也有使用到。 :empty

  • .carousel BS4 的幻燈片被很多人嫌棄,點點點 .carousel-indicators li 變成了一條線,但其實點選範圍不是只有一條線。 .carousel

  • .carousel-caption 是幻燈片文字部分。 .carousel-caption

  • .embed-responsive iframe 等嵌入物件做 RWD 使用;而 .embed-responsive-*by* 是看嵌入物件的長寬比例。 .embed-responsive

  • .text-truncate 文章或標題太長的省略符號【…】 .text-truncate

  • .text-lowercase, .text-uppercase, .text-capitalize 控制大小寫。

.text-lowercase {
  text-transform: lowercase !important;
  <!--定義所有字母均為小寫-->
}

.text-uppercase {
  text-transform: uppercase !important;
  <!--定義所有字母均為大寫-->
}

.text-capitalize {
  text-transform: capitalize !important;
  <!--定義單字的第一個字母大寫,其他字母小寫-->
}

參考

css, Bootstrap 4
comments powered by Disqus