Sortir avec Bootstrap de Twitter

Twitter a récemment lancé Bootstrap, une bibliothèque de styles CSS destinée aux développeurs d'applications Web ayant besoin d'une aide à la conception. La boîte à outils comprend tout, de la disposition de la grille aux boutons et modaux, et fonctionne à peu près sur tous les navigateurs modernes, jusqu'à IE7.

Voyons ce qu'on peut en faire?

Bootstrap est également amélioré par le préprocesseur Less, ce qui ajoute quelques raisons supplémentaires à l’utilisation de Bootstrap, bien que nous excluions la fonctionnalité Less de la portée de ce tutoriel, pour garder les choses simples.

Bootstrap inclut un peu de documentation, mais nulle part il n’explique vraiment comment utiliser la boîte à outils (au lieu de cela, vous n’avez qu’une grande page de démonstration à explorer vous-même). Ainsi, dans cet article, nous allons dépouiller la page exemple de Bootstrap et analyser comment répliquer les éléments couverts par Bootstrap. En fournissant des exemples, nous allons également créer un exemple de page Web entièrement conçue avec Bootstrap.

Ce qui est couvert?

Nous allons examiner les éléments suivants (utilisez les liens pour accéder aux différentes sections):

Le système de grille
Typographie
les tables
Formulaires et boutons
La navigation
Onglets et pilules
Pagination
Alertes et messages d'erreur
Modaux

Le système de grille

Les grilles font partie intégrante de nombreuses conceptions Web. Tout comme un urbaniste conçoit sur une grille, un concepteur Web peut également aligner ses éléments de cette manière. Bootstrap comprend un système de grille d’une largeur totale de 940 pixels, logé à l’intérieur du récipient classe. Il y a seize classes de colonnes différentes, la largeur de chacune augmentant de manière cumulative 60 px à mesure que le nombre augmente, commençant à 40 px. Par exemple, la classe span1 a une largeur de 40px, tandis que la classe span3 a une largeur de 160px.

Comme illustré dans l'image ci-dessus, nous pouvons utiliser une combinaison de différentes classes pour créer une largeur totale égale à 940 pixels, y compris la marge de 20 pixels ajoutée à chacune d'elles. Par exemple, l’utilisation de quatre div.span4 classes signifierait 220 + 20 + 220 + 20 + 220 + 20 + 220, ce qui, une fois la calculette terminée, équivaut à 940 pixels. En enveloppant tout cela dans un rangée Bootstrap explique la marge de vingt pixels sur la dernière colonne en déplaçant le tout de vingt pixels vers l'arrière.

   Colonne n ° 1
 Contenu de la colonne 1.
 
  Colonne n ° 2
 Contenu de la colonne 2.
 
  Colonne n ° 3
 Contenu de la colonne 3.

Le code ci-dessus générera un ensemble à peu près égal de colonnes CSS affichant un contenu minimal. Naturellement, nous pouvons simplement échanger certaines de ces classes ou ajouter / soustraire des balises pour créer différentes mises en page. Une autre caractéristique de la boîte à outils Bootstrap est la possibilité de "sauter" une colonne en la décalant. Les classes de décalage sont, encore une fois, numérotées de 1 à 16 et leurs largeurs suivent le même motif de +60, bien qu’elles incluent maintenant 40 pixels supplémentaires pour compenser les marges gauche et droite de ladite colonne. Par exemple, nous pouvons prendre l’exemple ci-dessus, mais supprimer la colonne du milieu en ajoutant le offset5 classe à la balise de fin. Par exemple:

   Colonne n ° 1
 Contenu de la colonne 1.
 
  Colonne n ° 3
 Contenu de la colonne 3.

C'est assez simple de manipuler ceci avec seulement quelques nombres qui doivent être changés, et l'image au début de cette section devrait être utilisée comme guide pour certaines structures recommandées..

Typographie

La typographie est l’un des éléments principaux de ce didacticiel. Bootstrap est livré avec toutes les étiquettes de typographie pour lesquelles vous voudriez un style, de tout

tag à

et toute la hiérarchie des en-têtes. Honnêtement, c’est un truc de "Développement Web 101" que vous connaissez probablement déjà. Je ne perdrai donc pas votre temps à expliquer comment styliser. C'est assez élémentaire.

Il est important de noter que Bootstrap prend en compte les anciennes balises, devenues obsolètes. Vous ne devriez donc pas vous inquiéter si vous utilisez un CMS qui les utilise ou si vous ne connaissez pas d'alternative..

