Effets des options coulissantes jQuery

<style type="text/css">
.demo { remplissage : 2em 0 ; arrière-plan : #fff ; }
a: survol, a: focus { contour : aucun ; décoration de texte : aucune ; }
.tab .nav-tabs { border-bottom : aucun ; position : relative ; }
.tab .nav-tabs li { marge-droite : 60px ; indice z : 1 ; }
.tab .nav-tabs li:after { content: ""; largeur : 100 % ; bordure : 1px solide #ccc6c6 ; position : absolue ; haut : 50 % ; à droite : -60 % ; indice z : -1 ; }
.tab .nav-tabs li:last-child:after { border: none; }
.tab .nav-tabs li a { display: block; remplissage : 15px 20px ; arrière-plan : #fff ; taille de police : 15 px ; poids de la police : 600 ; couleur : #956cae ; transformation de texte : majuscule ; rayon de bordure : 0 ; marge droite : 0 ; bordure : 2px solide #956cae ; position : relative ; débordement caché; indice z : 1 ; transition : tous les 0,3 s facilitent les 0 ; }
.tab .nav-tabs li.active a, .tab .nav-tabs li a:hover { color: #fff; bordure : 2px solide #956cae ; }
.tab .nav-tabs li a:after { content: ""; bloc de visualisation; largeur : 100 % ; hauteur : 0 ; position : absolue ; haut : 0 ; gauche : 0 ; indice z : -1 ; transition : tous les 0,3 s facilitent les 0 ; }
.tab .nav-tabs li.active a:after, .tab .nav-tabs li a:hover:after { hauteur : 100 % ; arrière-plan : #956cae ; }
.tab .tab-content { remplissage : 20px 10px ; marge supérieure : 0 ; taille de police : 14 px ; couleur : #999 ; hauteur de ligne : 26 px ; }
.tab .tab-content h3 { taille de police : 24 px ; marge supérieure : 0 ; }

Écran @media uniquement et (largeur maximale : 767 px) {
.tab .nav-tabs li { marge : 0 25px 0 0 ; }
}

Écran @media uniquement et (largeur maximale : 479 px) {
.tab .nav-tabs li { largeur : 100 % ; alignement du texte : centre ; marge : 0 0 10px 0 ; }
.tab .nav-tabs li:après { largeur : 0 ; hauteur : 100 % ; en haut : automatique ; bas : -60 % ; à droite : 50 % ; }
}
</style>

L'application jQuery+Bootstrap est également compatible avec les applications jQuery+Bootstrap.有动画效果。