W3.CSS Reference @TS-modify 2021.06

W3.CSS Classes

Container Classes [TOP]

Class Defines
w3-container padding: 0.01em 16px; 內容float時會clear:both; Try it
  Used as header Try it
  Used as footer Try it
w3-panel margin 上下16px; padding: 0.01em 16px; 內容float時會clear:both; Try it
  Used to display a note Try it
  Used to display a quote Try it
w3-badge Circular badge Try it
w3-tag Rectangular tag Try it
w3-ul margin:0; padding:0; list-style-type:none; Try it
w3-display-container position: relative; Try it
w3-block display: block; width: 100%; Try it
w3-code width: auto; background-color: #fff; padding: 8px 12px;
border-left: 4px solid #4CAF50; word-wrap: break-word;
font-family: Consolas,"courier new"; font-size: 16px; 		Try it
w3-codespan color: crimson; background-color: #f1f1f1;
padding-left: 4px; padding-right: 4px; font-size: 110%; 		Try it
w3-content margin 左右 auto; max-width: 980px; Try it
w3-auto margin 左右 auto; max-width: 1140px;
視窗1205以下 max-width: 95%; 視窗992以下 max-width: 100%; 		Try it
w3-stretch margin 左右 -16px; Try it

Table Classes [TOP]

Class Defines
w3-table border-collapse: collapse; border-spacing: 0; width: 100%; display: table;
<th><td> padding: 8px 8px; display: table-cell; text-align: left; vertical-align: top; 		Try it
w3-striped .w3-striped tbody tr:nth-child(even) { background-color: #f1f1f1; } 偶數列淡灰底 Try it
w3-border border: 1px solid #ccc!important; 表格外圍淡灰框 Try it
w3-bordered .w3-striped tbody tr:nth-child(even) { background-color: #f1f1f1; } 偶數列淡灰底
.w3-bordered tr, .w3-table-all tr { border-bottom: 1px solid #ddd; } 下方框線 		Try it
w3-centered .w3-centered tr th, .w3-centered tr td { text-align: center; } Try it
w3-hoverable .w3-hoverable tbody tr:hover, .w3-ul.w3-hoverable li:hover { background-color: #ccc; } Try it
w3-table-all 所有表格的設定, 外圍有框, 每列下方有框線, 每列淡灰底, 奇數列白底 Try it
  With w3-striped, w3-border, and w3-bordered Try it
  With colored head Try it
  With w3-responsive 表格的外圍有 div.w3-responsive, 超出寬度則顯示捲軸 Try it
  With w3-tiny , font-size:10px !important Try it
  With w3-small , font-size:12px !important Try it
  With w3-medium , font-size:15px !important Try it
  With w3-large , font-size:18px !important Try it
  With w3-xlarge , font-size:24px !important Try it
  With w3-xxlarge , font-size:36px !important Try it
  With w3-xxxlarge , font-size:48px !important Try it
  With w3-jumbo , font-size:64px !important Try it
  With color Try it
w3-responsive 表格的外圍有 div.w3-responsive, 超出寬度則顯示捲軸 Try it

Card Classes [TOP]

Class Defines
w3-card Same as w3-card-2 , box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%); Try it
w3-card-2 Container for any HTML content (2px bordered shadow) Try it
w3-card-4 Container for any HTML content (4px bordered shadow) Try it

Responsive Classes [TOP]

Class Defines
w3-row 內容為 w3-col 設定float , .w3-row:after { content: ""; display: table; clear: both; } Try it
w3-row-padding 外框及內部的每一個 col 皆有 padding: 0 8px; Try it
w3-auto margin 左右 auto; max-width: 1140px;
視窗1205以下 max-width: 95%; 視窗992以下 max-width: 100%; 		Try it
w3-stretch margin 左右 -16px; Try it
w3-half Half (1/2) screen column container Try it
w3-third Third (1/3) screen column container Try it
w3-twothird Two third (2/3) screen column container Try it
w3-quarter Quarter (1/4) screen column container Try it
w3-threequarter Three quarters (3/4) screen column container Try it
w3-col float: left; width: 100%; Try it
w3-rest overflow:hidden Try it
     
l1 - l12 Responsive sizes for large screens 含993px以上 Try it
m1 - m12 Responsive sizes for medium screens 含601px以上 Try it
s1 - s12 Responsive sizes for small screens 含600px以下 Try it
   
w3-hide-small Hide content on small screens (less than 601px) 含600px以下隱藏 Try it
w3-hide-medium Hide content on medium screens >=601px , <=992px隱藏 Try it
w3-hide-large Hide content on large screens (larger than 992px) 含993px以上隱藏 Try it
   
w3-image Responsive image max-width:100%;height:auto Try it
   
w3-mobile Adds mobile-first responsiveness to any element.
Displays elements as block elements on mobile devices.
含600px以下, display: block; width: 100%!important; 		Try it

Layout Classes [TOP]

Class Defines
w3-cell-row Container for layout columns (cells). display: table; width: 100%; Try it
w3-cell Layout column (cell). display: table-cell; Try it
w3-cell-top Aligns content at the top of a column (cell). vertical-align: top; Try it
w3-cell-middle Aligns content at the vertical middle of a column (cell). vertical-align: middle; Try it
w3-cell-bottom Aligns content at the bottom of a column (cell). vertical-align: bottom; Try it

Bar Classes - Navigation [TOP]

Class Defines
w3-bar Horizontal bar width: 100%; overflow: hidden; .w3-bar-item 外圍要有 .w3-bar Try it
w3-bar-block Vertical bar 本身沒有設定, 但 .w3-bar-item 外圍要有 .w3-bar 或 .w3-bar-block Try it
w3-bar-item .w3-bar .w3-bar-item { padding: 8px 16px;   float: left; width: auto; display: block; border: none; outline: 0; } Try it
w3-sidebar height: 100%;   width: 200px; background-color: #fff; position: fixed!important; z-index: 1; overflow: auto; Try it
  行內樣式定義 width Try it
  行內樣式先定義隱藏, 加JS程式控制顯示 Try it
  行內樣式先定義隱藏+寬度100%, 加JS程式控制顯示 Try it
  由JS程式控制 sidebar 自左滑入   推動內容 Try it
  sidebar 自左滑入 , 加遮色片可以關閉 sidebar Try it
  sidebar 在右側 Try it
w3-collapse 含992px以下 , sidebar 自動隱藏 , 993px以上 , sidebar 則自動顯示 Try it
w3-main 含 w3-collapse 功能 , sidebar 在左側 , .w3-main { transition: margin-left .4s; } Try it
  含 w3-collapse 功能 , sidebar 在右側 Try it

Dropdown Classes [TOP]

w3-dropdown-click 一個按鈕 Click 後顯示下拉式選單 Try it
w3-dropdown-hover 一個按鈕 Hover 後顯示下拉式選單 Try it
  在水平選單 w3-bar 中 , 其中一個按鈕加入下拉式選單 Try it
  在垂直選單 w3-bar-block 中 , 其中一個按鈕加入下拉式選單 Try it
  在 w3-sidebar 區域中 , 其中一個按鈕加入下拉式選單 Try it

Button Classes [TOP]

Class Defines
w3-button .w3-btn, .w3-button {   color: inherit; background-color: inherit; cursor: pointer;
border: none; display: inline-block; overflow: hidden; text-decoration: none;
padding: 8px 16px;   vertical-align: middle; text-align: center; white-space: nowrap; }		 Try it
w3-btn .w3-btn 與 .w3-button 的差別
.w3-btn:hover { 改變背景底色與文字顏色 }
.w3-button:hover { 增加陰影效果 } 		Try it
w3-circle border-radius: 50%; Try it
w3-ripple transition: opacity 0s;   方型按鈕範例 Try it
  transition: opacity 0s;   圓型按鈕範例 Try it
w3-bar .w3-bar { width: 100%; overflow: hidden; }
.w3-bar-item 的外圍必須有 .w3-bar 		Try it
w3-block .w3-block { display: block; width: 100%; } 運用在.w3-button Try it
  .w3-block { display: block; width: 100%; } 運用在.w3-btn Try it
  Full width circular button 運用在 圓型按鈕 Try it

Input Classes [TOP]

Class Defines
w3-input 文字欄位 input 與 textarea ,
.w3-input { display: block; width: 100%; padding: 8px; border: none; border-bottom: 1px solid #ccc; }		 Try it
  Input form as a card 外圍加陰影 Try it
  Input elements (top labels) Try it
  Input elements (bottom labels) Try it
w3-check 複選勾選欄位 Checkbox input type ,
.w3-check , .w3-radio { width: 24px; height: 24px; position: relative; top: 6px; }
[type=checkbox], [type=radio] { padding: 0; } 		Try it
w3-radio 單選欄位 Radio input type (同上) Try it
w3-select .w3-select { padding: 9px 0; width: 100%; border: none; border-bottom: 1px solid #ccc; } Try it
w3-animate-input Animates the width of an input to 100% 行內樣式先定義短的寬度
.w3-animate-input { transition: width 0.4s ease-in-out; } 		Try it

Modal Classes [TOP]

Class Defines
w3-modal .w3-modal { z-index: 3; display: none; padding-top: 100px; position: fixed; left: 0; top: 0;
width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }		 Try it
w3-modal-content .w3-modal-content { margin: auto; background-color: #fff; position: relative; padding: 0; outline: 0; width: 600px; }
@media (min-width: 993px){ .w3-modal-content { width: 900px; } }
@media (max-width: 768px){ .w3-modal-content { width: 500px; } } 		Try it
w3-tooltip .w3-tooltip { position: relative; } Try it
w3-text .w3-tooltip .w3-text { display: none; }
.w3-tooltip:hover .w3-text { display: inline-block; } 		Try it

Animation Classes [TOP]

Class Defines
w3-animate-top Animates an element from the top -300px to 0px Try it
w3-animate-left Animates an element from left -300px to 0px Try it
w3-animate-bottom Animates an element from the bottom -300px to 0px Try it
w3-animate-right Animates an element from right -300px to 0px Try it
w3-animate-opacity Animates an element's opacity from 0 to 1 Try it
w3-animate-zoom Animates an element from 0 to 100% in size Try it
w3-animate-fading Animates an element's opacity from 0 to 1 and 1 to 0 (fades in AND out) Try it
w3-spin Spin an icon 360 degrees 旋轉 Try it
  Spin any element 360 degrees 旋轉 Try it
w3-animate-input Animates the width of an input field to 100% 行內樣式先定義短的寬度
.w3-animate-input { transition: width 0.4s ease-in-out; }		 Try it

Font and Text Classes [TOP]

Class Defines
w3-tiny Specifies a font size of 10 pixels Try it
w3-small Specifies a font size of 12 pixels Try it
w3-large Specifies a font size of 18 pixels Try it
w3-xlarge Specifies a font size of 24 pixels Try it
w3-xxlarge Specifies a font size of 32 pixels Try it
w3-xxxlarge Specifies a font size of 48 pixels Try it
w3-jumbo Specifies a font size of 64 pixels Try it
w3-wide .w3-wide { letter-spacing: 4px; } Try it
w3-serif .w3-serif { font-family: serif; } Try it
w3-sans-serif .w3-sans-serif { font-family: sans-serif; } Try it
w3-cursive .w3-cursive { font-family: cursive; } Try it
w3-monospace .w3-monospace { font-family: monospace; } Try it

Display Classes [TOP]

Class Defines
w3-center .w3-center { text-align: center !important; } Try it
w3-left .w3-left { float: left !important; } Try it
w3-right .w3-right { float: right !important; } Try it
w3-left-align .w3-left-align { text-align: left !important; } Try it
w3-right-align .w3-right-align { text-align: right !important; } Try it
w3-justify .w3-justify { text-align: justify !important; } Try it
w3-block .w3-block { display: block; width: 100%; } Try it
w3-circle .w3-circle { border-radius: 50%; } Try it
w3-hide .w3-hide { display: none !important; } Try it
w3-show .w3-show { display: block !important; } Try it
w3-show-block .w3-show-block { display: block !important; } Try it
w3-show-inline-block .w3-show-inline-block { display: inline-block !important; } Try it
w3-top .w3-top, .w3-bottom { position: fixed; width: 100%; z-index: 1; }
.w3-top { top: 0; } 		Try it
w3-bottom .w3-bottom { bottom: 0; } Try it
w3-display-container 以下 10 個項目的外圍必須要有 .w3-display-container
.w3-display-container { position: relative; }		 Try it
w3-display-topleft w3-display-topleft { position: absolute; left: 0; top: 0; } Try it
w3-display-topright .w3-display-topright { position: absolute; right: 0; top: 0; } Try it
w3-display-bottomleft .w3-display-bottomleft { position: absolute; left: 0; bottom: 0; } Try it
w3-display-bottomright .w3-display-bottomright { position: absolute; right: 0; bottom: 0; } Try it
w3-display-left .w3-display-left { position: absolute; top: 50%; left: 0%; transform: translate(0%,-50%); } Try it
w3-display-right .w3-display-right { position: absolute; top: 50%; right: 0%; transform: translate(0%,-50%); } Try it
w3-display-middle .w3-display-middle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } Try it
w3-display-topmiddle .w3-display-topmiddle { position: absolute; left: 50%; top: 0; transform: translate(-50%,0%); } Try it
w3-display-bottommiddle .w3-display-bottommiddle { position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0%); } Try it
w3-display-position .w3-display-position { position: absolute; } Try it
w3-display-hover .w3-display-hover { display: none; }
.w3-display-container:hover .w3-display-hover { display: block; } 		Try it

Effect Classes [TOP]

Class Defines
w3-opacity .w3-opacity, .w3-hover-opacity:hover { opacity: 0.60; } Try it
  Add opacity/transparency to text Try it
w3-opacity-off .w3-opacity-off, .w3-hover-opacity-off:hover { opacity: 1; } Try it
w3-opacity-min .w3-opacity-min { opacity: 0.75; } Try it
w3-opacity-max .w3-opacity-max { opacity: 0.25; } Try it
w3-grayscale-min .w3-greyscale-min, .w3-grayscale-min { filter: grayscale(50%); } Try it
w3-grayscale .w3-greyscale, .w3-grayscale { filter: grayscale(75%); } Try it
w3-grayscale-max .w3-greyscale-max, .w3-grayscale-max, .w3-hover-greyscale:hover, .w3-hover-grayscale:hover { filter: grayscale(100%); } Try it
w3-sepia-min .w3-sepia-min { filter: sepia(50%); } Try it
w3-sepia .w3-sepia { filter: sepia(75%); } Try it
w3-sepia-max .w3-sepia-max, .w3-hover-sepia:hover { filter: sepia(100%); } Try it
w3-overlay .w3-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 2; }		 Try it

Background Color Classes [TOP]

Class Defines
w3-red Background color red Try it
w3-pink Background color pink Try it
w3-purple Background color purple Try it
w3-deep-purple Background color deep purple Try it
w3-indigo Background color indigo Try it
w3-blue Background color blue Try it
w3-light-blue Background color light blue Try it
w3-cyan Background color cyan Try it
w3-aqua Background color aqua Try it
w3-teal Background color teal Try it
w3-green Background color green Try it
w3-light-green Background color light green Try it
w3-lime Background color lime Try it
w3-sand Background color sand Try it
w3-khaki Background color khaki Try it
w3-yellow Background color yellow Try it
w3-amber Background color amber Try it
w3-orange Background color orange Try it
w3-deep-orange Background color deep orange Try it
w3-blue-grey Background color blue grey Try it
w3-brown Background color brown Try it
w3-light-grey Background color light grey Try it
w3-grey Background color grey Try it
w3-dark-grey Background color dark grey Try it
w3-black Background color black Try it
w3-white Background color white Try it
w3-pale-red Background color pale red Try it
w3-pale-yellow Background color pale yellow Try it
w3-pale-green Background color pale green Try it
w3-pale-blue Background color pale blue Try it
w3-transparent Transparent background-color  

Hover Color Classes [TOP]

The colors above can also be used as hover classes:

Class Defines
w3-hover-white Hover color white (以上的背景顏色原則上皆可加在 hover) Try it
w3-hover-black Hover color black Try it
w3-hover-red Hover color red Try it
w3-hover-blue Hover color blue Try it
w3-hover-green Hover color green Try it

Text Color Classes [TOP]

Class Defines
w3-text-red Text color red (以上的背景顏色原則上皆可加在 text) Try it
w3-text-green Text color green Try it
w3-text-blue Text color blue Try it
w3-text-yellow Text color yellow Try it

Hover Text Classes [TOP]

The text classes above can also be used as hover classes:

Class Defines
w3-hover-text-red Hover text color red (以上的背景顏色原則上皆可加在 hover-text) Try it
w3-hover-text-green Hover text color green Try it
w3-hover-text-blue Hover text color blue Try it
w3-hover-text-yellow Hover text color yellow Try it

Other Hover Classes [TOP]

Class Defines
w3-hover-border-color 滑鼠滑入變換邊框顏色 (以上的背景顏色原則上皆可加在 hover-border) Try it
w3-hover-opacity .w3-opacity, .w3-hover-opacity:hover { opacity: 0.60; } Try it
w3-hover-opacity-off .w3-opacity-off, .w3-hover-opacity-off:hover { opacity: 1; } Try it
w3-hover-shadow .w3-card-4, .w3-hover-shadow:hover { box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 19%); } Try it
w3-hover-grayscale .w3-greyscale-max, .w3-grayscale-max, .w3-hover-greyscale:hover, .w3-hover-grayscale:hover { filter: grayscale(100%); } Try it
w3-hover-sepia .w3-sepia-max, .w3-hover-sepia:hover { filter: sepia(100%); } Try it
w3-hover-none .w3-hover-none:hover { box-shadow: none !important; } Try it

Round Classes [TOP]

Class Defines
w3-round Element rounded (border-radius) 4px Try it
w3-round-small Element rounded (border-radius) 2px Try it
w3-round-medium Element rounded (border-radius) 4px Try it
w3-round-large Element rounded (border-radius) 8px Try it
w3-round-xlarge Element rounded (border-radius) 16px Try it
w3-round-xxlarge Element rounded (border-radius) 32px Try it

Padding Classes [TOP]

Class Defines
w3-padding-small Padding 上下 4px , 左右 8px Try it
w3-padding Padding 上下 8px , 左右 16px Try it
w3-padding-large Padding 上下 12px , 左右 24px Try it
w3-padding-16 Padding 上下 16px Try it
w3-padding-24 Padding 上下 24px Try it
w3-padding-32 Padding 上下 32px Try it
w3-padding-48 Padding 上下 48px Try it
w3-padding-64 Padding 上下 64px Try it
w3-padding-top-64 padding-top: 64px Try it
w3-padding-top-48 padding-top: 48px Try it
w3-padding-top-32 padding-top: 32px Try it
w3-padding-top-24 padding-top: 24px Try it

Margin Classes [TOP]

Class Defines
w3-margin margin: 16px !important; Try it
w3-margin-top margin-top: 16px !important; Try it
w3-margin-right margin-right: 16px !important; Try it
w3-margin-bottom margin-bottom: 16px !important; Try it
w3-margin-left margin-left: 16px !important; Try it
w3-section .w3-section, .w3-code { margin-top: 16px !important; margin-bottom: 16px !important; } Try it

Border Classes [TOP]

Class Defines
w3-border .w3-border { border: 1px solid #ccc!important; } Try it
w3-border-top border-top: 1px solid #ccc!important; Try it
w3-border-right border-right: 1px solid #ccc!important; Try it
w3-border-bottom border-bottom: 1px solid #ccc!important; Try it
w3-border-left border-left: 1px solid #ccc!important; Try it
w3-border-0 border: 0!important; Try it
w3-border-color w3-border-red , w3-border-green , w3-border-blue ...... Try it
w3-bottombar border-bottom: 6px solid #ccc!important; Try it
w3-leftbar border-left: 6px solid #ccc!important; Try it
w3-rightbar border-right: 6px solid #ccc!important; Try it
w3-topbar border-top: 6px solid #ccc!important; Try it
w3-hover-border-color w3-hover-border-red , w3-hover-border-green , w3-hover-border-blue Try it

TS Modify Grid Classes [TOP]

<576 >=576 >=768 >=992 >=1200
ts-xs1
~
ts-xs12 		ts-s1
~
ts-s12 		ts-m1
~
ts-m12 		ts-l1
~
ts-l12 		ts-xl1
~
ts-xl12

TS Modify Other Classes [TOP]

Class Defines
h1 ~ h6 font-family:"Segoe UI",Arial,sans-serif;font-weight:700;margin:0
h1 font-size: 2rem
h2 font-size: 1.5rem
h3 font-size: 1.2rem
h4 font-size: 1rem
h5 font-size: .8rem
h6 font-size: .6rem
a text-decoration: none
.ts-fw-700 font-weight: 700
.ts-fw-400 font-weight: 400
.ts-container width: 100%; max-width: 1200px; margin:0 auto; padding:0 15px
.ts-flex display: flex
.ts-flexwrap flex-wrap: wrap
.ts-justify-center justify-content: center
.ts-justify-between justify-content: space-between
.ts-item-center align-items: center
.ts-w100p width: 100%
.ts-w100 width: 100px