L'objectif principal de cet article vous permet d'apprendre à utiliser Twitter Bootstrap pour créer un site dans les 20 minutes. Comment construire un site est introduit ci-dessous:
La première chose à dire est que Twitter Bootstrap est un excellent cadre open source frontal. Il fournit des cas d'utilisation détaillés pour tous les groupes clés, vous permettant de vous attacher facilement à votre conception en copiant et en collant.
Modèles de base HTML
Nous devons utiliser un modèle HTML de base afin que nous puissions inclure le fichier bootstrap dont nous avons besoin. Voici le début de notre projet Bootstrap Twitter, copiez ces codes dans un fichier et nommez-le index.html.
<! Doctype HTML> <A-Head> <Title> Tutoriel Bootstrap Twitter - Un didacticiel de mise en page réactif </Title> <Style Type = 'Text / CSS'> Body {Background-Color: #ccc; } </ style> </ head> <body> </ body> </html>Dans ce code, nous avons ajouté des CSS pour rendre le fond de la page Gray brillant, car de cette façon, nous pouvons facilement voir différentes colonnes dans notre conception, ce qui le rend plus facile à comprendre.
Introduire le fichier de bootstrap Twitter
Afin d'utiliser Twitter Bootstrap, nous n'avons qu'à introduire un fichier dans notre modèle. Il existe de nombreuses façons d'introduire des fichiers. Si vous souhaitez connaître ces méthodes, veuillez consulter les documents pertinents.
Sur la base du point de départ de ce didacticiel, nous présenterons le fichier bootstrap-Combined.min.css via CDN sans télécharger de fichiers.
La copie de code est la suivante: href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel = "Stylesheet">
Twitter Bootstrap CSS prend effet dans nos modèles.
Conteneur de Twitter Bootstrap
La classe de conteneurs de bootstrap est très utile. Il peut créer une zone centrée dans la page, puis nous pouvons mettre le contenu des autres emplacements à l'intérieur. La classe de conteneurs équivaut à créer une boîte DIV centrée avec une largeur statique et une valeur magine d'auto. L'avantage de la classe de conteneurs de Twitter Bootstrap est qu'il est réactif, et il calcule la meilleure largeur en fonction de la largeur de l'écran actuelle à des fins pratiques.
Dans la balise corporelle, utilisez la classe de conteneurs pour créer un div. Il servira de l'emballage extérieur principal pour d'autres codes de la page.
Si vous ajustez la hauteur de cette div et définissez sa couleur de fond en blanc, l'effet que vous voyez sera comme ceci:
Titre et navigation
Maintenant que nous avons un endroit pour ajouter du code HTML supplémentaire, nous pouvons ajouter le texte du titre, puis créer la barre de navigation principale pour le site.
Ajoutez le texte suivant ou le texte que vous avez sélectionné dans la balise DIV de la classe de conteneur.
<h1> Twittrap Tutorial Bootstrap </H1>
Il n'y a pas beaucoup de nouveau maintenant, c'est juste un titre, passons à l'aspect plus intéressant de la navigation Bootstrap Twitter.
Bootstrap a une classe NAV qui nous permet de créer divers éléments de navigation. Vous pouvez ajouter le code suivant après la balise H1.
<div class = 'navbar navbar-inverse'> <div class = 'nav collapse' style = "height: auto;"> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> Page un </a> </li> <li> <a href = "#"> Page deux </a>
Les classes liées à Navbar ont tous les styles de la barre de navigation. L'ajout de la classe Navbar-inverse appliquera un style noir cool, qui est une combinaison courante de Twitter Bootstrap. Je vous suggère de développer ce style pour créer votre navigation unique. Mais dans ce tutoriel, nous utiliserons toujours le style bootstrap de base.
Dans une div avec classe Navbar, nous ajoutons une autre div avec la classe de navigation de navigation et ajoutez la hauteur du style en ligne: auto; Cela indique à bootstrap que lorsque cette page est dans une fenêtre de navigateur d'une largeur inférieure à 970px, il fournira une vue de commutation compressée.
Si vous enregistrez le fichier index.html et l'ouvrez dans le navigateur, vous pourrez voir ce changement lorsque vous ajustez la largeur de la fenêtre du navigateur, comme indiqué sur la figure.
Supérieur à 979px:
Moins de 979px:
De plus, nous pouvons ajouter une classe NAV à un élément de liste HTML non ordonné pour appliquer plus de styles à partir du fichier Bootstrap CSS, ou nous pouvons ajouter une classe active à l'élément de liste "Accueil".
Partagez de merveilleux articles sur la navigation bootstrap: "Navigation qui doit être apprise chaque jour par bootstrap", "navigation qui doit être apprise chaque jour par bootstrap"
Contenu principal et barre latérale
Nous avons terminé la navigation principale du site, et maintenant nous devons ajouter la zone de contenu principale et une barre latérale pour prendre en charge plus de liens ou de chemins de navigation. Veuillez ajouter le code suivant à la barre de navigation.
<div id = 'contenu' class = 'row-fluid'> <div class = 'span9 main'> <h2> section de contenu principale </h2> </ div> <div class = 'span3 Sidebar'> <h2> la barre latérale </h2> </div> </div>
C'est exactement ce que nous devons comprendre sur le système raster de bootstrap. Bien sûr, la documentation officielle de bootstrap couvre plus de détails, mais nous allons commencer par les bases et vous permettre de mieux le comprendre.
Le système raster utilise une disposition de 12 colonnes, ce qui signifie qu'une page peut être divisée en 12 colonnes identiques. L'image suivante obtenue à partir du document officiel de bootstrap donne un bon affichage.
Dans le code que nous venons de collé dans la barre de navigation, vous pouvez voir les classes nommées Span9 et Span3. Ils diviseront la page en deux parties des 9 colonnes à gauche et 3 colonnes à droite, formant notre zone de contenu et notre barre latérale. L'un des avantages de l'utilisation d'un système raster est qu'il calcule dynamiquement la largeur de la colonne en fonction de la largeur de la fenêtre, vous n'avez donc pas besoin d'écrire de requêtes multimédias pour faire fonctionner votre site à n'importe quelle résolution d'écran.
Vous pouvez observer leur effet en modifiant le nombre de portées et en ajustant la taille de votre navigateur. Vous remarquerez que lorsque la zone de contenu est inférieure à 724px, ces colonnes sont empilées verticalement.
Maintenant, nous mettons le texte suivant ou tout autre texte derrière la balise H2 dans la zone de contenu principale, juste pour allonger un peu la page.
Copiez le code comme suit: PSUM DOLOR SIT AMET, CONSECTEUER ADIPISCING ELIT, SED DIAM NONOMMY NIBH EUISMOD TINCIDUNT UT LAOREET DOLORE MAGNA ALIQUAM ERAT VOLUTPAT. Ut wisi enim ad minimum Veniam, quis nostrud exercice sta ullamcorper suscipit lobortis nisl ut aliquip ex ea Commodo consécat. Duis autem vel eum iriure Dolor in Hendrerit in vulputate Velit esse molestie consécat, vel illum dolore eu feugiat nulla facilisis at Vero eros et accumsan et iusto odio dignissim Qui blandit cuilt Lumtatum zzril delenit areis Dolore te feUgaT nulla facalilisi. Nam libérer temporaire cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat faceur possim assum. </p>
<p> tysi non habent clariitatem insitam; EST USUS LEGITITE DANS IIS QUI FACIT EORUM CLARIITATEM. Investigations Démonstration de Clariitre Legende Me Lius Quod II Legunt Saepius. Claritas EST Etiam Process Dynamicus, Quid Sequenceur Mutationem Consuetudium legorum. Mirum est Notare Quam Littera Gothica, Quam Nunc Putamus parum Claram, Anteposuerit Litterarum Format humanitatis par Seacula Quarta Decima et Quinta Decima. Eodem modo tysi, qui nunc nobis viaDur parum clari, fiant sollemnes in futurum. </p>
Maintenant, le site s'affichera comme suit:
Navigation par barre latérale
Vous pouvez voir tous les éléments de navigation que Twitter Bootstrap nous fournit ici (twitter.github.com/bootstrap/components.html#navs).
Nous utiliserons l'onglet vertical pour créer une zone de navigation supplémentaire. Copiez et collez le code suivant dans la balise H2 de la barre latérale.
<ul> <li> <a href = '#'> Un autre lien 1 </a> </li> <li> <a href = '#'> Un autre lien 2 </a> </li> <li> <a href = '#'> Un autre lien 3 </a> </li> </ul>
Ceci est un affichage simple! Le code ci-dessus est littéralement juste une liste non ordonnée avec des classes Nav-Tabs et Nav, mais il crée un panneau de navigation pour nous.
En regardant l'effet final, une page basée sur Bootstrap Twitter est terminée.
Après avoir lu ce tutoriel, vous devriez être en mesure d'utiliser Bootstrap pour créer une page de mise en page réactive de base, comprendre le système de grille et être en mesure d'utiliser Bootstrap pour naviguer, des barres de navigation et comprendre les bases de la conception réactive.
Plus de contenu sur Bootstrap peut également être trouvé dans des sujets spéciaux: "Bootstrap Learning Tutorial"
Tout ce qui précède est les connaissances nécessaires pour utiliser Twitter Bootstrap. J'espère que cela sera utile à l'apprentissage de tous. J'espère que vous pourrez passer plus de temps et rendre parfait. Dans un avenir proche, vous pouvez devenir un expert en bootstrap.