BootStrap按钮、图片

发布时间：2020-12-17 20:45:23 所属栏目：安全来源：网络整理

导读：按钮可作为按钮的标签和元素： a 、 button ?或? input ?元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。 .btn .btn-default .btn-primary .btn-success .btn-waring .btn-danger .btn-link（把按钮做得跟a标签一个样式） .btn-info 代码 d

按钮

可作为按钮的标签和元素：<a>、<button>?或?<input>?元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
.btn
.btn-default
.btn-primary
.btn-success
.btn-waring
.btn-danger
.btn-link（把按钮做得跟a标签一个样式）
.btn-info

代码

<div class="container">
    <button class="btn">bs按钮</button>
    <button class="btn btn-default">bs按钮</button>
    <button class="btn btn-primary">bs按钮</button>
    <button class="btn btn-success">bs按钮</button>
    <button class="btn btn-warning">bs按钮</button>
    <button class="btn btn-danger">bs按钮</button>
    <button class="btn btn-link">bs按钮</button>

</div>

效果截图
?
尺寸：需要让按钮具有不同尺寸，使用?.btn-lg、.btn-sm?或?.btn-xs?就可以获得不同尺寸的按钮。
通过给按钮添加?.btn-block?类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
由于?:active?是伪状态，因此无需额外添加，但是在需要让其表现出同样外观的时候可以添加?.active?类。
```
<button type="button" class="btn btn-default btn-lg active">Button</button>
```
?

由a标签创建的按钮：

<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

为?<button>?元素添加?disabled?属性，使其表现出禁用状态。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!