logo   Bootstrap - Knapper




Der skal bruges tre selektorer for at definere er Bootstrap-knap:

KnapStørrelseFarve
.btn.btn-lgbtn-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;
}




















x
x