Twitter bootstrap book PDF


Télécharger Twitter bootstrap book PDF

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


Twitter bootstrap book PDF [Eng]

...

Chapitre 1 Qu'est-ce que Twitter Bootstrap?

En plus d’être une aubaine pour le développeur habituel, Twitter Bootstrap est un framework d’interface utilisateur CSS et JavaScript qui a été écrit par deux développeurs expérimentés de Twitter afin de s’assurer qu’ils ont une apparence cohérente dans tous les projets qu’ils ont créés pour Twitter à la temps. Maintenant, oui, je peux déjà entendre les gémissements: "Pas un autre cadre d’interface utilisateur! Nous avons déjà jUuery ​​UI et Kendo UI et un million d’autres, pourquoi avons-nous besoin d’un autre?" Twitter Bootstrap (TWB) est différent. Son but est ne pas créer de dialogues ni d’effets glissants (même s’ils le font assez bien), et n’a pas pour objectif de vous permettre d’appliquer des thèmes à vos créations. TWB est conçu pour vous aider à équilibrer vos mises en page et vos conceptions. Je ne suis pas un concepteur, je suis moi-même développeur, mais j’ai lu plusieurs articles sur ce sujet et deux des choses les plus importantes à savoir lors de la conception d’une interface utilisateur sont l’équilibre entre vos éléments de mise en page et l’harmonie de votre Couleurs choisies. L'harmonie des couleurs est facile à comprendre, mais l'équilibre est un peu plus délicat. L'équilibre signifie qu'il y a de la cohérence et une fluidité dans votre interface utilisateur. Cela signifie que les proportions sont égales, même lorsqu'elles ne le sont pas, et que les tailles de police sont toujours réduites à l'échelle. les mêmes ratios et poids, parmi beaucoup d'autres choses. TWB vous aide o atteindre cet objectif de manière très standard en fournissant non seulement des tailles de grille standard et des outils de mise en page, mais également en fournissant un ensemble standard de règles CSS de base pour différentes en-têtes, tailles de texte, barres latérales, puits, texte principal, etc. . La partie magique, cependant, est qu'il a été conçu par des développeurs pour des développeurs; dans la plupart des cas, il suffit d'ajouter une simple classe ou des attributs de données HTML 5. Dans ce livre, je vais vous présenter votre première visite de Twitter Bootstrap et, espérons-le, vous rendre la vie un peu plus supportable lorsque vous utilisez des types uniquement visuels.

Chapitre 2 Ajouter Bootstrap à votre projet

Alors, maintenant que j'ai votre attention, comment pouvons-nous ajouter cette magie à nos projets? Tout d’abord, il s’agit uniquement de CSS et de JavaScript; il vous suffit donc de les attacher de la manière habituelle en ajoutant des liens et des balises de script dans votre code HTML. Cependant, pour en avoir pour votre argent, il existe un moyen bien défini par lequel les gens de TWB vous recommandent de câbler les choses. Plus sur cela dans un instant. Premières choses d'abord. Rendons-nous sur le site TWB et téléchargerons ce dont nous avons besoin.

Remarque: au moment de la rédaction de ce livre, la version 2 de Bootstrap était la version actuelle et la version 3 en était encore à l’essai. Depuis lors, cependant, la version 3 n’a plus été testée et la version 2 n’est plus aussi largement utilisée. Ce livre est écrit en utilisant les classes CSS de la version 2, donc si vous utilisez la version 2, tout devrait bien se passer. Si, toutefois, vous utilisez la version 3, vous devez savoir que des changements importants ont été apportés aux noms de certaines règles CSS. Heureusement, les créateurs du framework ont ​​créé un tableau de conversion qui montre exactement ce qui a changé. Ce tableau de conversion est disponible à l'adresse http://getbootstrap.com/getting-started/#migration. La documentation originale de la version 2 est toujours disponible mais elle se trouve dans un sous-dossier du site (comme indiqué ci-dessous).

À partir de là, si vous cliquez sur le gros bouton bleu Download Bootstrap, il téléchargera le fichier zip principal, complet et non personnalisé, qui contient tout ce dont vous aurez besoin pour utiliser TWB.



Choix de téléchargement

Comme beaucoup de paquets, TWB peut être personnalisé de différentes manières.

L'un de ses points forts est que tout le framework est construit avec "Less", le préprocesseur CSS.

Avec "Moins", vous pouvez définir des variables et des constantes dans votre code CSS, qui peuvent ensuite être remplacées au moment de la génération / du déploiement pour apporter des modifications systémiques à l'apparence de votre projet.

Cela signifie que vous pouvez, par exemple, définir quelque chose comme Orange = # FF6000.

Ensuite, vous pouvez vous y référer dans les autres zones de votre code de la manière suivante: background-color: Orange; bordure: 1px en pointillé orange;

Ou quelque chose de similaire.

La page de personnalisation sur le site TWB vous permet de modifier toutes les valeurs utilisées pour des éléments tels que les tailles, les couleurs, les polices, etc., ainsi que de choisir exactement les modules à ajouter ou non au téléchargement final.

