Foundation label


May 04, 2021 11:00 Foundation5


Table of contents


Foundation label

.label class is used to provide some additional information:

Instance

< h2 > Example < span class= "label" > New < /span > < /h2 >
< h3 > Example < span class= "label" > New < /span > < /h3 >
< h4 > Example < span class= "label" > New < /span > < /h4 >

尝试一下 »

以下类可以设置标签的颜色: .secondary , .success , .info , .warning .alert :

实例

< span class= "label" > Default Label < /span >
< span class= "label secondary" > Secondary Label < /span >
< span class= "label success" > Success Label < /span >
< span class= "label info" > Info Label < /span >
< span class= "label warning" > Success Label < /span >
< span class= "label alert" > Alert Label < /span >

尝试一下 »

圆角标签

.radius .round 类可以为标签添加圆角:

实例

< span class= "label" > Default Label < /span >
< span class= "label radius" > Radius Label < /span >
< span class= "label round" > Round Label < /span >
< span class= "label success round" > 5 < /span >

尝试一下 »

The label size

You can use CSS to modify the size of the label:

Instance

< h1 > Example < span class= "label" style= "font-size:36px;" > New < /span > < /h1 >
< h2 > Example < span class= "label" style= "font-size:30px;" > New < /span > < /h2 >
< h3 > Example < span class= "label" style= "font-size:20px;" > New < /span > < /h3 >
< h4 > Example < span class= "label" > New < /span > < /h4 >

尝试一下 »