Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

html - Bootstrap Navbar. When I press the button nothing happens

0 votes
339 views
in Technique[技术] by (71.8m points)

html - Bootstrap Navbar. When I press the button nothing happens

I have a problem with my navbar. When the screen is small a Button appear, but when I press the button nothing happens.

This is my code and i don't really know why the button in the Navebar doesn't do anything.

body {
  font-family: Verdana;
  // letter-spacing: 1px;
}
#header,
h1 {
  // color: #6f6f6f;
  color: #fff;
  font-size: 24px;
}
container {
  margin-left: auto;
  margin-right: auto;
}
#header {
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 200px;
  padding-top: 10px;
  background: rgb(26, 84, 155);
  background: -moz-linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(26, 84, 155, 1)), color-stop(100%, rgba(125, 185, 232, 1)));
  background: -webkit-linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%);
  background: -o-linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%);
  background: -ms-linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%);
  background: linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1a549b', endColorstr='#7db9e8', GradientType=1);
}
table {
  float: left;
}
.beschreibung {
  width: 100%;
  float: left;
}
.text {
  float: left;
}
.person {
  float: left;
  margin-top: 20px;
  border-width: 1px;
  border-style: solid;
  border-color: #8ec6f7;
  padding: 2.5em;
  border-radius: 5px;
  text-align: justify;
}
.download {
  background-color: #8ec6f7;
  border-radius: 10px;
  width: 100px;
  color: #fff;
}
.footer {
  margin-top: 140px;
  width: 100%;
  height: 200px;
  background: #909090;
  float: bottom;
}
.footer,
.foo {
  color: #fff;
}
<!DOCTYPE HTML>
<html>
<head>
  <title>TestPage</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
  </script>
  <meta charset="utf-8" />
  <link rel="icon" type="image/png" href="apple_logo.png" />
</head>

<body>
  <!--nav bar-->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span></a>
          </li>
          <li><a href="about_us.html">About us</a>
          </li>
          <li><a href="downloads.html">Downloads</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="navbar-header">

    </div>
  </nav>

  <!--header-->
  <div id="header">
    <div class="container">
      <center>
        <h1>überschrift</h1>
        <h3>unter überschrift</h3>
      </center>
    </div>
  </div>

  <!-- body-part -->
  <div class="container">
    <h2>News</h2>
    <hr/>
    <div class="line">
      <div class="col-xs-6 col-sm-3">
        <a href="#" class="thumbnail">
          <img src="ip_doesnt_exist.jpg" alt="...">
        </a>
      </div>
      <h4>Example heading</h4>
      <p class="text">jal?sdjflkajgl?kadjfl?gkja?lkdfj?lk ja?lksjdf?l j?lkasdjf?lka</p>
      <br/>
      <br/>
      <p><b>1.1.1999</b>
      </p>
      <br/>
      <br/>
      <br/>

      <hr/>


    </div>
    <div class="line">
      <div class="col-xs-6 col-sm-3">
        <a href="#" class="thumbnail">
          <img src="ip_doesnt_exist.jpg" alt="...">
        </a>
      </div>
      <h4>Example heading</h4>
      <p class="text">jal?sdjflkajgl?kadjfl?gkja?lkdfj?lk ja?lksjdf?l j?lkasdjf?lka</p>
      <br/>
      <br/>
      <p><b>1.1.1999</b>
      </p>
      <br/>
      <br/>
      <br/>
      <br/>

      <hr/>
    </div>

    <div class="line">
      <div class="col-xs-6 col-sm-3">
        <a href="#" class="thumbnail">
          <img src="ip_doesnt_exist.jpg" alt="...">
        </a>
      </div>
      <h4>Example heading</h4>
      <p class="text">jal?sdjflkajgl?kadjfl?gkja?lkdfj?lk ja?lksjdf?l j?lkasdjf?lka</p>
      <br/>
      <br/>
      <p><b>1.1.1999</b>
      </p>
      <br/>
      <br/>
      <br/>

      <hr/>
    </div>
  </div>
  
  <div class="footer">
    <div class="container">
      <br/>
      <div class="row">
        <div class="col-sm-12 col-md-12">
          <a href="#">
            <img src="facebook-icon.png" alt="facebook">
            <p class="foo">Followe us on Facebook</p>
          </a>
        </div>
        <div class="col-sm-12 col-md-12">
          <a href="#">
            <img src="google-plus-icon.png" alt="google+">
            <p class="foo">Followe us on Google +</p>
          </a>
        </div>
        <div class="col-sm-12 col-md-12">

        </div>
      </div>
    </div>
  </div>
</body>
</html>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

What is missing is a reference to jquery.js. I created jsfiddle to demonstrate it.

Please note that you need to reference jquery.js before referecing bootstrap.js

Your html head should look like:

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">  </script>

Hope this works


与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...