Comment créer un bouton Annuler dans le Bootstrap

J'ai le texte suivant Bootstrap balisage:

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="username">Username</label>
  <div class="col-md-4">
  <input id="username" name="username" type="text" placeholder="" class="form-control input-md" required="" maxlength="8" value="">
  </div>
</div>

<!-- Button (Double) -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit"></label>
  <div class="col-md-8">
    <button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
    <button id="cancel" name="cancel" class="btn btn-default" value="1">Cancel</button>
  </div>
</div>

Quand je clique sur le Create Profile bouton, le formulaire fonctionne très bien me laisser savoir que certains champs sont "Nécessaires". Mais quand je clique sur le Cancel bouton je ne peux pas quitter le formulaire incomplet champs requis.

Est-il une forme bouton annuler de la capacité dans le Bootstrap?

  • Ce que u veux dire en laissant le formulaire? U probablement besoin d'écrire ur propre JS logique pour le bouton, case à cet stackoverflow.com/questions/18407832/...
  • Pourquoi ne pas vous faire juste un bouton à l'extérieur de la forme? Le bouton annuler en dehors de la forme peut agir comme un bouton "retour".
  • En fait par @NaturalLam du lien à l'autre question, j'ai simplement ajouté onclick="window.location='http://example.com';return false;" attribut à la balise button et a obtenu le résultat souhaité. Merci.
InformationsquelleAutor H. Ferrence | 2015-11-02
  1. 11

    Changer votre code de la manière suivante:

    <!-- Button (Double) -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit"></label>
  <div class="col-md-8">
    <button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
    <a href="/link-to/whatever-address/" id="cancel" name="cancel" class="btn btn-default">Cancel</a>
  </div>
</div>
    • Si vous le faites, d'Annuler et de proposer un aspect complètement différent dans le Bootstrap, puisque l'un est un lien et un bouton. Ce n'est pas l'idée.
    • C'est la réponse correcte. Le btn classes de style des liens de la même façon que les boutons. Ils se ressemblent. Dans le même temps, les liens fonctionnent toujours, avec ou sans JavaScript. Le mieux pour l'accessibilité. Sans le codage de frais généraux. (Je voudrais éviter d'utiliser ids, si.)
    • La modification de cette <a class="btn btn-le lien"> serait une meilleure option pour cela.
    • Pour bootstrap 4 (alpha), l'utilisation btn-secondary au lieu de btn-default, sinon il ne sera pas ressembler à un bouton. @probie: Ne pas utiliser btn-link si vous voulez un lien pour ressembler à un bouton. Il rend les boutons ressemblent à des liens, pas l'inverse.
    InformationsquelleAutor Adrian Chrostowski
  2. 2

    suffit de définir un attribut de type reset comme indiqué ci-dessous;

    <button type="reset" class="btn btn-default pull-right">Cancel</button>

    InformationsquelleAutor Emmanuel Aninze