按钮 - Buttons

创建按钮以及按钮的样式

<button> 元素、 <input> 元素和 <a> 元素都可以创建按钮

<!-- 按钮元素 -->
<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