bootstrap——css样式（五、按钮和图片）

最新推荐文章于 2024-05-17 17:36:00 发布

zaichuanguanshui

最新推荐文章于 2024-05-17 17:36:00 发布

阅读量5.2k

点赞数 1

分类专栏： web 文章标签： bootstrap css button a img

本文链接：https://blog.youkuaiyun.com/zaichuanguanshui/article/details/54602023

版权

web 专栏收录该内容

62 篇文章

订阅专栏

这篇博客详细介绍了Bootstrap中的按钮和图片样式。包括预定义的按钮样式、尺寸调整、块级按钮、激活和禁用状态的设置，以及如何为a、button和input元素应用按钮类。此外，还讲解了响应式图片的实现，通过添加.img-responsive类使图片自适应布局，并简要提及了图片的不同形状。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、预定义样式的按钮
bootstrap为我们设计了一些按钮样式

这里写图片描述

<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>

2、按钮尺寸
使用 .btn-lg、.btn-sm 或 .btn-xs 可以获得不同尺寸的按钮。
这里写图片描述

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>

3、块级按钮
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
这里写图片描述

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

4、按钮激活状态
可以将 .active 应用到 button 上，并通过编程的方式使其处于激活状态。

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

5、禁用状态
1）按钮禁用状态
为button元素添加 disabled 属性，使其表现出禁用状态。

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

2）连接禁用状态
为基于a 元素创建的按钮添加 .disabled 类。

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

6、按钮类
为 a、button 或 input 元素应用按钮类。

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

尽可能使用button 元素
7、响应式图片
通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%; 和 height: auto; 属性，从而让图片在其父元素中更好的缩放。

<img src="..." class="img-responsive" alt="Responsive image">

8、图片形状
这里写图片描述

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">