Citant

Bootstrap a besoin d’être un peu plus expliquée lorsque vous utilisez le logiciel

étiquette. Vous pouvez utiliser la balise seule pour afficher la citation en retrait, avec une bordure grise épaisse à gauche. Cependant, il peut être amélioré en imbriquant d'autres balises à l'intérieur pour attribuer le devis. Quand il s’agit d’ajouter un attribut, il vous suffit d’envelopper le texte de votre citation dans
tag, et la source dans un tag and Bootstrap va automatiquement styler et mettre un tiret devant la source.

Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Entierement posiere erat ante venenatis dapibus posuere velit aliquet.
Connor Turnbull, le 30 août

Vous obtiendrez un résultat similaire à l'image ci-dessous, en fonction du contenu que vous insérez entre le paragraphe et les petites balises..

Des listes

Les listes constituent un autre élément du spectre de la typographie couvert par Bootstrap et sont fournies avec quatre ensembles de styles différents: les listes à puces, les listes à puces imbriquées, les listes ordonnées et les glossaires. Encore une fois, ils ne sont pas si difficiles à utiliser car ils ne s'écartent pas de ce qui est standard en HTML. Comme les listes peuvent être construites de différentes manières, voici un bref récapitulatif sur la façon de les utiliser avec les styles Bootstrap..

Le code ci-dessous est une liste à puces non ordonnée de base qui produira quelque chose de similaire au premier exemple de l'image ci-dessous. Échanger le ul pour un ol pour produire une liste ordonnée, comme celle du deuxième exemple.

Lorem ipsum dolor sit amet

Consectetur élite adipiscing
?

Si vous ajoutez le sans style classe à la liste non ordonnée, les éléments de liste non imbriqués ne seront ni à puces ni ordonnés. Ils apparaîtront comme des lignes régulières, tandis que les éléments imbriqués auront une balle à gauche.

Lorem ipsum dolor sit amet

Consectetur élite adipiscing
?

L'ajout d'une liste de description s'effectue de la même manière que vous le souhaiteriez en dehors de Bootstrap, et donne un exemple similaire au dernier de l'image ci-dessus..

Lorem ipsum

Lorem ipsum dolor sit amet

Consectetur

Consectetur élite adipiscing
?

les tables

Bootstrap est une boîte à outils destinée en partie aux nouveaux concepteurs de sites Web. Il est donc évident que ces éléments ne sont pas destinés à la mise en page. Au lieu de cela, les tableaux sont conçus pour des données tabulaires et Bootstrap permet d’embellir vos données tabulaires avec leurs styles, sans avoir besoin de classes ou d’attributs supplémentaires. Par exemple, nous pouvons examiner un extrait de code HTML normal qui générerait un tableau..

# Prénom Nom de famille La langue

1 Certains Un Anglais

2 Joe Sixpack Anglais

3 Stu Bosse Code

Le code ci-dessus crée la table dans l'image ci-dessous, comme dans l'exemple officiel de Twitter. Il comporte trois lignes de contenu et un en-tête sur quatre colonnes, ce qui est assez standard. Avec peu de manipulations (scratch, pas de manipulation) à la création standard d’une table, Bootstrap applique automatiquement ses styles.

Dans ce cas, il est primordial de ne pas oublier de bien imbriquer vos balises. Les styles ne s'appliquent pas si vous n'emballez pas votre ligne de titre dans un tag, par exemple.

Par défaut, le tableau ne comporte pas de bandes zébrées, des couleurs alternatives pouvant remplir l’arrière-plan de chaque ligne. C’est facile à activer, cependant, en ajoutant simplement le zébré classe à la
tag sans aucune manipulation des lignes ou des pièces individuelles.

?
Enfin, avec l’ajout d’un petit morceau de jQuery, mais aucun changement au code HTML à part l’ajout de sortTableExample comme identifiant du

#
balise, vous pouvez ajouter une fonctionnalité de tri lorsque vous cliquez sur l’en-tête d’une colonne. Cette fonctionnalité nécessite le plug-in Tablesorter 2.0 jQuery, téléchargeable gratuitement. Comme vous l'avez probablement déjà deviné, vous devrez également appeler jQuery pour que cela fonctionne..

