web-dev-qa-db-fra.com

panneau de démarrage ne fonctionne pas

J'utilise bootstrap avec angular, mais les panneaux ne fonctionnent pas correctement. Je peux confirmer que les fichiers sont aux bons endroits . fichiers Voici à quoi cela ressemble: result Je peux utiliser btn et btn-primary, mais pas le panneau. Quelle pourrait être la cause de ce problème?

<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>
cssbootstrap-4
5
MStimp

si vous utilisez bootstrap 4 lisez ceci 

  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

25
Adaleni

Pour Bootstrap 4, panels ont été abandonné en faveur de 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>

7
Ashley Brown

Appuyez sur : ctrl + shift + i ou cliquez avec le bouton droit de la souris et choisissez inspecter, puis cliquez sur la console pour vous assurer que vous n'avez pas de problème et que le fichier JavaScript de bootstrab est appelé 

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

mais votre fichier bootstrap.js à la fin de la balise body 

0
Abu Bakr