Bootstrap-按鈕篇btn


參考網址:http://v3.bootcss.com/(能抄不寫)

1、按鈕顏色樣式:

對應代碼:(主要體現在class內容:btn-default,btn-primary...)

<button type="button" class="btn btn-default">(默認樣式)Default</button>

<button type="button" class="btn btn-primary">(首選項)Primary</button>

<button type="button" class="btn btn-success">(成功)Success</button>

<button type="button" class="btn btn-info">(一般信息)Info</button>

<button type="button" class="btn btn-warning">(警告)Warning</button>

<button type="button" class="btn btn-danger">(危險)Danger</button>

<button type="button" class="btn btn-link">(鏈接)Link</button>

<a href="#" class="btn btn-primary" role="button">Primary link</a>

 

 

2、按鈕大小樣式 

 

 對應代碼:(主要體現在class內容:btn-lg,btn-sm,btn-xs...)

<p>

<button type="button" class="btn btn-primary btn-lg">(大按鈕)Large button</button>

<button type="button" class="btn btn-default btn-lg">(大按鈕)Large button</button>

</p>

<p>

<button type="button" class="btn btn-primary">(默認尺寸)Default button</button>

<button type="button" class="btn btn-default">(默認尺寸)Default button</button>

</p>

<p>

<button type="button" class="btn btn-primary btn-sm">(小按鈕)Small button</button>

<button type="button" class="btn btn-default btn-sm">(小按鈕)Small button</button>

</p>

<p>

<button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>

<button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>

</p>

 

3、禁用btn

 

對應代碼:(主要體現在class內容:disabled="disabled" ; disabled

<button class="btn btn-lg btn-primary" type="button" disabled="disabled">Primary button</button>

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM