Bootstrap est Togglable Onglets - Retrait de contour / orientation ?

Je suis en utilisant Toggable Onglets de Twitter Bootstrap

Le problème que j'ai, Même vous pouvez le voir dans l'exemple aussi. Que lorsque l'utilisateur clique sur l'onglet, L'onglet actif a une bordure pointillée autour d'elle.

J'utilise Firefox 11. Capture d'écran du problème:

Je suis à la recherche pour se débarrasser de la bordure en pointillé. Personne ne sait comment faire cela?

Grâce

Ce qui bordure en pointillé? Je ne peux voir qu'une ligne (qui identifie visuellement l'onglet sélectionné). Quel navigateur utilisez-vous?
Je ne vois pas de bordure en pointillé. Il semble solide pour moi
J'utilise FireFox v11
Voici une capture d'écran que j'ai pris : i42.tinypic.com/e8a9ur.png
Vous trouverez environ 160 000 réponses à cette question ici: google.ca/...
Pour être juste, je pensais que c'était juste un Bootstrap chose que je n'avais pas vu avant. En Plus je ne suis pas canadien, donc pas utiliser google.ca 😉
+1 pour le traitement de mon smartass commentaire avec gentillesse. 🙂
Quelqu'un a observé que si vous cliquez sur l'onglet, il vous montre les lignes pointillées aussi longtemps que vous maintenez votre souris bouton gauche vers le bas. Si en appliquant la solution mentionnés dans cette page, il s'éteint par la suite. Comment faire pour supprimer le contour lorsque la souris bouton gauche est en panne?

InformationsquelleAutor StuBlackett | 2012-03-20

48

essayez d'utiliser outline: 0; sur le lien de l'élément. voir css-tricks.com/removing-the-dotted-outline
```
//line 2576 of bootstrap.css
.nav-tabs > .active > a, .nav-tabs > .active > a:hover { 
outline: 0;
color: #555555;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
```
- C'est l'un. Jamais utilisé le CSS pour le contour avant. Que vais le faire de la croix-navigateur trop?
- ligne n ° est dans nonminified fichier et Bootstrap v2.0.2
- Je pense que c'est un firefox chose. La ligne pointillée ne sera probablement pas dans d'autres navigateurs.
- le outline propriété est disponible pour tous les navigateurs modernes, y compris ie8+
- llich C'est vrai, mais firefox est le seul qui montre une bordure en pointillé sur n'importe quel lien. voir: reference.sitepoint.com/css/outline pour un aperçu complet de la propriété
- ils ont des styles différents, oui. Les Chromes contour est bleu par exemple.
- Sur certains cas (pas en particulier, elle permet de paramètre a:focus { outline: 0; }
- Les gars, ce numéro de la ligne en pointillé autour de l'onglet sélectionné est pour IE11 aussi. Face à un même problème, merci @Tim pour la solution. Problème résolu pour moi. Des acclamations. 🙂
- fonctionne avec bs 3 et SUIV ainsi 🙂
InformationsquelleAutor Tim
11

Vous dire le contour, vous pouvez le supprimer comme suit:
```
.nav-tabs > .active > a, .nav-tabs > .active > a:hover {
  outline:none;
}
```
Bien que je vous suggère de vous laisser, puisque c'est là en partie pour aider les personnes handicapées et les lecteurs d'écran d'affichage de votre contenu correctement, de sorte que vous serait affectant la convivialité en le supprimant.
- C'est exact, et très important. Si vous faire pour supprimer le contour de la propriété, vous DEVEZ le remplacer avec un autre style sur :focus pour les liens et les éléments interactifs. Les utilisateurs qui ne peuvent pas (ou ne préfère pas) à naviguer sur une page avec la souris ont besoin d'une indication visuelle de l'élément qui est actuellement le focus. C'est une exigence sur l'accessibilité.
InformationsquelleAutor Andres Ilich
6

Utiliser CSS suivant dans votre page:
```
html * {
    outline: 0 !important;
}
```
InformationsquelleAutor user3900576
3

Vous pouvez utiliser l'exemple ci-dessous 😉
```
.nav > li > a {
    outline:none;
}
```
InformationsquelleAutor Ricardo Vieira

À résoudre le problème pour Firefox et les autres navigateurs, je voudrais utiliser le code CSS suivant:

/* Remove dotted outline from image inputs */
input::-moz-focus-inner {
  border: 0;
}

/* Remove dotted outline from all links */
a {
 outline: 0;
}

InformationsquelleAutor Graham Swan

2

Qui mettent l'accent frontière est une fonctionnalité d'accessibilité. En le supprimant, vous empêchent certains d'être en mesure d'accéder à votre site. Par certains, je veux dire les personnes handicapées.

Cette vidéo aide à obtenir mon point de vue (il a un handicap moteur). (Voici il les a transmis lorsqu'il carpes sur la suppression de la frontière.)

InformationsquelleAutor Merovex
1

La façon la plus simple, si vous compilez votre CSS de Moins, chute de ce code dans votre moins de fichiers
```
.tab-focus() {
  outline: 0;
}
```
Que c'est.

InformationsquelleAutor thednp
0

Les "personnes handicapées" de la classe ou de l'état lui-même n'est PAS des dispositifs d'assistance.

Je ne sais pas d'où est venue l'information, mais il est complètement faux.
"Désactivé" est un ÉTAT où le bouton ou point d'ancrage est PAS ACTIVÉ. Sens l'utilisateur ne peut pas cliquer dessus. Ou, en cliquant sur elle déclenche aucune action. Les personnes handicapées ne sont pas affecté par l'utilisation de cette balise. BTW - je suis le développeur web/graphiste pour un but non lucratif qui fournit un soutien et des services aux personnes handicapées et je teste mes pages sur une variété de dispositifs, y compris les lecteurs d'écran et autres appareils fonctionnels.

La classe d'un onglet à l'accent est .focus et de la classe pour l'onglet actif est .active.

Conception pour l'accessibilité est essentielle afin de toujours vérifier votre code avec un conforme au W3C validator (comme https://validator.w3.org/). Parfois, j'ai eu de contrôler manuellement l'onglet ou la flèche de l'ordre des onglets sur un site par l'intermédiaire de JavaScript, mais, en général, Bootstrap gère assez bien.

Exemple:
J'utilise le .disabled classe pour les formulaires web tout le temps. J'ai le bouton Soumettre désactivé jusqu'à ce que tous les champs obligatoires contiennent les informations adéquates. Ensuite, il suffit de retirer le .disabled classe et de leur permettre de soumettre.

Cela dit, vous ne besoin d'inclure une bordure concentré/placez les éléments des dispositifs d'assistance. Cela permet à l'utilisateur d'être en mesure de suivre ce qu'ils sont "planant" sur votre site. Comme mentionné ci-dessus, vous pouvez relooker pour mieux s'adapter à votre conception ou que ce soit, mais assurez-vous que vous avez quelque chose à indiquer le focus.

Si quelqu'un a la lutte contre info sur ce que je serais intéressé à le lire.

InformationsquelleAutor Dan Kaufman

Vous devez vous connecter pour publier un commentaire.