W3.CSS from w3schools (有關fa font Visit icon reference)

1. w3css介紹與下載

2. Coler介紹Coler Reference

w3-red w3-text-red w3-border-red w3-hover-red

3. containerpanel 容器

.w3-container { padding: 0.01em 16px; }
.w3-panel { padding: 0.01em 16px; margin: 16px 0; }

4. paddingmargin

.w3-padding-small { padding: 4px 8px!important; }
.w3-padding { padding: 8px 16px!important; }
.w3-padding-large { padding: 12px 24px!important; }
.w3-padding-16 { padding-top: 16px!important; padding-bottom: 16px!important; }
.w3-padding-24 { padding-top: 24px!important; padding-bottom: 24px!important; }
.w3-padding-32 { padding-top: 32px!important; padding-bottom: 32px!important; }
.w3-padding-48 { padding-top: 48px!important; padding-bottom: 48px!important; }
.w3-padding-64 { padding-top: 64px!important; padding-bottom: 64px!important; }
.w3-margin { margin: 16px!important; }
另 : w3-margin-top , w3-margin-right , w3-margin-bottom , w3-margin-left
.w3-section { margin-top: 16px!important; margin-bottom: 16px!important; }
.w3-margin-top { margin-top: 16px!important; }
.w3-margin-right { margin-right: 16px!important; }
.w3-margin-bottom { margin-bottom: 16px!important; }
.w3-margin-left { margin-left: 16px!important; }

5. Display align

Top Left
Top Right
Top Middle
Bottom Left
Bottom Right
Bottom Middle
Left
Right
Middle

position
hover
left left left left left
right right right right right
show show show
hide hide hide
hide hide hide

6. Borders

I have borders. ---- w3-panel w3-border

I have only a left border. ---- w3-border-left

I have only a right border. ---- w3-border-right

I have top and bottom borders. ---- w3-border-top w3-border-bottom

I have borders. ---- w3-border w3-border-red

My borders are rounded (small). ---- w3-border w3-round-small ---- 2px

My borders are rounded. ---- w3-border w3-round ---- 4px

I have large rounded borders. ---- w3-border w3-round-large ---- 8px

I have xlarge rounded borders. ---- w3-border w3-round-xlarge ---- 16px

I have xxlarge rounded borders. ---- w3-border w3-round-xxlarge ---- 32px

w3-panel w3-light-grey w3-leftbar

w3-panel w3-light-grey w3-leftbar w3-border-grey

w3-panel w3-leftbar w3-border-blue

w3-panel w3-leftbar w3-border-blue w3-text-blue

w3-panel w3-leftbar w3-border-red

w3-panel w3-leftbar w3-border-red w3-text-red

w3-panel w3-leftbar w3-border-blue w3-pale-blue

w3-panel w3-topbar w3-bottombar w3-border-red w3-pale-red

w3-panel w3-leftbar w3-border-green

w3-panel w3-leftbar w3-border-green w3-text-green

w3-panel w3-leftbar w3-border-yellow

w3-panel w3-leftbar w3-border-yellow w3-text-yellow

滑鼠滑入 w3-panel w3-border w3-hover-border-red

滑鼠滑入 w3-panel w3-border w3-border-red w3-hover-border-green

滑鼠滑入 w3-panel w3-leftbar w3-border-white w3-hover-border-green

滑鼠滑入 w3-panel w3-light-grey w3-bottombar w3-border-white w3-hover-border-green

滑鼠滑入 style="border:16px solid white" class="w3-panel w3-hover-border-green"

7. Cards (bordered+shadow)

< header class="w3-container w3-blue" >

這是 < div class="w3-container" >

整個外圍 < div class="w3-card-4" > ---- 4px bordered shadow

另外還有 < div class="w3-card-2" > ---- 2px bordered shadow

影像或其他元素也可以加 class="w3-card-4"
Norway
滑鼠滑入產生陰影 class="w3-hover-shadow w3-round-xxlarge"
Norway

8. Text (Alignment+Opacity)

class="w3-left-align"

class="w3-right-align"

class="w3-center"

class="w3-wide"

h2 class="w3-opacity"

9. Buttons & float

Buttons (w3-button) 1.input 2.button 3.a

Link Button

Buttons (w3-btn) 1.input 2.button 3.a

Link Button

Full-width Buttons : The w3-block class creates a full-width button.

Disabled Buttons : < a href="#" class="w3-button w3-brown w3-disabled" >

Link Button Link Button

Disabled Buttons : < button class="w3-button w3-teal" disabled >

Disabled Buttons : < input type="button" class="w3-button w3-red" value="Input Button" disabled >

外層 div class="w3-bar", 按鈕 button class="w3-bar-item w3-button w3-brown"

The size of each items can be defined by using style="width:":

