Collapse and even dropdown works?

Asked

Viewed 36 times

1

What’s wrong with the following code, collapse and neither dropdown works.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">

<title> </title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/signin.css" rel="stylesheet">
<script type="text/javascript">
$(".dropdown-toggle").dropdown();
</script>


</head>

<body class="text-center">
<form class="form-signin bg-white rounded box-shadow">
  <img class="mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">


  <label for="inputEmail" class="sr-only">Usuário</label>
  <input type="email" id="inputEmail" class="form-control" placeholder="Username" required autofocus>

  <label for="inputEmail" class="sr-only">Idade</label>
  <input type="date" id="inputEmail" class="form-control" name="bday" max="1979-12-31"required autofocus>

    <div class="btn-group">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Right-aligned menu
      </button>
      <div class="dropdown-menu dropdown-menu-right">
        <button class="dropdown-item" type="button">Action</button>
        <button class="dropdown-item" type="button">Another action</button>
        <button class="dropdown-item" type="button">Something else here</button>
      </div>
    </div> 


  <label for="inputPassword" class="sr-only">Estado</label>
  <input type="text" id="inputEmail" class="form-control" placeholder="Country" required>

  <label for="inputPassword" class="sr-only">Cidade</label>
  <input type="text" id="inputPassword" class="form-control" placeholder="City/UF" required>

  <button class="btn btn-lg btn-block" type="submit">Registrar-se</button>
  <p class="mt-5 mb-3 text-muted">&copy; 2017-2018</p>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>


</body>

</html>
twitter-bootstrap bootstrap collapse

1 answer

1


Friend what is happening is that the order you call the scripts is wrong

Note that first you should see the Cdns (links with the .js that you will need) and then come your own <script> because it depends on the Cdns to work. See below to understand. 

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript">
        $(".dropdown-toggle").dropdown();
    </script>

The rules are the same for Bootstrap3. In fact any <script> that you use jQuery for example should always come under jQuery indexing

Other Example:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(".dropdown-toggle").dropdown();
</script>

See the full code working on the Snipper below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
    
</style>
</head>
<body>
    
    <form class="form-signin bg-white rounded box-shadow">
        <img class="mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
      
      
        <label for="inputEmail" class="sr-only">Usuário</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Username" required autofocus>
      
        <label for="inputEmail" class="sr-only">Idade</label>
        <input type="date" id="inputEmail" class="form-control" name="bday" max="1979-12-31"required autofocus>
      
          <div class="btn-group">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Right-aligned menu
            </button>
            <div class="dropdown-menu dropdown-menu-right">
              <button class="dropdown-item" type="button">Action</button>
              <button class="dropdown-item" type="button">Another action</button>
              <button class="dropdown-item" type="button">Something else here</button>
            </div>
          </div> 
      
      
        <label for="inputPassword" class="sr-only">Estado</label>
        <input type="text" id="inputEmail" class="form-control" placeholder="Country" required>
      
        <label for="inputPassword" class="sr-only">Cidade</label>
        <input type="text" id="inputPassword" class="form-control" placeholder="City/UF" required>
      
        <button class="btn btn-lg btn-block" type="submit">Registrar-se</button>
        <p class="mt-5 mb-3 text-muted">&copy; 2017-2018</p>
      </form>
    


    
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>

    <script type="text/javascript">
        $(".dropdown-toggle").dropdown();
    </script>
</body>
</html>

Browser other questions tagged twitter-bootstrap bootstrap collapse

You are not signed in. Login or sign up in order to post.