Comme pour l'étape bootastrap de style Tabs par étape


Bootstrap est un cadre de développement de l'énergie frontale complète et très facile à construire des sites sensibles qui l'utilisent. Bootstrap site officiel offre beaucoup de composants communs css/html, Javascript composants prêts à l'emploi. Dans cet article je vais vous montrer comment utiliser le bootstrap composante javascript onglet pour construire élégante onglet de présentation pour votre site.

Obtenir environnement de bootstrap prêt

Vous devez d'abord télécharger la dernière version du cadre bootstrap. Extraire vers un dossier qui va travailler. Dans l'introduction du site officiel a bootstrap bootstrap base modèle de page Web, vous pouvez copier et de créer la nouvelle page Web. Une fois que vous créez une nouvelle page qui apparaîtra comme suit;




Bootstrap permis base de modèle web

101 Bootstrap modèle Bonjour Le Monde!

Ce modèle vous donnera bonjour message monde comme sortie. Fixons l'environnement réseau, afin d'y inclure d'autres composants bootstrap. Il peut être fait comme suit;

  1. Après la balise body besoin d'envelopper toutes les balises HTML dans un div avec un nom de classe "conteneur". Cette div gardera toutes les commandes HTML dans le centre de la page Web, comme ce est le bootstrap cadre de conteneur utilisé va tourner dans toutes les dimensions de l'appareil. Je voudrais ajouter une nuance de fond pour montrer l'utilisation de l'espace du récipient.
  2. Ajouter la disposition de la grille de base. Avant d'utiliser tout composant bootstrap vous devez utiliser la configuration de la grille. Pour cet exemple, je vais utiliser la structure de grille qui suit;

structure simple grille Bootstrap

Bootstrap onglets!

Maintenant enregistrer et d'actualiser la page, vous obtiendrez la sortie suivante;

onglet par défaut Ajout de mise en page bootstrap

La zone grise sur l'écran est la zone du conteneur et, comme vous pouvez voir est centrée. Maintenant tous ensemble permet d'ajouter l'onglet base de bootstrap composant. Vous pouvez obtenir le code de l'échantillon pour les cartes composant la section bootstrap javascript cartes. Après avoir ajouté la page Web carte de code se présente comme suit;

code Basic onglet Mise en page Bootstrap

Bootstrap onglets!
  • Accueil
  • Profil
  • Messages
  • Paramètres
... ... ... ...

Enregistrez le code et les mises à jour, vous obtiendrez une sortie comme suit;

défaut Bootstrap Tabs

Ce est la base mise onglet bootstrap. Lors du développement de sites Web d'entreprises doivent style dans un design personnalisé. Laissez ces cartes élégantes styles personnalisés en ajoutant.

Ajouter couleur de la bordure pour les cartes de bootstrap

Avant de poursuivre, il est nécessaire d'identifier le défaut styles bootstrap. Vous pouvez le faire en utilisant ne importe quel navigateur. Tous les navigateurs sont des outils de développement, qui vous permettront d'examiner chaque balise html et là styles, débogage JavaScript et beaucoup d'autres. Je utilise le navigateur Chrome, vous pouvez obtenir en appuyant sur les outils de développement de F12. Vous obtiendrez deux nouvelles fenêtres sur le fond, il indique la source html et d'autres spectacles tout le code hérité css. Cliquez sur la recherche à côté de l'élément et survolez l'élément que vous voulez trouver les détails. Il apparaîtra dans la fenêtre css. La fenêtre de développement sera similaire à celui-ci;

Outils de développement Browser

Maintenant, nous sommes conscients styles balise d'ancrage doivent être modifiés pour obtenir des couleurs personnalisé de frontière. Vous pouvez ignorer les classes en ajoutant bootstrap balises de style css sous le lien bootstrap css situé à la section d'en-tête. Dans les grands projets de développement qui utilisent des feuilles de style pour maintenir des styles personnalisés distincts. Permettez-moi de vous montrer ce que les styles doivent ajouter les bords obtiennent seulement autour de toutes les cartes.

Permettez-moi de vous expliquer en détail chaque style. La première ligne de style de code vous donnera la ligne bleue sous les onglets. Mais seulement dans l'onglet actif est caché. Comment l'amorcer? Utilisez marge négative pour élément de liste et chaque onglet sont la frontière-fond transparent.

Lorsque vous ajoutez le second style vous remarquerez que toutes les cartes se sont arrondis frontières, y compris l'onglet actif. Selon la planche à dessin, nous devons mettre la carte dans la bordure inférieure actif transparent. Vous pouvez le faire en ajoutant la troisième ligne de code dans les styles. Une fois que vous enregistrez et actualisez la page, vous verrez sortie comme suit;

Bootstrap onglets avec des bordures personnalisées couleurs