< button class="w3-bar-item w3-button w3-brown" style="width:33.3%" > Button < /button >

< button class="w3-button w3-left w3-light-grey" > « Previous < /button >

< button class="w3-button w3-right w3-green" > Next » < /button >

Click on the buttons to see the effect: < button class="w3-button w3-ripple w3-brown" > Button < /button >

< button class="w3-button w3-xlarge w3-circle w3-teal" > + < /button >

< button class="w3-button w3-xlarge w3-circle w3-red w3-card-4" > + < /button >

10. Alerts

×

Danger!

div class="w3-panel w3-red w3-display-container w3-card-2"

< span onclick="this.parentElement.style.display='none'" class="w3-button w3-red w3-large w3-display-topright" > × </span>

×

Warning!

div class="w3-panel w3-yellow w3-display-container w3-card-2"

< span onclick="this.parentElement.style.display='none'" class="w3-button w3-yellow w3-large w3-display-topright" > × </span>

×

Success!

Green often indicates something successful or positive.

×

Info!

Blue often indicates a neutral informative change or action.

11. Tables

< table class="w3-table-all" > < tr class="w3-light-grey" >

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

< table class="w3-table w3-bordered" > < tr class="w3-light-grey" >

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

< table class="w3-table w3-striped w3-bordered" > < tr class="w3-grey" >

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

< table class="w3-table-all w3-hoverable" > < tr class="w3-light-grey" >

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

< table class="w3-table-all" > 第一列 < tr class="w3-light-grey" > 第四列 < tr class="w3-hover-black w3-hover-text-green" >

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

< div class="w3-responsive" > < table class="w3-table-all" >

First Name Last Name Points Points Points Points Points Points Points
Jill Smith 50 50 50 50 50 50 50
Eve Jackson 94 94 94 94 94 94 94
Adam Johnson 67 67 67 67 67 67 67

12. Lists

To close/hide the list items, click on the "x":

< ul class="w3-ul w3-card-4" > < li class="w3-display-container" >

< span onclick="this.parentElement.style.display='none'" class="w3-button w3-transparent w3-display-right" > × < /span >

You can combine w3-ul and the w3-bar classes to create an avatar list:

< ul class="w3-ul w3-card-4" > < li class="w3-bar" >

13. Image

w3-image w3-opacity-min w3-opacity w3-opacity-max
w3-image w3-grayscale-min w3-grayscale w3-grayscale-max
w3-image w3-sepia-min w3-sepia w3-sepia-max
w3-hover-opacity-off w3-hover-opacity w3-hover-grayscale w3-hover-sepia

14. Input

< form class="w3-container w3-card-4 w3-light-grey w3-margin w3-padding-16" >

< input class="w3-radio" >

Contact Us


15. Badges & Tags

News 6 【 class="w3-badge w3-green" 】

Comments 8 【 class="w3-badge w3-red" 】

❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ ❿ 【 class="w3-xxlarge" 】class="w3-tag"
➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉
❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ ❿ 【 class="w3-xlarge w3-text-green" 】class="w3-tag w3-green"
➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉
❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ ❿ 【 class="w3-large w3-text-red" 】class="w3-tag w3-red"
➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉

The w3-size classes : ( w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo )

only w3-tag tiny small large xlarge xxlarge xxxlarge jumbo

O N S A L E

16. Responsiveness

w3-half
w3-half
w3-half
w3-third
w3-third
w3-third
w3-twothird
w3-third
w3-half
w3-half
w3-half
w3-half
w3-threequarter
w3-half
w3-col width:200
w3-rest
s6 m4 l2
s6 m4 l2
s6 m4 l2
s6 m4 l2
s6 m4 l2
s6 m4 l2

(s)max-width:600px,不指定即為s12    (m)min-width: 601px    (l)min-width: 993px

17. Layout

w3-container w3-pale-red w3-cell
w3-container w3-light-green w3-cell

外層: w3-cell-row w3-section

w3-cell-row 是一個預設寬度100%的儲存格容器, 雷同表格的列

內層: w3-container w3-blue-grey w3-cell

w3-cell 是一個寬度彈性依內容分配w3-cell-row總寬度的儲存格

內層全部 w3-cell 的寬度總和 = 外層 w3-cell-row 的寬度

w3-cell w3-cell-middle

w3-cell w3-cell-bottom

上方的 w3-cell 沒有 w3-mobile

下方這裡的 w3-cell 有 w3-mobile

w3-mobile 讓耭版時欄位上下一欄排版

18. Animations

19. Effects

20. Bars & Dropdowns

21. Accordions

22. Navigation Bars

23. Sidebar

24. Navigation Tabs

25. Pagination

26. Progress Bars

27. Slideshow

28. Modal

29. Tooltips

30. Code & Filters