?
Formulaires et boutons
La plupart des choses que nous avons déjà abordées sont assez simples, Bootstrap appliquant des styles à votre code avec peu ou pas de changement par rapport à la normale. En éliminant cela, nous pouvons maintenant passer à des tâches qui nécessitent un peu plus d'explications et un peu plus de tutorat..
Formes
Pour les formulaires, vous pouvez utiliser de nombreux styles différents, nous allons donc les examiner individuellement. Vous pouvez ensuite simplement les utiliser en combinaison et les manipuler avec une connaissance préexistante des anciens formulaires HTML classiques.
Tout d’abord, il convient de noter que tout votre formulaire doit être emballé dans un tag, mais vous le savez probablement déjà. Bootstrap vous recommande également d’envelopper vos éléments dans
tags, avec un supplément étiquette.

Lorem ipsum dolor sit amet (vos champs vont ici)

Généralement, la configuration de votre formulaire ne devrait pas différer du code ci-dessus. La seule autre option fournie par Bootstrap consiste à opter pour les formulaires empilés, dans lesquels les étiquettes se trouvent en haut du champ plutôt qu'à gauche. Cela peut être réalisé en ajoutant le forme empilée classe à la étiquette.

Saisie de texte

Pour lancer notre couverture des champs de formulaire, nous allons examiner un champ de saisie standard avec une étiquette. L’extrait de code ci-dessous est essentiellement un Et un tag, enveloppé dans un
tag avec le clearfix classe pour assurer un espacement correct. De plus, le champ réel est encapsulé dans un autre
avec le contribution classe, encore, pour assurer un espacement correct.

Lorem ipsum

Pour des raisons liées à ce tutoriel, je vais ignorer quelques pratiques qui devraient être utilisées dans votre code. Par exemple, chaque entrée doit avoir un identifiant, qui est lié à l'étiquette par l'attribut "pour", et vous voudrez généralement nommer vos champs d'entrée pour les récupérer lors du traitement de vos données. Nous examinons spécifiquement comment utiliser les styles de Bootstrap ici, de sorte que ces types d'attributs ne sont pas inclus dans mes exemples pour essayer de garder les choses aussi simples que possible. Néanmoins, même s’ils sont utilisés conjointement avec Bootstrap, ces tâches ne doivent pas être oubliées..

En ajoutant le xgrande classe à la , le champ de formulaire est élargi.

Nous pouvons désactiver une entrée de la manière habituelle en ajoutant les attributs appropriés, comme illustré dans l'exemple ci-dessous. Les styles de Bootstrap sont ajoutés dans le désactivée classe, qui devrait être ajoutée pour montrer visuellement qu'un utilisateur ne peut pas interagir avec ce champ en le grisant.

Lorem ipsum

Bien que l’approche grisée d’un champ désactivé soit obtenue en utilisant un tag, un non modifiable n'est pas. Au lieu de cela, Bootstrap utilise un simple qui peut être utilisé en conjonction avec une entrée cachée. Ces champs sont utilisés pour des informations que l'utilisateur ne devrait pas éditer, telles qu'une date collectée automatiquement ou une adresse IP..

Lorem ipsum
Lorem ipsum dolor sit amet

Notre dernier regard sur le style des entrées de texte consiste à afficher une aide contextuelle en cas d’erreur. Cela se fait en ajoutant un Erreur classe à la
qui forme le clearfix, et à la se taguer. Ajout d'un tag avec le aide en ligne la classe en dessous ajoute le message d'aide sur le côté droit.

Lorem ipsum
Dolor Sit Amet

Liste déroulante

Un menu déroulant est structuré de la même manière, avec le code habituel utilisé, comme indiqué ci-dessous.

Lorem Ipsum

le xgrande classe à un champ de texte est l'opposé de la moyen classe à un Lorem ipsum dolor sit amet

