web-dev-qa-db-fra.com

Bouton Bootstrap - Pas de curseur de la main

Je développe un projet MVC6 dans Visual Studio 2015. Je viens d'ajouter Bootstrap 3.3.6 à l'aide de Bower. Sur une page html très simple, j'ai référencé le CSS dans l'en-tête et Bootstrap au bas du corps comme suit:

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>

J'ai défini un bouton comme suit:

<button class="btn btn-primary">Hello</button>

Lorsque je débogue le projet (IIS, IE11), le bouton apparaît et est clairement stylé par Bootstrap mais il n’ya pas de curseur de main.

Si j'utilise le navigateur pour accéder à un exemple de bouton de style Bootstrap, par exemple ici: http://www.w3schools.com/bootstrap/bootstrap_buttons.asp , le curseur de la main apparaît correctement. Donc, ce n'est pas mon navigateur qui est en faute.

Quelqu'un peut-il suggérer pourquoi je ne reçois pas de curseur de la main d'un simple bouton stylé Bootstrap, s'il vous plaît?

8
TDC

Essayez d'ajouter role='button' à la place. J'ai eu ce problème même si la documentation sur bootstrap indique que type='button' devrait faire le travail, mais pas le mien.

13
Hieu Chu

Vous devez vous débarrasser des balises button et utiliser simplement des balises ancher avec des classes boostrap. Par exemple:

au lieu de:

<button class="btn btn-primary">Hello </button>

écrire:

<a href="#" class="btn btn-primary">Hello </a>

Cela fera apparaître le curseur de la main lors du survol de la classe btn bootsrtap

1
Diego H. O'Hagan

Essayez d'ajouter un href tel que href = "#" au bouton. 

<button class="btn btn-primary" href="#">Hello</button>

Lorsque vous commencez à modifier les types d'élément et les rôles natifs, il existe d'autres effets secondaires, notamment la manière dont ces éléments interagissent avec l'accessibilité pour les utilisateurs. Voir ce lien MDN pour plus de détails à ce sujet: Button Role

1
DanB

Je cherchais comme vous un moyen d’ajouter cette main, Jusqu’à ce que cette main apparaisse une fois que le formulaire a été rempli. 

<button type="button"  >

au fait )

0
user1767316

Il vous manque le type = "bouton".

Dans bootstrap source less file, plusieurs règles css sont spécifiées pour la règle input [type = "button"]. ( Vérifié pour la version 3.3.6 )

Vous n’êtes peut-être pas obligé de l’utiliser, mais il était destiné à être utilisé avec type = "button".

Dans la page de démonstration des boutons W3School et Bootstrap, ils utilisent type = "button"

Votre code:

<button class="btn btn-primary">Hello</button>

W3:

<button type="button" class="btn btn-default">Default</button>

Si cela ne fonctionne toujours pas après avoir ajouté type = "button" (ou soumettre ou réinitialiser), essayez de regarder votre élément avec inspecteur et voyez ce qui remplace la règle css "pointeur: curseur".

0
Ziv Weissman