Collapse and no dropdown works?

Question

Collapse and no dropdown works?

Navigation

#1 by (1 votes)

1

What goes wrong in the following code, collapse and nor 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

asked by anonymous 08.02.2018 / 02:22

1 answer

How to make an each inside an append? I'm having a problem with code in the json request generated from php

score 1 · Accepted Answer

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

Notice that the CDNs must first come (links with the .js that you will need) and then it should come with <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><scriptsrc="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><scriptsrc="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. Actually any% of% that you use that uses jQuery for example should always come below jQuery indexing p>

Another example:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scripttype="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><scriptsrc="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><scriptsrc="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>