Ce code générera une seule case à cocher avec une étiquette à droite. Pour en créer un supplémentaire, il suffit de répéter l'élément de la liste et son contenu, puis voil??, Vous avez une liste de cases à cocher. Pour désactiver une case à cocher, ajoutez simplement le désactivée attribuer à la tag, et le désactivée classe à la étiquette. Lorem ipsum dolor sit amet En outre, il existe deux types supplémentaires de cases à cocher qui sont associées à des champs de texte: les cases à cocher ajoutées et à ajouter. Encore une fois, ceci est assez explicite et ressemble beaucoup à un champ de texte normal. Cependant, cette fois-ci, vous devez cocher la case dans un tag (avec le Ajouter classe), et soit le input-prepend ou la input-append classe à parent . Ensuite, tout ce qui reste à faire est de vous assurer de bien mettre l'étiquette et le champ, selon que vous le préfixez ou non.. Lorem ipsum Le code ci-dessus est pour une case à cocher ajoutée, mais, si vous voulez une préfixe, il y a peu à changer. Lorem ipsum Entrées de fichier Les entrées de fichier ressemblent beaucoup aux champs de texte et le code ci-dessous est assez explicite. Créez une entrée de fichier régulière avec le fichier d'entrée classe. Lorem ipsum Zones de texte Le style final de Bootstrap pour les formulaires est la zone de texte. La zone de texte est créée de la même manière que le champ de texte à une ligne. Tout comme l'élargissement d'un champ de texte, la zone de texte possède également sa propre classe pour l'élargir., xxlarge. Lorem ipsum Vous pouvez éventuellement ajouter une petite ligne d’aide sous le champ avec la ligne suivante ajoutée immédiatement après la fin de la procédure. </code> étiquette.</p> <pre><span>Lorem ipsum dolor sit amet</span></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_13.png"> <h3>Boutons</h3> <p>Il est maintenant temps de traiter notre formulaire et nous le faisons normalement en cliquant sur un bouton. Heureusement, Bootstrap couvre les boutons et ils sont super simples à ajouter.</p> <p>Des boutons peuvent être ajoutés via un <code><a></code> ou un <code><button></code> étiquette. Les deux partagent les mêmes classes et auront l'air identiques, mais vous devriez essayer de réserver des boutons pour les actions et des liens pour, ainsi, des liens. Ainsi, par exemple, un bouton serait écrit ainsi:</p> <pre><button>Lorem ipsum</button></pre> <p>Et un bouton identique, mais créé en tant que lien, serait écrit ainsi:</p> <pre>Lorem ipsum</pre> <p>Par défaut, le bouton apparaîtra dans un style gris clair. Cependant, cela peut facilement être remplacé par l’un des quatre autres (bleu clair, bleu, vert et rouge) en appliquant une classe supplémentaire..</p> <ul> <li> <code>primaire</code> pour un bouton bleu qui est l'action principale (par exemple, soumission d'un formulaire)</li> <li> <code>Info</code> pour un bouton bleu plus clair, généralement utilisé pour accéder à l'information</li> <li> <code>Succès</code> pour un bouton vert, utilisé pour signaler le succès</li> <li> <code>danger</code> pour un bouton rouge, généralement utilisé pour des actions irréversibles ou dangereuses telles que la suppression</li> </ul> <pre><button>Primaire</button> <button>Défaut</button> <button>Info</button> <button>Succès</button> <button>Danger</button></pre> <p>Nous pouvons également changer la taille d'un bouton par défaut. Pour l'agrandir, ajoutez simplement le <code>grand</code> classe ou rétrécissez-le avec le (oui, vous l'avez deviné) <code>petit</code> classe.</p> <p>Enfin, pour désactiver un bouton, il suffit d’ajouter le bouton <code>désactivée</code> classe et, dans le cas d'un bouton d'action, définir l'attribut désactivé.</p> <pre><button disabled>Lorem ipsum</button></pre> <p>ou</p> <pre><a>Lorem ipsum</pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_14.png"> <hr> <h2>La navigation</h2> <p>Bootstrap comprend une barre de navigation fixe qui ressemble à celle du site Web de Twitter. La barre est essentiellement composée de trois sections, le lien du titre, les éléments de menu dans la barre de recherche, enfermés dans quelques <code><div></code> balises qui ne valent pas la peine d'expliquer.</p> <p>Dans le code ci-dessous, vous remarquerez un <code><h3></code> balise qui contient le titre. C'est assez facile de modifier cela et d'ajouter votre propre lien et texte.</p> <pre><h3>Lorem ipsum</h3></pre> <p>Ensuite viennent les éléments de menu, qui ne sont que des éléments de liste non classifiés avec des liens. Il est assez simple de dupliquer ces éléments, car ils ne nécessitent aucun style spécifique à Bootstrap, à part le <code>actif</code> classe sur le lien actuel.</p> <pre><ul> <li>Accueil</li> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ul></pre> <p>La dernière liste est pour le menu déroulant. Il comporte un seul élément de liste, avec une autre liste imbriquée qui apparaît au survol. La troisième ligne du code ci-dessous est l'élément de la liste qui apparaît constamment sur la barre de navigation, tandis que la liste commençant à la ligne 4 est les éléments de survol..</p> <pre><ul> <li> Lorem ipsum <ul> <li>Dolor assis</li> <li>Amet Consequeter</li> <li>Assez avec le latin</li> </ul> </li> </ul></pre> <p>Comme vous le remarquerez, l’ajout d’un élément de liste vide avec <code>diviseur</code> la classe ajoutera un séparateur dans le menu déroulant.</p> <p>En cours d’utilisation, votre barre supérieure doit ressembler à quelque chose comme ceci, positionnée tout en haut de votre page.</p> <pre><div> <div> <div> <h3>WebDesignTuts+</h3> <ul> <li>Accueil</li> <li>Tutoriels</li> <li>Des articles</li> <li>Sondages Hebdomadaires</li> </ul> <form> <input type="text" placeholder="Search" /> </form> <ul> <li> Lorem ipsum <ul> <li>Dolor assis</li> <li>Amet Consequeter</li> <li>Assez avec le latin</li> </ul> </li> </ul> </div> </div> </div></pre> <p>Notez que vous voudrez compenser la hauteur de 40 pixels de la barre en haut de votre page, sinon elle chevauchera les premiers éléments de votre page..</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_15.png"> <hr> <h2>Onglets et pilules</h2> <p>Les onglets et les pilules sont incroyablement faciles à créer, car ce ne sont que de vieilles listes régulières. Bien sûr, ils ne fonctionnent pas - Bootstrap concerne uniquement les styles. Construisez simplement votre liste avec le <code>onglets</code> classe pour l'interface à onglets, ou le <code>des pilules</code> classe pour les comprimés. Comme dans la barre de navigation de la section précédente, l’ajout de la <code>actif</code> classe à un élément de la liste le mettra en évidence.</p> <p>Pour le sélecteur d’onglet, utilisez quelque chose de similaire à ceci:</p> <pre><ul> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> <li>Asseoir</li> <li>Amet</li> </ul></pre> <p>Pour utiliser des pilules à la place, remplacez la ligne du haut par la suivante:.</p> <pre><ul></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_16.png"> <hr> <h2>Pagination</h2> <p>Nous passons maintenant à la pagination, qui est sans fonction (comme les onglets et les pilules), mais est toujours stylée dans Bootstrap. Bootstrap gère les boutons de pagination sur les mêmes onglets, dans une liste qui est cette fois encapsulée dans un <code><div></code> avec le <code>pagination</code> classe. Chaque élément de la liste peut contenir un numéro lié (ou des points de suspension), à l'exception des premier et dernier éléments réservés aux liens précédent / suivant. Ceux-ci ont le <code>prev</code> et <code>suivant</code> classes, respectivement.</p> <p>De plus, tout bouton peut être désactivé en ajoutant le bouton <code>désactivée</code> classe, et le lien actif est mis en surbrillance avec le <code>actif</code> classe. Ainsi:</p> <pre><div> <ul> <li>Prev</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>Suivant</li> </ul> </div></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_17.png"> <hr> <h2>Alertes et messages d'erreur</h2> <p>Les barres d’alerte ressemblent beaucoup aux boutons, même si elles sont construites différemment. Chaque message d'erreur est un <code><div></code> tag avec le <code>message d'alerte</code> classe. Il existe quatre types de message, chacun avec une classe correspondante qui doit également être ajoutée:</p> <ul> <li> <code>Attention</code> pour un bar jaune</li> <li> <code>Erreur</code> pour une barre rouge</li> <li> <code>Succès</code> pour un bar vert</li> <li> <code>Info</code> pour un bar bleu</li> </ul> <p>Les messages d’alerte sont ensuite écrits comme suit, en sélectionnant une seule classe parmi <code>avertissement / erreur / succès / info</code>.</p> <pre><div> ? <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur elip adipiscing.</p> </div></pre> <p>Juste pour votre information, la deuxième ligne du code ci-dessus ajoute le "?" à droite du message alter, qui pourrait être lié à une action supprimant le message.</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_18.png"> <p>Les alertes ne doivent pas non plus concerner une seule ligne. Si votre message dépasse une seule ligne, ajoutez simplement le <code>message de blocage</code> classe au code que vous utiliseriez pour une seule ligne, tout en utilisant les différentes classes de type.</p> <pre><div> × <p><strong>Lorem ipsum</strong> Fusce interdum euismod tempor? </p> </div></pre> <p>Ces messages peuvent également contenir des boutons, utiles si l'alerte doit être résolue avec un choix. Si vous revenez à notre section sur les boutons, vous saurez comment les ajouter. Assurez-vous simplement d’utiliser les petites versions, en ajoutant le <code>petit</code> classe au bouton lui-même, et l'envelopper dans un <code><div></code> tag avec le <code>actions d'alerte</code> classe.</p> <pre><div> × <p><strong>Lorem ipsum dolor sit amet!</strong> Fusce interdum euismod tempor? </p> <div> Lorem ipsum dolor sit amet </div> </div></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_19.png"> <hr> <h2>Modaux</h2> <p>Les modaux peuvent être utiles pour afficher des informations dans certains scénarios, couramment utilisés pour la saisie de données telles que les informations utilisateur ou les publications. Le modal de Bootstrap est assez simple et est divisé en trois sections; l'en-tête, le corps et le pied de page. Tout d'abord, nous commençons par ouvrir le modal <code><div></code> tag, et le positionner avec certains styles en ligne que Bootstrap requiert.</p> <pre><div></pre> <p>À l'intérieur de cette balise, nous plaçons ensuite les trois sections, la première étant l'en-tête. L'en-tête a une classe de <code>en-tête modal</code> et ne comprend que deux lignes, un <code><h3></code> balise pour le titre, et le lien (facultatif) "?" qui peut être personnalisé pour fermer le popover.</p> <pre><div> <h3>Lorem ipsum</h3> × </div></pre> <p>Ensuite, nous avons le corps principal du contenu. C'est très simple, être juste un <code><div></code> avec le <code>corps modal</code> classe, et votre contenu à l'intérieur. Comme tel:</p> <pre><div> <p>Lorem ipsum dolor sit amet</p> </div></pre> <p>Enfin, nous avons le pied de page modal (un autre <code><div></code>, cette fois avec le <code>pied de page modal</code> classe) qui consiste généralement en des boutons permettant d’agir. Celles-ci sont générées exactement de la même manière que tous les autres boutons que nous avons créés avec Bootstrap, elles ne nécessitent donc aucune explication supplémentaire..</p> <pre><div> Lorem ipsum dolor sit amet </div></pre> <p>Ok, j'ai menti. Ce n'était pas la dernière étape. Nous devons encore fermer l'original <code><div></code>.</p> <pre></div></pre> <p>Rassemblez toutes ces parties pour ne former qu'une seule et même fenêtre modale. Malheureusement, comme je vous le répète sans cesse, Bootstrap gère littéralement le style ici; le modal n'apparaîtra pas comme s'il avait été sauté. Il serait génial que Bootstrap soit étendu pour avoir quelques fonctionnalités en plus du CSS, mais pour le moment vous devrez générer ou trouver votre propre source..</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_20.png"> <hr> <h2>Dernières pensées</h2> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_21.png"> <p>L'image ci-dessus montre notre conception finale. Il se compose de tous les éléments que nous avons créés dans ce tutoriel (il existe une démo distincte pour les éléments de formulaire), entièrement inclus dans la portée de Bootstrap. J'espère que cet article vous a été utile, d'autant plus qu'il peut être difficile pour certains de déchiffrer la page d'exemple incluse (qui constitue la seule documentation incluse dans le téléchargement)..</p> <p>J'aime Bootstrap. Si vous débutez dans le développement Web, il fournit une grande variété d’éléments à utiliser, même si votre site risque de paraître un peu trop Twitter, par le biais de nombreux éléments partagés. Néanmoins, la simplicité et la facilité d'utilisation sont trop difficiles à ignorer si vous ne voulez pas / ne pouvez pas écrire vous-même. J'ai hâte d'essayer d'utiliser certaines de ces choses dans un nouveau projet.</p> <hr> <h3>Ressources supplémentaires</h3> <p>Utilisation de Less CSS, BluePrint et WP pour un flux de travail plus rapide+<br>Astuce: ne tapez jamais un préfixe de fournisseur à nouveau, Nettuts+<br>Bootstrap From Twitter est le Dream Web AppStorm d'un nouveau concepteur de sites Web<br>Modèles Bootstrap sur ThemeForest</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/webdesign">Création de sites web</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/code/steps-to-becoming-a-quality-wordpress-theme-developer.html">Étapes pour devenir un développeur de thèmes WordPress de qualité</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_14/steps-to-becoming-a-quality-wordpress-theme-developer.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/photography/stepping-into-the-fashion-photography-industry.html">Entrer dans l'industrie de la photographie de mode</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_27_3/stepping-into-the-fashion-photography-industry_5.jpg');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Chercher..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>

#