Maintenant, nous devons le style de la zone de contenu. Premièrement, nous devons ajouter un peu de contenu de distinguer chaque carte séparément. Vous pouvez toujours obtenir le contenu de l'échantillon en utilisant le site http://www.lipsum.com/. Une fois que vous ajoutez le code de contenu sera le suivant;

onglets

Bootstrap avec contenu

Bootstrap onglets!
  • Accueil
  • Profil
  • Messages
  • Paramètres

Un onglet

est simplement faux texte de l'industrie de l'imprimerie et de la composition. Lorem Ipsum a été norme fictive texte de l'industrie depuis les années 1500, quand une imprimante inconnu a pris une galère du type et brouillés pour faire un spécimen type.

Tab Two

est simplement faux texte de l'industrie de l'imprimerie et de la composition. Lorem Ipsum a été norme fictive texte de l'industrie depuis les années 1500, quand une imprimante inconnu a pris une galère du type et brouillés pour faire un spécimen type.

Tab trois

est simplement faux texte de l'industrie de l'imprimerie et de la composition. Lorem Ipsum a été norme fictive texte de l'industrie depuis les années 1500, quand une imprimante inconnu a pris une galère du type et brouillés pour faire un spécimen type.

Quatre Tab

est simplement faux texte de l'industrie de l'imprimerie et de la composition. Lorem Ipsum a été norme fictive texte de l'industrie depuis les années 1500, quand une imprimante inconnu a pris une galère du type et brouillés pour faire un spécimen type.

Enregistrez la page et actualiser le navigateur. Un écran se affiche comme ci-dessous

Cartes avec contenu

Ajouter une bordure pour amorcer volet contenu

Maintenant, nous devons continuer de la même frontière pour chaque conteneur. Vous pouvez le faire en ajoutant des styles de carte-box. Nous ajoutons un style de classe style div class "carte-contenu» pour appeler «mon-onglet". Cette nouvelle classe de style l'emporte sur les propriétés par défaut de la classe. Maintenant, vous pouvez ajouter la ligne de code CSS suivant.

.my-Tab .tab-box {border: 1px solid blue;}

Enregistrer et actualiser la page, vous verrez sortie comme suit;

Comme vous pouvez le voir, il ya deux bords supérieurs se chevauchent et nouvel onglet actif a la ligne du bord inférieur. Nous pouvons résoudre ces problèmes en modifiant la frontière de volet supérieur. Classe de style ci-dessus peut être changé comme suit;

.my-Tab .tab-box {border: 1px solid bleu; border-top: 0; }

Enregistrer et d'actualiser la page, vous pouvez remarquer une sortie comme suit;

Remarque avant d'inclure le contenu de chaque onglet volet vous devez utiliser l'amorce du système de grille sinon la mise en page va se rompre.

Ajouter Couleur de fond

Supposons que vous souhaitez affecter une couleur de fond pour les languettes supérieures. Vous pouvez le faire en utilisant les classes de style définies dans la section d'en-tête. Pour cela, vous devez changer la classe de style "#myTab qu'ils" et attribuer une couleur de fond comme suit;

#myTab li a {border-color: blue; background-color: # A5C967; }

Enregistrer et d'actualiser la page, vous verrez sortie comme suit;

onglet actif jeu de couleurs

Par défaut, nous devons montrer l'onglet actif dans une couleur différente. Pour cela, nous devons faire un peu de «ajustement pour la classe de style" #myTab li.active un «comme suit;

#myTab li.active un fond border-color {: transparent; background-color: jaune; }

Ajustement dessus de style fera la couleur de fond carton jaune active. Enregistrer et actualiser la page de sortie sera comme suit;

Ajouter boîte de couleur

Ajoutez de la couleur personnalisée pour le volet de l'onglet. Vous pouvez le faire par classe personnalisée édition de style ".tab-box .my-onglet" en ajoutant la couleur de fond préféré revenir comme suit;

.my-Tab .tab-box {border: 1px solid bleu; border-top: 0; background-color: # F7EFC6;}

Enregistrez la page et mise à jour sera obtenir une page comme suit;

Je espère que vous prenez avec mes choix de couleurs pour l'onglet de présentation. Dans cet article, je ne ai utilisé que des couleurs personnalisées pour montrer comment vous pouvez changer l'apparence et la sensation de l'onglet de présentation bootstrap défaut. Mais, sur la base de la conception peuvent choisir des couleurs ou des images de fond pour les feuilles de style. Tout ce que vous devez faire serait d'affiner les classes de style définies dans cet article.

Vous pouvez regarder les cartes de démonstration en direct bootstrap ici

(0)
(0)

Commentaires - 0

Sans commentaires

Ajouter un commentaire

smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile
Caractères restants: 3000
captcha