关注爱学习公众号
扫码手机阅读更方便
Bootstrap4 信息提示框 Bootstrap 4 可以很容易实现信息提示框。 提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现: 实例
Bootstrap4 表格 Bootstrap4 基础表格 Bootstrap4 通过 .table 类来设置基础表格的样式,实例如下: 实例 [mycode3 type='html'] Firstname Lastname Email
Bootstrap4 分页 网页开发过程,如果碰到内容过多,一般都会做分页处理。 Bootstrap 4 可以很简单的实现分页效果。 要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类:: 实例 [mycode3 type='html'
Bootstrap4 卡片 简单的卡片 我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片,实例如下: 实例 [mycode3 type='html'] 简单的卡片 [/mycode3] 尝试一下 » Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。
Bootstrap4 导航栏 导航栏一般放在页面的顶部。 我们可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠)。 导航栏上的选项可以使用 <ul> 元素并添加 class='navbar-nav' 类。 然后在 &a
Bootstrap4 按钮组 Bootstrap 4 中允许我们将按钮放在同一行上。 可以在 <div> 元素上添加 .btn-group 类来创建按钮组。 实例 [mycode3 type='html'] Apple Samsung Sony [/mycode3] 尝试一下 » 提示: 我们可以使用 .
Bootstrap4 列表组 大部分基础列表组都是无序的。 要创建列表组,可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类: 实例 [mycode3 type='html'] First item Second item Thir
Bootstrap4 安装使用 我们可以通过以下两种方式来安装 Bootstrap4: 使用 Bootstrap 4 CDN。 从官网 getbootstrap.com 下载 Bootstrap 4。 Bootstrap 4 CDN 国内推荐使用 Staticfile CDN 上的库: Bootstrap4 CDN [mycode3 type='html&#
Bootstrap4 轮播 轮播是一个循环的幻灯片: 如何创建轮播 以下实例创建了一个简单的图片轮播效果 : 实例 [mycode3 type='html']
Bootstrap 滚动监听(Scrollspy) 滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。 如何创建滚动监听 以下实例演示了如何创建滚动监听: 实例 [mycode3 type='html'] ... Section 1 ... Sec
我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片,实例如下:
<div class="card">
<div class="card-body">简单的卡片</div>
</div>
Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。
.card-header类用于创建卡片的头部样式, .card-footer 类用于创建卡片的底部样式:
<div class="card">
<div class="card-header">头部</div>
<div class="card-body">内容</div>
<div class="card-footer">底部</div>
</div>
Bootstrap 4 提供了多种卡片的背景颜色类: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。
<div class="container">
<h2>多种颜色卡片</h2>
<div class="card">
<div class="card-body">Basic card</div>
</div>
<br>
<div class="card bg-primary text-white">
<div class="card-body">Primary card</div>
</div>
<br>
<div class="card bg-success text-white">
<div class="card-body">Success card</div>
</div>
<br>
<div class="card bg-info text-white">
<div class="card-body">Info card</div>
</div>
<br>
<div class="card bg-warning text-white">
<div class="card-body">Warning card</div>
</div>
<br>
<div class="card bg-danger text-white">
<div class="card-body">Danger card</div>
</div>
<br>
<div class="card bg-secondary text-white">
<div class="card-body">Secondary card</div>
</div>
<br>
<div class="card bg-dark text-white">
<div class="card-body">Dark card</div>
</div>
<br>
<div class="card bg-light text-dark">
<div class="card-body">Light card</div>
</div>
</div>
我们可以在头部元素上使用 .card-title 类来设置卡片的标题 。 .card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色。
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
我们可以给 <img> 添加 .card-img-top(图片在文字上方) 或 .card-img-bottom(图片在文字下方 来设置图片卡片:
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
如果图片要设置为背景,可以使用 .card-img-overlay 类:
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>