實用工具類
最W3.CSS的是圍繞工具類建提供填充,邊距,大小和定位。
填充類
在W3-padding- 大小類添加填充任何HTML元素:
在W3-填充巨無霸類增加32PX頂部和底部64PX左右。
W3號 - 填充 - xxlarge類添加24px的頂部和底部48像素的左側和右側。
W3號 - 填充 - XLARGE類增加16像素的頂部和底部,32PX左右。
在W3-填充大型類增加12像素的頂部和底部,24px的左側和右側。
在W3-填充介質類增加留下8像素頂部和底部16px的兩側。
在W3-填充小類增加4PX頂部和底部8像素左右。
在W3-填充纖巧類添加2px的頂部和底部,4PX左右。
例
<div class="w3-container w3-padding-xlarge">
<p>I have 16px top and bottom padding and 32px left and right padding.</p>
</div>
試一試» W3號-填充-賀- 數類增加了橫向(頂部和底部)填充,以任何HTML元素:
在W3-填充-HOR-4類增加4PX頂部和底部填充。
在W3-填充-HOR-8類增加8像素頂部和底部填充。
在W3-填充-HOR-16類增加16像素的頂部和底部填充。
在W3-填充-HOR-32類增加32PX頂部和底部填充。
在W3-填充-HOR-64類增加64PX頂部和底部填充。
在W3-填充-ver- 數類加上垂直(左和右)填充,以任何HTML元素:
在W3-填充-VER-4類增加4PX左右填充。
在W3-填充-VER-8類增加8像素左右填充。
在W3-填充-VER-16級增加了16倍左右填充。
在W3-填充-VER-32類增加32PX左右填充。
在W3-填充-HOR-48類增加64PX左右填充。
例
<div class="w3-container w3-padding-ver-16">
<p>I have 16px left and right padding</p>
</div>
試一試» 保證金類
W3的利潤率類添加利潤率元素:
W3的利潤率類增加16px的保證金到一個元素的所有邊。
W3的利潤率底級增加了一個16像素下邊距的元素。
W3的利潤率左類增加留有餘量一個元素的16像素。
W3的利潤率右類添加16px的右邊距為一個元素。
W3的利潤率 - 一流的增加了一個16像素的上邊距為一個元素。
施膠類
該w3- 大小課改元素的字體大小:
我很小的(使用W3-微小)
我小的(使用W3小)
我網上平台。 默認。
我大(使用W3-大)
我XLARGE(使用W3-超大)
例
<p class="w3-small">I'm small (using w3-small)</p>
<p>I'm medium. The default.</p>
<p class="w3-large">I'm
large (using w3-large)</p>
<p class="w3-xlarge">I'm xlarge (using
w3-xlarge)</p>
試一試» 你可以閱讀更多有關章節上漿類W3.CSS印刷術 。
四捨五入類
在W3-圓頭大小類添加圓角邊框元素:
例
<div class="w3-round w3-teal w3-padding">Round</div>
<div class="w3-round-large w3-teal w3-padding">Rounder</div>
<div class="w3-round-xlarge w3-teal w3-padding">Rounder</div>
<div class="w3-round-jumbo w3-teal w3-padding">Roundest</div>
試一試» Circle類
該中心類
W3的中心級中心元素:
例
<div class="w3-container w3-center w3-green">
<img
class="w3-circle"
src="img_car.jpg" alt="Car">
</div>
試一試» 浮動班
W3的左類浮到左邊的元素,則W3-正確的類浮動到右邊的元素:
例
<div class="w3-container w3-light-grey">
<div class="w3-left
w3-red">Float left</div>
<div class="w3-right w3-blue">Float
right</div>
</div>
試一試» 顯示/隱藏類
W3的隱藏小|中|大類隱藏在一個特定的屏幕大小的元素。
注:調整瀏覽器窗口來了解它是如何工作:
例
<p class="w3-hide-small">I will be hidden on small screens (phone)</p>
<p class="w3-hide-medium">I will be hidden on medium screens (tablet)</p>
<p class="w3-hide-large">I will be hidden
on large screens (laptop/desktop)</p>
試一試»