Pour l'instant, cependant, nous allons simplement utiliser le téléchargement que vous pouvez obtenir en cliquant sur le bouton bleu. Nous reviendrons sur ce qui peut et ne peut pas être personnalisé plus tard. Si vous avez déjà cliqué sur le bouton de téléchargement, dans votre dossier de téléchargement, vous devriez maintenant avoir un fichier appelé Bootstrap.zip. Si vous cliquez sur ce fichier, il devrait s'ouvrir dans n'importe quelle application de votre système gérant les fichiers d'archive zip. Je suis sous Windows 7 et j'utilise 7-Zip. Une fois que votre gestionnaire de fichiers zip ouvre, vous devriez voir un certain nombre de dossiers similaires à l'image suivante:

Le dossier CSS contient les feuilles de style TWB principales. Notez que ceux-ci sont déjà prétraités et que les commandes "Less" ont été transformées en instructions CSS réelles. Le dossier JS contient les principaux fichiers JavaScript TWB. Les fichiers ici seront différents si vous avez effectué un téléchargement personnalisé et que vous avez choisi de ne pas inclure certaines des fonctionnalités fournies par TWB. Le dossier IMG contient les fichiers graphiques nécessaires à TWB pour afficher les petites icônes bitmap qu’il contient dans son package.

TWB a des définitions dans ses fichiers CSS aux lignes 2285 et 2309 environ; ces définitions montrent que le dossier IMG doit être dans le même dossier que le CSS. Si vous avez besoin de changer l'emplacement, vous devrez également modifier les règles dans le fichier CSS. Personnellement, je supprime généralement les informations de chemin, puis je place les fichiers dans le même dossier que mes fichiers CSS. Cependant, pour le moment, nous supposerons simplement que les trois dossiers seront à la racine de votre site Web.

Les dossiers individuels

CSS

Dans le dossier CSS, vous trouverez quatre fichiers différents. Ceux-ci devraient être comme suit:

Les versions «minifiées» sont conformes aux attentes: il s'agit des versions de taille réduite des feuilles de style afin de réduire le temps de téléchargement lorsque votre site est accessible à partir d'un navigateur distant. Les versions nonminified sont riche en matière grasse, avec des commentaires, des espaces blancs, et tout le reste. Le CSS est disponible en deux variétés. Le premier est juste une version standard non réactive. Cette feuille de style définit les grilles, les mises en page, les polices et tout ce qui est documenté par TWB. Cependant, il ne fournit pas de règles permettant à la mise en page de redimensionner de manière fluide lorsque votre site Web est visualisé sur un appareil mobile (qu’il s’agisse d’une tablette, d’un smartphone ou d’un autre écran de taille réduite). La version "responsive", en revanche, inclut les bits supplémentaires nécessaires pour l'ajouter à votre mise en page. En règle générale, vous incluez la feuille de style principale lors de la conception de votre mise en page. Ensuite, une fois que vous avez terminé, vous devez inclure les règles responsive juste après votre lien CSS principal. Cela remplacera les règles de la feuille principale dont il a besoin, permettant ainsi les fonctionnalités réactives de votre site. Dans la nouvelle version 3, tout est désormais intégré, car la version 3 a une stratégie mobile First. On s’attend à ce que vous travailliez dans le sens opposé.



Nous ne traiterons pas du contenu réactif avant la fin du livre. Pour le moment, le seul élément auquel vous devez vraiment prêter attention est la feuille de style principale.

JS

Dans le dossier JS, vous devriez (si vous utilisez le téléchargement principal non personnalisé) rechercher les fichiers suivants:

Comme avec le CSS, le fichier minifié est une version de taille réduite conçue pour la version déployée de votre site Web. Le fichier JS principal est le seul nécessaire si vous n'avez pas encore décidé de le personnaliser. Si vous utilisez un téléchargement personnalisé, vous pouvez y trouver des modules distincts tels que Modal.js ou ScrollSpy.js, mais en général, je ne me préoccupe pas de personnaliser les fichiers JS car il est beaucoup plus facile de les gérer dans un fichier.

IMG

Comme mentionné précédemment, vous devriez trouver deux fichiers PNG ici. Ce sont les icônes de glyphes, un jeu est noir, l'autre jeu est blanc. Ils sont utilisés pour rendre les icônes fournies avec la structure. Avant de poursuivre, copiez les trois dossiers de votre fichier zip, tels quels, dans le même dossier que celui dans lequel vous allez créer vos fichiers HTML de base et vos modèles. Dans mon cas, cela ressemble à ceci:

La méthode recommandée pour ajouter les fichiers à votre projet

Alors, nous en arrivons enfin à la bonne partie.

Comme je l'ai déjà mentionné, les responsables de TWB vous recommandent d'utiliser le code HTML 5 suivant comme base pour tous vos projets basés sur TWB:

<! DOCTYPE html>

 

 <tête>

  Mon site

 <! - Le code de document va ici ->



62