創(chuàng)建按鈕以及按鈕的樣式

<button> 元素筋夏、 <input> 元素和 <a> 元素都可以創(chuàng)建按鈕

<!-- 按鈕元素 -->
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</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>

<!-- input 元素 -->
<hr>
<input type="button" class="btn btn-default" value="Default">
<input type="button" class="btn btn-primary" value="Primary">
<input type="button" class="btn btn-info" value="Info">
<input type="button" class="btn btn-success" value="Success">
<input type="button" class="btn btn-warning" value="Warning">
<input type="button" class="btn btn-danger" value="Danger">
<input type="button" class="btn btn-link" value="Link">

<!-- 鏈接 元素 -->
<hr>
<a href="#" class="btn btn-default">Default</a>
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-link">Link</a>

01.PNG

按鈕尺寸

• .btn-lg：大尺寸
• 不設置：默認尺寸
• .btn-sm：小尺寸
• .btn-xs：超小尺寸

<button type="button" class="btn btn-default btn-lg">Default</button>
<button type="button" class="btn btn-primary btn-lg">Primary</button>
<button type="button" class="btn btn-info btn-lg">Info</button>
<button type="button" class="btn btn-success btn-lg">Success</button>
<button type="button" class="btn btn-warning btn-lg">Warning</button>
<button type="button" class="btn btn-danger btn-lg">Danger</button>

<hr>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>

<hr> 
<button type="button" class="btn btn-default btn-sm">Default</button>
<button type="button" class="btn btn-primary btn-sm">Primary</button>
<button type="button" class="btn btn-info btn-sm">Info</button>
<button type="button" class="btn btn-success btn-sm">Success</button>
<button type="button" class="btn btn-warning btn-sm">Warning</button>
<button type="button" class="btn btn-danger btn-sm">Danger</button>

<hr>
<button type="button" class="btn btn-default btn-xs">Default</button>
<button type="button" class="btn btn-primary btn-xs">Primary</button>
<button type="button" class="btn btn-info btn-xs">Info</button>
<button type="button" class="btn btn-success btn-xs">Success</button>
<button type="button" class="btn btn-warning btn-xs">Warning</button>
<button type="button" class="btn btn-danger btn-xs">Danger</button>

02.PNG

塊狀按鈕

一個按鈕就是一個塊，會充滿容器空間

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

03.PNG

禁用按鈕

如果是 <button> 元素，設置 disabled 屬性骡和，如果是 <a> 元素，則設置 .disabled 樣式

<div class="bs-example">
    <button type="button" class="btn btn-default btn-lg" disabled>Default</button>
    <button type="button" class="btn btn-primary btn-lg" disabled>Primary</button>
    <button type="button" class="btn btn-info btn-lg" disabled="disabled">Info</button>
    <button type="button" class="btn btn-success btn-lg" disabled="disabled">Success</button>
    <button type="button" class="btn btn-warning btn-lg" disabled="disabled">Warning</button>
    <button type="button" class="btn btn-danger btn-lg" disabled="disabled">Danger</button>
</div>


<div class="bs-example">
    <a href="#" class="btn btn-default btn-lg disabled">Default</a>
    <a href="#" class="btn btn-primary btn-lg disabled">Primary</a>
    <a href="#" class="btn btn-info btn-lg disabled">Info</a>
    <a href="#" class="btn btn-success btn-lg disabled">Success</a>
    <a href="#" class="btn btn-warning btn-lg disabled">Warning</a>
    <a href="#" class="btn btn-danger btn-lg disabled">Danger</a>
</div>

04.PNG