DIV CSS 佈局教程網

按鈕是任何系統都不能缺少的組件，設置到按鈕的大小、顏色、狀態等。

//btn源碼
.btn {
 display: inline-block;
 padding: 6px 12px;
 margin-bottom: 0;
 font-size: 14px;
 font-weight: normal;
 line-height: 1.42857143;
 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;
 background-image: none;
 border: 1px solid transparent;
 border-radius: 4px;
}

按鈕樣式

btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、btn-link

按鈕大小

btn-xs、btn-sm、btn-lg、btn-block

//源碼
.btn-lg,
.btn-group-lg > .btn {
 padding: 10px 16px;
 font-size: 18px;
 line-height: 1.3333333;
 border-radius: 6px;
}
.btn-sm,
.btn-group-sm > .btn {
 padding: 5px 10px;
 font-size: 12px;
 line-height: 1.5;
 border-radius: 3px;
}
.btn-xs,
.btn-group-xs > .btn {
 padding: 1px 5px;
 font-size: 12px;
 line-height: 1.5;
 border-radius: 3px;
}

所有按鈕的寬度都是文本的長短再加上padding值來決定，若我們需要一個充滿父容器的100%寬度的按鈕，則無法實現。所以有btn-block
btn-block不根據文本收縮，也沒有padding和margin值，而是充滿父容器

//源碼
.btn-block {
 display: block;
 width: 100%;
}
.btn-block + .btn-block {
 margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
 width: 100%;
}

多標簽支持

btn相關元素的強大之處，不僅能支持button元素，也能支持a元素和input元素

<a class="btn btn-default" href="#">鏈接</a>
<button class="btn btn-default" type="submit">按鈕</button>
<input class="btn btn-default" type="submit" value="輸入框">

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。