跳轉到

可用 CSS Class

基礎樣式

常用

class 名稱 樣式內容
height-100 height: 100%;
width-100 width: 100%;
span[uofx-required]:after color: #f3162a;
font-size: 1.4rem;
font-weight:600;
display: inline-block;
content: "*";
font-family: SimSun;
line-height: 1.5;
vertical-align: middle;

顯示模式 (display)

class 名稱 樣式內容
d-none display: none;
d-block display: block;
d-inline-block display: inline-block;
d-flex display: flex;
d-inline-flex display: inline-flex;
justify-content-start justify-content: flex-start;
justify-content-end justify-content: flex-end;
justify-content-center justify-content: flex-center;
justify-content-between justify-content: flex-between;
justify-content-around justify-content: flex-around;
align-items-start align-items: flex-start;
align-items-end align-items: flex-end;
align-items-center align-items: flex-center;
align-items-baseline align-items: flex-baseline;
align-items-stretch align-items: flex-stretch;
align-content-start align-content: flex-start;
align-content-end align-content: flex-end;
align-content-center align-content: flex-center;
align-content-between align-content: flex-between;
align-content-around align-content: flex-around;
align-content-stretch align-content: flex-stretch;
align-self-auto align-self: auto;
align-self-start align-self: start;
align-self-end align-self: end;
align-self-center align-self: center;
align-self-baseline align-self: baseline;
align-self-stretch align-self: stretch;
flex-center display: flex;
align-items: center;
flex-center-between display: flex;
align-items: center;
align-content: space-between;
flex-nowrap flex: stretch;
flex-1 flex: 1;
flex-2 flex: 2;
flex-row flex-direction: row;
flex-row-reverse flex-direction: row-reverse;
flex-column flex-direction: column;
flex-column-reverse flex-direction: column-reverse;
float-right float: right;
float-left float: left;
float-inline-start float: inline-start ;
float-inline-end float: inline-end ;

文字 (fonts & text)

文字分為依比例和固定式的,命名方式為text-12text-12-fixed,每一個文字大小都會有一組對應的。

class 名稱 文字大小 固定式 (fixed)
text-12 1.2rem; 12px
text-13 1.3rem; 13px
text-14 1.4rem; 14px
text-15 1.5rem; 15px
text-16 1.6rem; 16px
text-17 1.7rem; 17px
text-18 1.8rem; 18px
text-20 2.0rem; 20px
text-25 2.5rem; 25px
text-30 3.0rem; 30px
text-35 3.5rem; 35px
text-40 4.0rem; 40px
text-45 4.5rem; 45px
text-50 4.0rem; 50px
class 名稱 樣式內容
textarea-content white-space: pre-line;
text-wrap white-space: normal;
text-nowrap white-space: nowrap;
text-underline text-decoration: underline;
text-left text-align: left;
text-right text-align: right;
text-center text-align: center;
font-weight-600 font-weight: 600;
text-transform-none text-transform: none;
text-break word-break: break-all;

物件外間距 (margin)

僅列出marginmargin-top,剩下的margin-bottommargin-rightmargin-left以此類推。

class 名稱 樣式內容
margin-s margin: 4px;
margin margin: 8px;
margin-2x margin: 16px;
margin-3x margin: 24px;
margin-4x margin: 32px;
margin-5x margin: 40px;
margin-6x margin: 48px;
margin-7x margin: 56px;
margin-8x margin: 64px;
margin-top-s margin-top: 4px;
margin-top margin-top: 8px;
margin-top-2x margin-top: 16px;
margin-top-3x margin-top: 24px;
margin-top-4x margin-top: 32px;
margin-top-5x margin-top: 40px;
margin-top-6x margin-top: 48px;
margin-top-7x margin-top: 56px;
margin-top-8x margin-top: 64px;

margin-horizontalmargin-vertical也是同上列的模式。

class 名稱 樣式內容
margin-horizontal margin-left: 8px;
margin-right: 8px;
margin-vertical margin-top: 8px;
margin-bottom: 8px;

其他間距設定

class 名稱 樣式內容
no-margin margin: 0 !important;
no-margin-horizontal margin-left: 0;
margin-right: 0;
no-margin-vertical margin-top: 0;
margin-bottom: 0;
margin-auto margin: auto;
margin-horizontal-auto margin-left: auto;
margin-right: auto;
margin-vertical-auto margin-top: auto;
margin-bottom: auto;

物件內間距 (padding)

padding的設定大致上margin相同,只是少了auto的部分,不過下列也會將padding可用的設定列出。一樣僅列出paddingpadding-top,剩下的padding-bottompadding-rightpadding-left以此類推。

class 名稱 樣式內容
padding-s padding: 4px;
padding padding: 8px;
padding-2x padding: 16px;
padding-3x padding: 24px;
padding-4x padding: 32px;
padding-5x padding: 40px;
padding-6x padding: 48px;
padding-7x padding: 56px;
padding-8x padding: 64px;
padding-top-s padding-top: 4px;
padding-top padding-top: 8px;
padding-top-2x padding-top: 16px;
padding-top-3x padding-top: 24px;
padding-top-4x padding-top: 32px;
padding-top-5x padding-top: 40px;
padding-top-6x padding-top: 48px;
padding-top-7x padding-top: 56px;
padding-top-8x padding-top: 64px;

padding-horizontalpadding-vertical也是同上列的模式。

class 名稱 樣式內容
padding-horizontal padding-left: 8px;
padding-right: 8px;
padding-vertical padding-top: 8px;
padding-bottom: 8px;

其他間距設定

class 名稱 樣式內容
no-padding padding: 0 !important;
no-padding-horizontal padding-left: 0;
padding-right: 0;
no-padding-vertical padding-top: 0;
padding-bottom: 0;

欄位樣式

class 名稱 樣式內容
fw-control padding: 12px;
word-break: break-all;
white-space: pre-line;
font-size: 1.6rem;
fw-descr margin-top: 4px;
word-break: break-all;
font-size: 1.3rem;color: #2578fa;

row col 樣式

bootstrap grid system 用於排版和對齊列與欄,主要用 flexbox 建立,並支援自適應樣式(RWD)。

每一列總共有 12 欄,可任意的組合。 col-x 代表著要使用的欄數 (例如:col-3 三欄、col-6 六欄)

<div class="container">
  <div class="row">
    <div class="col-3"> column1 </div>
    <div class="col-3"> column2 </div>
    <div class="col-3"> column3 </div>
    <div class="col-3"> column4 </div>
  </div>

  <div class="row">
    <div class="col-2"> column1 </div>
    <div class="col-4"> column2 </div>
    <div class="col-6"> column3 </div>
  </div>

  <div class="row">
    <div class="col-12"> column1 </div>
  </div>
</div>