iT邦幫忙

0

12.Bootstrap(中文教程)元件:按鈕

  • 分享至 

  • xImage
  •  

ㄧ.按鈕樣式

<div class="conponent" id="demo">
 <input type="button" value="0.input" class="btn btn-secondary">
 <a href="#" class="btn btn-primary">1.a</a>
 <button class="btn btn-danger">2.button</button>
</div>

.component.demo{
 padding: 50px;
}

重點:
1.btn的樣式蠻多種的.btn-primary .btn-secondary .btn-succes .btn-dange .btn-warning .btn-info .btn-light .btn-dark .btn-link

二.外寬按鈕

<div class="conponent" id="demo">
  <button class="btn btn-outline-danger">外寬按鈕</button>
</div>

.component.demo{
 padding: 50px;
}

重點:
1.這樣是為外寬按鈕的樣式,在中間加入out-line即可

三.大小按鈕

<div class="conponent" id="demo">
 <button class="btn btn-outline-danger btn-sm">sm按鈕</button>
 <button class="btn btn-outline-danger btn-lg">lg按鈕</button><br><br>
</div>

.component.demo{
 padding: 50px;
}

重點:
1.btn-sm為小按鈕,.btn-lg為大按鈕

四.創建塊級別的按鈕

<div class="conponent" id="demo">
 <button class="btn btn-outline-danger btn-sm btn-block">sm-創建塊級別的按鈕</button>
 <button class="btn btn-outline-danger btn-lg btn-block">lg-創建塊級別的按鈕</button><br>
</div>

.component.demo{
 padding: 50px;
}

重點:
1.加入.btn-block按鈕會很寬,屬於創建的按鈕

五.禁用按鈕

<div class="conponent" id="demo">
  <button type="button" class="btn btn-outline-danger" disabled>禁用按鈕</button>
</div>

.component.demo{
 padding: 50px;
}

重點:
1.在button的屬性加入disabled,禁止使用按鈕

codepen
參考:bootstrap4


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言