我使用带角度的自举,但面板无法正常工作。我可以确认这些文件位于正确的位置。files 这就是它的样子:result 我可以使用btn和btn-primary,但不能使用面板。可能导致这个问题的原因是什么?
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<button class="btn btn-success">test</button>
</body>
</html>
答案 0 :(得分:25)
如果您使用的是bootstrap 4,请阅读
Panels, thumbnails, and wells
Dropped entirely for the new card component.
Panels
.panel to .card, now built with flexbox.
.panel-default removed and no replacement.
.panel-group removed and no replacement. .card-group is not a replacement, it is different.
.panel-heading to .card-header
.panel-title to .card-title. Depending on the desired look, you may also want to use heading elements or classes (e.g. <h3>, .h3) or bold elements or classes (e.g. <strong>, <b>, .font-weight-bold). Note that .card-title, while similarly named, produces a different look than .panel-title.
.panel-body to .card-block
.panel-footer to .card-footer
.panel-primary to .card-primary and .card-inverse (or use .bg-primary on .card-header)
.panel-success to .card-success and .card-inverse (or use .bg-success on .card-header)
.panel-info to .card-info and .card-inverse (or use .bg-info on .card-header)
.panel-warning to .card-warning and .card-inverse (or use .bg-warning on .card-header)
.panel-danger to .card-danger and .card-inverse (or use .bg-danger on .card-header)
https://v4-alpha.getbootstrap.com/migration/#panels-thumbnails-and-wells
答案 1 :(得分:8)
对于Bootstrap 4,panels
已dropped支持cards
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 20rem;">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<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>
答案 2 :(得分:0)
点击:ctrl + shift + i或右键单击并选择inspect然后单击控制台以确保您没有问题并调用bootstrab JavaScript文件 但是html文件中的代码
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
但是你的bootstrap.js文件位于body标签的末尾
答案 3 :(得分:-1)
我建议您添加所有面板项目,我认为您应该添加面板标题和面板页脚以及容器。
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="box">
<div class="panel panel-default">
<div class="panel-heading">
<p>This a title</p>
</div>
<div class="panel-body">
Basic panel example
</div>
<div class="panel-footer">
<button class="btn btn-success">test</button>
</div>
</div>
</div>
</div>
</body>