引导面板不工作答案

【问题标题】：bootstrap panel not working引导面板不工作
【发布时间】：2018-03-07 20:53:36
【问题描述】：

我正在使用带角度的引导程序，但面板无法正常工作。我可以确认文件在正确的位置。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>

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

如果您使用的是 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-body
.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

【讨论】：

是的，这是我的问题，我不知道他们做了这个改变谢谢！
有人为 BS4 创建一个插件来将它们带回来吗？
@Jonathan 我不这么认为

【解决方案2】：

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

【讨论】：

有人为 BS4 创建一个插件来把他们带回来吗？
@Jonathan 为什么需要插件？卡片是一回事
它们在我看来不一样
@AshleyBrown 想要一个插件的一个原因是因为你有大量的预制代码使用你想要剪切和粘贴的面板，你不想花时间转换所有东西超过。另一个原因可能是有人想要将网站升级到 Bootstrap 4（可能更改主题），并且您希望现有页面在更新之前继续工作。
全局查找并用 CTRL/CMD + F 替换类名

【解决方案3】：

Hit：ctrl+shift+i 或右键单击并选择检查，然后单击控制台以确保您没有问题并调用 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 标签的末尾

【讨论】：

【解决方案4】：

我建议您添加所有面板项，我认为您应该添加面板标题和面板页脚以及容器。

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

【讨论】：