ブートストラップパネルが動作しない

私は角度の付いたブートストラップを使用していますが、パネルが正しく動作していません。ファイルが正しい場所にあることを確認できます。 files これは次のようになります。result 私はbtnとbtn-primaryを使用できますが、パネルは使用できません。この問題の原因は何ですか？ブートストラップ4、panelsについてはブートストラップパネルが動作しない

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

出典

2017-09-26 MStimp

の賛成でdroppedされています

出典

2017-09-26 14:57:54 Adaleni

の末尾の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ファイルええそれは私の問題だ、私はしませんでした彼らはこの変更を行ったことを知っている！ – MStimp

ブートストラップ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)

を使用している場合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>

出典

2017-09-26 14:56:27 ProEvilz

すべてのパネル項目を追加することをお勧めします。パネル見出しとパネルフッターを追加して、コンテナに追加する必要があります。

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

出典

2017-09-26 15:05:27

はヒット：Ctrl + Shiftキーを+ Iまたは右クリックして、あなたが問題ととと呼ばれたJavaScriptファイルbootstrabが、そのコードの中に持っていけないことを確認するには、コンソール上でクリックして検査を行う選択bodyタグ

出典

2017-09-26 15:44:30

ブートストラップパネルが動作しない

答えて

関連する問題