Bootstrap - Knapper
Der skal bruges tre selektorer for at definere er Bootstrap-knap:
Knap | Størrelse | Farve |
.btn | .btn-lg | btn-primary |
class="btn btn-lg btn-primary" |
Koden for størrelse og farve skal tilpasses til det aktuelle behov.
Knapper er i Bootstrap defineret ved selektoren '.btn' med følgende opbygning;
.btn {
display: inline-block;
padding: .375rem 1rem;
font-size: 1rem;
font-weight: normal;
line-height: 1.5;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: .0625rem solid transparent;
border-radius: .25rem;
}
|
Der findes to størrelser knapper:
.btn-lg, .btn-group-lg > .btn {
padding: .75rem 1.25rem;
font-size: 1.25rem;
line-height: 1.333333;
border-radius: .3rem;
}
|
.btn-sm, .btn-group-sm > .btn {
padding: .25rem .75rem;
font-size: .85rem;
line-height: 1.5;
border-radius: .2rem;
}
|
Egne knapper
Egne knapper kan opbygges i 'egnecss' f.eks således:
.btn-xs, .btn-group-xs > .btn {
padding: .0625rem .3125rem;
font-size: .75rem;
line-height: 1.5;
border-radius: .1875rem;
}
|
|