bootstrap4でnavbarが表示されない

<!DOCTYPE html> <html lang="ja"> <head> <meta charset = "utf-8"> <title>strap</title> <link rel = "stylesheet" href="c.css"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <header> <nav class="navbar navbar-expand-sm "> <h1 class="navbar-brand"><a href="">practice</a></h1> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#bsnav"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="bsnav"> <ul class="navbar-nav"> <li class="nav-item">a</li>

      <li class="nav-item">b</li>
     
      <li class="nav-item">c</li>
    </ul>
  </div>

</nav>

</header>

<div class="container" >
  <div class=" h-50 bg-warning text-light mx-auto" style="width:50px" >
    A
  </div>
  <div class="w-100 h-25 bg-primary">
    A
  </div>
  <div class="w-100    bg-secondary text-muted">
    A
  </div>
  <div class="w-100   bg-success text-black-50">
    A
  </div>
  <div class="w-100   bg-info">
    A
  </div>
   
  </div>

</body> </html>

elementsのStylesのでの表記です。
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
cursor: pointer;
}
reboot.scss:359からの引用でした。カーソルがポインタになりクリックすると枠だけ青くなります。

行動規範の内容に同意します

回答1件

ベストアンサー

ドキュメントにあるように必要なスクリプトを読み込んでください。

HTML
1<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
2<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
3<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

https://getbootstrap.com/docs/4.3/getting-started/introduction/#js

投稿2019/10/04 03:11

x_x

総合スコア13749

mentanpinsan

2019/10/04 14:05

自分でjava書いてなくてもbootstrap4自体が必要としているのですね。で、リンクのStarter templateをコピペしたのですがボタンが表示されません。navbarが表示されないのではなく、はじめからtoggleタイプのボタンが表示されません。訂正します。以下コードです。 <!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="c.css">  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>boot!</title> </head> <body> <header> <nav class="navbar navbar-expand-sm "> <h1 class="navbar-brand"><a href="">practice</a></h1> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#bsnav"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="bsnav"> <ul class="navbar-nav"> <li class="nav-item">a</li> <li class="nav-item">b</li> <li class="nav-item">c</li> </ul> </div> </nav> </header> <div class="container"> <div class=" h-50 bg-warning text-light mx-auto" style="width:50px"> A </div> <div class="w-100 h-25 bg-primary"> A </div> <div class="w-100 bg-secondary text-muted"> A </div> <div class="w-100 bg-success text-black-50"> A </div> <div class="w-100 bg-info"> A </div> </div>   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>

mentanpinsan

2019/10/04 14:23

申し訳ありません<span></span>の中に文字をいれていない初歩的な間違いでした。解決しました。ありがとうございました。