<button> non reconnu dans Bootstrap4

0
votes

J'essaie d'obtenir une «icône de réduction» qui flotte à gauche, suivie de Copyright et copie à l'aide de Bootstrap4.

J'ai vu d'autres questions sur ce sujet, mais aucune ne semble vraiment répondre à la question. D'autres questions ont un code différent avec des fautes de frappe évidentes, mais pas mon code. Pourquoi data-toggle et data-target ne sont-ils pas reconnus lorsque vous incluez toutes les dépendances?

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


</head>

<body>

<div class="container">

    <nav class="navbar-nav navbar-expand-sm navbar-fixed-top text-success">
      
        <a class="navbar-brand titleText">Copyright &copy </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseNavBar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div="collapse navbar-collapse" id="collapseNavBar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="link-nav" href="#">Map</a>
                </li>
                <li class="nav-item">
                    <a class="link-nav" href="#">Cart</a>
                </li>
            </ul>
        </div>

    </nav>

</div>
</body>
</html>

.titleText{
    font-size:230%;
    color:green;
    font-weight:heavy;
    letter-spacing:1px;
}

Le bouton n'apparaît pas, juste le texte de la carte et du panier. Si vous avez une solution de contournement, j'apprécierais une solution JS vanille associée à JQuery, car je ne suis pas très expérimenté avec JQuery et préférerais utiliser Javascript. Bouton

javascript jquery html bootstrap-4

4 commentaires

Le bouton bro est utilisé pour le menu de hamburgers, quelle aide voulez-vous de nous?

Wow, c'est presque identique: stackoverflow.com / questions / 46100302 /…

Le double possible de bascule de la barre de navigation Bootstrap 4 ne s'affiche pas

@AshayMandwarya Ce n'est pas la même chose, cette personne a utilisé un code différent donc nos solutions ne seraient pas les mêmes. Ce n'est pas parce que nous partageons un «sujet» similaire que nous partageons une «solution» similaire.

3 Réponses :

1
votes

J'ai fait des corrections de frappe de frappe, la fonctionnalité de bascule fonctionne maintenant avec ce code. Mais des modifications supplémentaires sont nécessaires pour aligner les éléments correctement.

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" 

href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> . 
</script>

<!-- Popper JS -->

<script 
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
>  </script>

<!-- Latest compiled JavaScript -->
<script 
   src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> . 
</script>

<style>    

.titleText{
    font-size:230%;
    color:green;
    font-weight:heavy;
    letter-spacing:1px;
}
</style>

</head>

<body>

<div class="container">

    <nav class="navbar navbar-fixed-top text-success">

        <button class="navbar-toggler" type="button" data-toggle="collapse" 
 data-target="#collapseNavBar">
            <span class="navbar-toggler-icon">Menu</span>
        </button>

        <div class="collapse navbar-collapse" id="collapseNavBar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="link-nav" href="#">Map</a>
                </li>
                <li class="nav-item">
                    <a class="link-nav" href="#">Cart</a>
                </li>
            </ul>
        </div>

        <a class="navbar-brand titleText">Copyright &copy </a>
    </nav>

</div>
</body>
</html>

4 commentaires

Aravindh, peux-tu signaler mes erreurs, je n'arrive pas à les trouver ou à expliquer pourquoi cela n'a pas été rendu correctement

doit être

La balise était manquante.

Heureux de savoir! Mais c'était mon mal de ne pas écrire le HTML aligné qui, je crois, devrait être plus facile pour vous maintenant après ces corrections!

2
votes

Correction de la faute de frappe et mise à jour du code HTML pour afficher la barre de navigation pliable

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


</head>

<body>

<div class="container">

    <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-fixed-top text-success">
   <a class="navbar-brand titleText">Copyright &copy </a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseNavBar">
            <span class="navbar-toggler-icon"></span>
        </button>

  <div class="collapse navbar-collapse" id="collapseNavBar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="link-nav" href="#">Map</a>
                </li>
                <li class="nav-item">
                    <a class="link-nav" href="#">Cart</a>
                </li>
            </ul>
        </div>
</nav>

</div>
</body>
</html>

.titleText{
    font-size:230%;
    color:green;
    font-weight:heavy;
    letter-spacing:1px;
}

0 commentaires

1
votes

si vous utilisez la classe text-success dans votre code, vous ne pouvez donc pas voir la couleur d'arrière-plan de la barre de navigation et la couleur du lien par défaut, je remplace donc text-sucesss par navbar-light bg-light .

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


</head>

<body>

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-fixed-top navbar-light bg-light">
    <a class="navbar-brand titleText">Copyright &copy </a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#collapseNavBar" >
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="collapseNavBar">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Map</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Cart</a>
        </li>
      </ul>
    </div>
  </nav>
</div>
</body>
</html>

1 commentaires

Vous pouvez toujours utiliser la classe text-success dans votre code, voir ma réponse ci-dessous l'a.