Bootstrap v5中卡片组件类名
时间: 2023-08-18 22:53:12 浏览: 175
Bootstrap v5中卡片组件的样式类名为 "card",可以通过添加不同的后缀来实现不同的样式效果,例如:
- "card-body":卡片主体内容
- "card-title":卡片标题
- "card-subtitle":卡片副标题
- "card-text":卡片文字内容
- "card-img-top":卡片顶部图片
- "card-header":卡片头部
- "card-footer":卡片底部
此外,还可以添加 "bg-primary"、"bg-secondary"、"bg-success"、"bg-danger"、"bg-warning"、"bg-info"、"bg-light"、"bg-dark" 等类名来实现不同的背景颜色效果。
相关问题
Bootstrap v5中按钮样式类名
Bootstrap v5中按钮的样式类名为 "btn",可以通过添加不同的后缀来实现不同的样式效果,例如:
- "btn-primary":主要按钮样式
- "btn-secondary":次要按钮样式
- "btn-success":成功按钮样式
- "btn-danger":危险按钮样式
- "btn-warning":警告按钮样式
- "btn-info":信息按钮样式
- "btn-light":浅色按钮样式
- "btn-dark":深色按钮样式
此外,还可以添加 "btn-lg"、"btn-sm"、"btn-block" 等类名来实现不同的尺寸和布局效果。
bootstrapv5卡片组件类名
在Bootstrap v5中,卡片组件的类名为 "card"。可以通过以下方式使用:
```html
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
```
以上代码会创建一个基本的卡片组件。你也可以根据需要添加其他的类名来定制卡片的样式和行为。
阅读全文