Bootstrap 中的“.well”等价物是什么 class 4
What is the '.well' equivalent class in Bootstrap 4
在 bootstrap-3 中有 .well
class 它在具有灰色背景颜色和一些填充的元素周围添加了一个圆角边框。
<div class="well">Basic Well</div>
但是,我在 bootstrap-4 中没有找到任何 .well
class。 bootstrap-4中是否有等同于.well
的标签?
井从 Bootstrap 中删除 version 4。
您可以使用 Cards 而不是 Wells。
以下是如何使用新卡片功能的快速示例:
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<div class="card-block">
<h3 class="card-title">Card Title</h3>
<p class="card-text">This text will be written on a grey background inside a Card.</p>
<a href="#" class="btn btn-primary">This is a Button</a>
</div>
</div>
更新 2018...
card
已替换 well
.
Bootstrap 4
<div class="card card-body bg-light">
Well
</div>
或,作为两个DIV...
<div class="card bg-light">
<div class="card-body">
...
</div>
</div>
(注意:在 Bootstrap 4 Alpha 中,它们被称为 card-block
而不是 card-body
和 bg-faded
而不是 bg-light
)
这最适合我:
<div class="card bg-light p-3">
<p class="mb-0">Some text here</p>
</div>
None 的答案似乎适用于按钮。 Bootstrap v4.1.1
<div class="card bg-light">
<div class="card-body">
<button type="submit" class="btn btn-primary">
Save
</button>
<a href="/" class="btn btn-secondary">
Cancel
</a>
</div>
</div>
我正在为 class 警报做好我的 classes,对我来说它看起来越来越好,但有时需要进行一些调整以将宽度设置为 100%
<div class="alert alert-light" style="width:100%;">
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
卡似乎是 "discarded" 哈哈,我发现 "well" 不能与 bootstrap 4.3.1 和 jQuery v3.4.1 一起使用,只是与 bootstrap 4.3.1 和 jQuery v3.3.1。希望对你有帮助。
确定officially version says the cards are the new replacements for Bootstrap wells. But Cards are a quite broad Bootstrap components now. In simple terms, you can also use Bootstrap Jumbotron。
寻找单行选项:
<div class="jumbotron bg-dark"> got a team? </div>
在 bootstrap-3 中有 .well
class 它在具有灰色背景颜色和一些填充的元素周围添加了一个圆角边框。
<div class="well">Basic Well</div>
但是,我在 bootstrap-4 中没有找到任何 .well
class。 bootstrap-4中是否有等同于.well
的标签?
井从 Bootstrap 中删除 version 4。
您可以使用 Cards 而不是 Wells。
以下是如何使用新卡片功能的快速示例:
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<div class="card-block">
<h3 class="card-title">Card Title</h3>
<p class="card-text">This text will be written on a grey background inside a Card.</p>
<a href="#" class="btn btn-primary">This is a Button</a>
</div>
</div>
更新 2018...
card
已替换 well
.
Bootstrap 4
<div class="card card-body bg-light">
Well
</div>
或,作为两个DIV...
<div class="card bg-light">
<div class="card-body">
...
</div>
</div>
(注意:在 Bootstrap 4 Alpha 中,它们被称为 card-block
而不是 card-body
和 bg-faded
而不是 bg-light
)
这最适合我:
<div class="card bg-light p-3">
<p class="mb-0">Some text here</p>
</div>
None 的答案似乎适用于按钮。 Bootstrap v4.1.1
<div class="card bg-light">
<div class="card-body">
<button type="submit" class="btn btn-primary">
Save
</button>
<a href="/" class="btn btn-secondary">
Cancel
</a>
</div>
</div>
我正在为 class 警报做好我的 classes,对我来说它看起来越来越好,但有时需要进行一些调整以将宽度设置为 100%
<div class="alert alert-light" style="width:100%;">
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
卡似乎是 "discarded" 哈哈,我发现 "well" 不能与 bootstrap 4.3.1 和 jQuery v3.4.1 一起使用,只是与 bootstrap 4.3.1 和 jQuery v3.3.1。希望对你有帮助。
确定officially version says the cards are the new replacements for Bootstrap wells. But Cards are a quite broad Bootstrap components now. In simple terms, you can also use Bootstrap Jumbotron。
寻找单行选项:
<div class="jumbotron bg-dark"> got a team? </div>