كلاس الاول
[frame=2]
كود html
CODE
<link href="style.css" rel="stylesheet">
<span class="label">توريري عبداللطيف </span>
<span class="label label-success">توريري عبداللطيف </span>
<span class="label label-warning">توريري عبداللطيف </span>
<span class="label label-important">توريري عبداللطيف </span>
<span class="label label-info">توريري عبداللطيف </span>
<span class="label label-inverse">توريري عبداللطيف </span>
كود style.css
CODE
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #333333;
background-color: #ffffff;
/* changes for better demo */
margin: 20px 0 0;
text-align: center;
}
.label {
padding: 1px 4px 2px;
font-size: 10.998px;
font-weight: bold;
line-height: 13px;
color: #ffffff;
vertical-align: middle;
white-space: nowrap;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #999999;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.label:hover {
color: #ffffff;
text-decoration: none;
}
.label-important {
background-color: #b94a48;
}
.label-important:hover {
background-color: #953b39;
}
.label-warning {
background-color: #f89406;
}
.label-warning:hover {
background-color: #c67605;
}
.label-success {
background-color: #468847;
}
.label-success:hover {
background-color: #356635;
}
.label-info {
background-color: #3a87ad;
}
.label-info:hover {
background-color: #2d6987;
}
.label-inverse {
background-color: #333333;
}
.label-inverse:hover {
background-color: #1a1a1a;
}
[/frame]