Best book for bootstrap pdf [Eng]


Télécharger Best book for bootstrap pdf [Eng]

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

Télécharger aussi :


best book for bootstrap pdf [Eng]

...

Qu'est-ce que Bootstrap

Bootstrap est un produit Open Source de Mark Otto et Jacob Thornton qui, lors de la publication initiale, étaient tous deux employés de Twitter. Il était nécessaire de normaliser les ensembles d'outils frontaux des ingénieurs de l'ensemble de la société. Dans l'article de blog de lancement, Mark Otto présente le projet comme suit:

Dans les premiers temps de Twitter, les ingénieurs utilisaient presque toutes les bibliothèques avec lesquelles ils étaient familiers pour répondre aux exigences du système frontal. Les incohérences entre les applications individuelles ont rendu difficile leur dimensionnement et leur maintenance. Bootstrap a commencé comme une réponse à ces défis et s’est rapidement accéléré lors du premier Hackweek de Twitter. À la fin de Hackweek, nous avions atteint une version stable que les ingénieurs pourraient utiliser dans l’ensemble de la société.

Depuis son lancement en août 2011, Bootstrap est devenu très populaire. D'un projet entièrement basé sur CSS, il a évolué pour inclure une multitude de plugins Javascript et d'icônes qui vont de pair avec les formulaires et les boutons. À sa base, il permet une conception Web ré- fective et dispose d'une grille robuste de 12 colonnes et de 940 pixels de large. L’un des points forts est l’outil de compilation disponible sur le site Web de [Bootstrap’s] (http://getbootstrap.com), dans lequel vous pouvez personnaliser la construction selon vos besoins, en choisissant les fonctionnalités CSS et Javascript que vous souhaitez inclure sur votre site. Tout cela permet de catapulter le développement Web frontal, en s'appuyant sur une base stable de conception et de développement tournés vers l'avenir. Démarrer avec Bootstrap est aussi simple que de déposer du CSS et du Javascript à la racine de votre site.

Le démarrage d’un projet nouveau, Bootstrap est livré avec une poignée d’éléments utiles pour vous aider à démarrer. Normalement, lorsque je commence un projet, je commence avec des outils tels que la réinitialisation CSS d’Eric Meyer, et je lance mon projet Web. Avec Bootstrap, il vous suffit d'inclure le fichier CSS bootstrap.css et éventuellement le fichier Javascript bootstrap.js dans votre site Web et vous êtes prêt à commencer.

Structure du fichier d'amorçage

 bootstrap /

 ├── css /

 ├── ├── bootstrap.css

 St ├── bootstrap.min.css

 ├── js /

 ├── bootstrap.js

 ├── bootstrap.min.js

 ├── img /

 ├── glyphicons-halflings.png

 ├── glyphicons-halflings-white.png

 └── LISEZMOI.md

Le téléchargement Bootstrap comprend trois dossiers: css, js et img. Pour plus de simplicité, ajoutez-les à la racine de votre projet. Sont également incluses les versions minifiées de CSS et Javascript. Les versions non compressées et minifiées n'ont pas besoin d'être incluses. Par souci de brièveté, j'utilise le code non compressé pendant le développement, puis je passe à la version compressée en production.

Modèle HTML de base

Normalement, un projet Web ressemble à ceci:

Mise en page HTML de base.

<! DOCTYPE html>

<html>

 <tête>

 <title> Modèle Bootstrap 101 </ title>

 </ head>

 <body>

 <h1> Bonjour le monde! </ h1>

 </ body>

</ html>

Avec Bootstrap, nous incluons simplement le lien vers la feuille de style CSS et le code Javascript.

Modèle Bootstrap de base.

<! DOCTYPE html>

<html>

 <tête>

 <title> Modèle Bootstrap 101 </ title>

 <link href = "css / bootstrap.min.css" rel = "stylesheet">

 </ head>

 <body>

 <h1> Bonjour le monde! </ h1>

<script src = "js / bootstrap.min.js"> </ script>

 </ body>

</ html>

REMARQUE N'oubliez pas le HTML 5 Doctype.

En incluant <! DOCTYPE html>, tous les navigateurs modernes sont mis en mode standard.

Styles globaux

Avec Bootstrap, un certain nombre d’articles sont pré-construits.

Au lieu d'utiliser l'ancien bloc de réinitialisation qui faisait partie de l'arborescence Bootstrap 1.0, Bootstrap 2.0 utilise Normalize.css, un projet de Nicolas Gallagher faisant partie du Boilerplate HTML5. Ceci est inclus dans le fichier Boot‐ strap.css. En particulier, ces styles par défaut accordent un traitement particulier à la typographie et aux liens.

  • margin a été retiré du corps et le contenu sera ajusté aux bords de la fenêtre du navigateur.
  • couleur de fond: blanc; est appliqué au corps
  • Bootstrap utilise les attributs @baseFontFamily, @baseFontSize et @baseLine Height comme base typographique. Cela permet à la hauteur des en-têtes et à d'autres contenus du site de conserver une hauteur de ligne similaire.
  • Bootstrap définit la couleur du lien global via @linkColor et applique le soulignement de lien uniquement sur: survol

N'oubliez pas que si vous n'aimez pas les couleurs ou si vous souhaitez modifier une valeur par défaut, vous pouvez modifier les paramètres globaux dans tous les fichiers .less. Pour cela, mettez à jour le fichier scaffolding.less ou écrasez les couleurs de votre propre feuille de style figurant sur le site.

Système de grille par défaut

Le système de grille Bootstrap par défaut utilise 12 colonnes, ce qui en fait un conteneur de 940 pixels de large sans fonctions réactives activées. Avec le fichier CSS réactif ajouté, la grille s'adapte à une largeur de 724px et une largeur de 1170px en fonction de la fenêtre d'affichage. En dessous de 767px ports de visualisation, par exemple, sur des tablettes et des appareils plus petits, les colonnes deviennent fluides et s'empilent verticalement. À la largeur par défaut, chaque colonne mesure 60 pixels de large et est décalée de 20 pixels vers la gauche.

Grille HTML de base

Pour créer une présentation simple, créez un conteneur avec une div ayant une classe de .row et ajoutez la quantité appropriée de colonnes .span *. Comme nous avons une grille de 12 colonnes, il suffit d’avoir 12 colonnes au total. Nous pourrions utiliser une disposition 3-6-3,

4-8, 3-5-4, 2-8-2, nous pourrions continuer encore longtemps, mais je pense que vous comprenez l'essentiel.

Disposition de base de la grille.

<div class = "row">

 <div class = "span8"> ... </ div>

 <div class = "span4"> ... </ div>

</ div>

Dans l'exemple ci-dessus, nous avons .span8 et un .span4, ce qui donne 12.

http://jsfiddle.net/whyisjake/b3X7n/embedded/result/

Compenser les colonnes

Vous pouvez déplacer les colonnes vers la droite en utilisant la classe .offset *. Chaque classe déplace la plage sur cette largeur. Ainsi, un .offset2 déplacerait un .span7 sur deux colonnes.

Compenser les colonnes.

<div class = "row">

 <div class = "span2"> ... </ div>

 <div class = "span7 offset2"> ... </ div>

</ div>

Colonnes de nidification

Pour imbriquer votre contenu dans la grille par défaut, à l'intérieur d'un .span *, ajoutez simplement un nouveau fichier .row avec suffisamment de .span * pour additionner le nombre de plages du conteneur parent. Disons donc que vous avez une disposition de deux colonnes, avec un span8 et une span4, et que vous souhaitez incorporer une disposition de deux colonnes à l’intérieur de la disposition, quelle étendue utiliseriez-vous? Pour une mise en page à quatre colonnes?

Exercice 1

Créez une table qui ressemble à ceci:

Tableau 1-1. Employés ORM

Premier Dernier

Sanders Kleinfeld

Karen Tripp

Adam Zaremba

Écrivez votre solution ici:

Premier Dernier

Sanders Kleinfeld

Karen Tripp

Adam Zaremba

Solution

Votre balisage devrait ressembler à ceci:

Employés .ORM



[options = "en-tête"]

| ========================

| Premier | Dernier

| Sanders | Kleinfeld

| Karen | Tripp

| Adam | Zaremba

| ========================

Colonnes imbriquées.

<div class = "row">

 <div class = "span9">

 Colonne de niveau 1

 <div class = "row">

 <div class = "span6"> Niveau 2 </ div>

 <div class = "span3"> Niveau 2 </ div>

</ div>

 </ div>

</ div>

Figure 1-3. Grille de nidification

Système de grille fluide

Le système de grille de fluide utilise des pourcentages au lieu de pixels pour les largeurs de colonne. Il offre les mêmes capacités réactives que notre système à grille fixe, garantissant des proportions appropriées pour les résolutions et les périphériques clés. Vous pouvez rendre n'importe quelle ligne «fluide» en remplaçant .row par .rowfluid. Les classes de colonnes restent les mêmes, ce qui permet de basculer facilement entre les grilles fixes et fluides. Pour effectuer un décalage, vous procédez de la même manière que le système de grille fixe, en ajoutant .offset * à n’importe quelle colonne, afin de décaler le nombre de colonnes souhaité.

Disposition de colonne fluide.

<div class = "row-fluid">

 <div class = "span4"> ... </ div>

 <div class = "span8"> ... </ div>

</ div>

<div class = "row-fluid">

 <div class = "span4"> ... </ div>

 <div class = "span4 offset2"> ... </ div>

</ div>

L'imbrication d'une grille de fluide est un peu différente. Comme nous utilisons des pourcentages, chaque .row réinitialise le nombre de colonnes à 12. Par exemple, si vous étiez dans un .span8, au lieu de deux éléments .span4 pour diviser le contenu en deux, utilisez deux div .span6. C'est le cas du contenu sensible, car nous voulons que le contenu remplisse 100% du conteneur.

Disposition de colonne de fluide de nidification.

<div class = "row-fluid">

 <div class = "span8">

 <div class = "row">

 <div class = "span6"> ... </ div>

 <div class = "span6"> ... </ div>

 </ div>

 </ div>

</ div>

Figure 1-4. Grille de nidification

Dispositions de conteneur

Pour ajouter une mise en page centrée et une largeur fixe à votre page, enveloppez simplement le contenu dans

. Si vous souhaitez utiliser une présentation fluide mais que vous souhaitez tout emballer dans un conteneur, utilisez les éléments suivants:

. L'utilisation d'une disposition fluide est idéale lorsque vous créez des applications, des écrans d'administration et d'autres projets associés.

Conception sensible

Pour activer les fonctionnalités réactives de Bootstrap, vous devez ajouter une balise META à la page de votre page Web. Si vous n’avez pas téléchargé la source compilée, vous devrez également ajouter le fichier CSS réactif. Un exemple de fichiers requis ressemble à ceci:

Meta Tag sensible et CSS.

<! DOCTYPE html>

<html>

 <tête>

 <title> Mon incroyable site Bootstrap! </ title>

 <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

 <link href = "/ css / bootstrap.css" rel = "stylesheet">

Attention! Si vous commencez et constatez que les fonctions respectives de Bootstrap ne fonctionnent pas, assurez-vous que vous avez ces balises. Les fonctionnalités responsive ne sont pas ajoutées par défaut pour le moment, car tout doit être réactif. Au lieu d'encourager les développeurs à supprimer cette fonctionnalité, les auteurs de Bootstrap ont décidé qu'il était préférable de l'activer au besoin.

Qu'est-ce que la conception sensible?

Responsive Design est une méthode permettant de récupérer tout le contenu existant sur la page et de l'optimiser pour le périphérique qui l'affiche. Par exemple, le bureau obtient non seulement la version normale du site Web, mais peut également bénéficier d'une disposition grand écran optimisée pour les écrans plus grands que de nombreuses personnes ont connecté à leur ordinateur. Les tablettes permettent d’obtenir une présentation optimisée, en tirant parti des dispositions en portrait ou paysage de ces appareils. Et puis avec les téléphones, vous pouvez cibler la largeur beaucoup plus étroite des téléphones. Pour cibler ces différentes largeurs, Bootstrap utilise des requêtes de support CSS pour mesurer la largeur de la fenêtre du navigateur, puis, à l'aide de conditions, modifie les parties des feuilles de style chargées. En utilisant la largeur de la fenêtre du navigateur, Bootstrap peut ensuite optimiser le contenu à l'aide d'une combinaison de ratios et de largeurs, mais relève principalement des propriétés minwidth et max-width. Au cœur de son fonctionnement, Bootstrap prend en charge cinq dispositions différentes, chacune reposant sur des requêtes de support CSS. . La disposition la plus grande comporte des colonnes de 70 pixels de large, contrastant avec les 60 pixels de la disposition normale. La disposition de la tablette amène les colonnes à une largeur de 42 pixels, ce qui signifie que chaque colonne devient fluide, ce qui signifie que les colonnes sont empilées verticalement et que chaque colonne correspond à la largeur totale du périphérique.

Tableau 1-2. Requêtes avec les médias réactifs

Label Layout width Largeur de colonne Largeur de gouttière

Grand écran 1200px et plus haut 70px 30px

980px par défaut et jusqu'à 60px 20px

Tablettes Portrait 768px et plus 42px 20px

Téléphones vers tablettes 767px et moins Colonnes fluides, pas de largeurs fixes

Phones 480px et moins Colonnes fluides, pas de largeurs fixes

Pour ajouter des CSS personnalisés en fonction de la requête multimédia, vous pouvez inclure toutes les règles dans un seul fichier CSS, via les requêtes multimédia ci-dessous, ou utiliser des fichiers CSS entièrement différents. Requêtes de média CSS dans la feuille de style CSS.

/ * Grand bureau * /

@media (min-width: 1200px) {...}

/ * Tablette portrait en mode paysage et bureau * /

@media (min-width: 768px) et (max-width: 979px) {...}

/ * Paysage téléphone à tablette portrait * /

@media (max-width: 767px) {...}

/ * Paysage téléphones et bas * /

@media (max-width: 480px) {...}

Pour un site plus grand, vous pouvez vouloir les séparer en fichiers séparés. Dans le fichier HTML, vous pouvez les appeler avec la balise link en tête de votre document. Ceci est utile pour réduire la taille des fichiers, mais augmente potentiellement le nombre de requêtes HTTP s'il est en cours de réponse.

Requêtes de média CSS via la balise link dans le HTML <head>.

<link rel = "stylesheet" href = "base.css" />

<link rel = "stylesheet" media = "(min-width: 1200px)" href = "large.css" />

<link rel = "stylesheet" media = "(min-width: 768px) et (max-width: 979px)" href = "tablet.css" />

<link rel = "stylesheet" media = "(max-width: 767px)" href = "tablet.css" />

<link rel = "stylesheet" media = "(max-width: 480px)" href = "phone.css" />

Classes d'assistance

Bootstrap inclut également une poignée de classes d’aide pour le développement réactif. Il serait préférable de les utiliser avec parcimonie. Quelques cas d'utilisation que j'ai vus impliquent le chargement d'éléments personnalisés en fonction de certaines dispositions. Vous avez peut-être un très bon en-tête sur la mise en page principale, mais sur mobile, vous voulez le réduire, ne laissant que quelques éléments. Dans ce scénario, vous pouvez utiliser la classe .hidden-phone pour masquer des parties ou des éléments dom complets de l'en-tête.

Tableau 1-3. Classes d'assistance aux requêtes multimédia

Téléphones de classe Tablettes Desktops

.visible-phone Visible Caché Caché

.visible-tablet Caché Visible Caché

.visible-desktop Caché Caché Visible



.hidden-phone Caché Visible Visible

.hidden-tablet Visible Caché Visible

.hidden-desktop Visible Visible Caché

En ce qui concerne le développement mobile, vous pouvez envisager le développement de deux manières principales. Le mantra que beaucoup de gens crient maintenant, est que vous devriez commencer par mobile, construire à cette plate-forme et laisser le bureau suivre. Bootstrap force presque le contraire, où vous créez un site de bureau complet qui «fonctionne».

……

CHAPITRE 2 CSS d'amorçage

Le noyau de Bootstrap est constitué d’un ensemble d’éléments HTML de base stylés de manière à permettre une amélioration aisée via des classes et des styles utilisateur.

Typographie

À partir de Typographie, avec la pile de polices par défaut, Bootstrap utilise Helvetica Neue, Helvetica, Arial et sans-serif. Ce sont toutes des polices standard, et incluses comme valeurs par défaut sur tous les principaux ordinateurs, retombant en sans-serif, la capture tout pour dire au navigateur d'utiliser la police par défaut que l'utilisateur a décidé. La taille de police de tous les corps de texte est de 14 pixels, tandis que la hauteur de ligne est de 20 pixels. La balise a une marge inférieure de 10 pixels, soit la moitié de la hauteur de ligne.

Rubriques

Les six niveaux d’en-tête standard ont été stylés dans Bootstrap, avec le <h1> de 36 pixels de hauteur et le <h6> de 12 pixels de hauteur (pour référence, le corps du texte a une hauteur de 14 pixels par défaut). En outre, pour ajouter un sous-titre en ligne à l'un des en-têtes, ajoutez simplement <small> autour de l'un des éléments, et vous obtiendrez un texte plus petit, dans une couleur plus claire. Dans le cas de <h1>, le petit texte a une hauteur de 24 pixels, un poids de police normal (c'est-à-dire, pas en gras) et gris au lieu de noir.

h1 petit {

 taille de police: 24px;

 poids de la police: normal;

 hauteur de ligne: 1;

 couleur: # 999;

 }

Corps de copie

Pour mettre un paragraphe en évidence, ajoutez class = "lead". Cela vous donnera une taille de police plus grande, un poids plus léger et une hauteur de ligne plus grande. Ceci est généralement utilisé pour les premiers paragraphes d'une section, mais peut être utilisé n'importe où.

Accentuation

En plus d'utiliser la balise <small> dans les en-têtes, comme indiqué ci-dessus, vous pouvez également l'utiliser avec une copie de corps. Lorsque <small> est appliqué au corps du texte, la police est réduite à 85% de sa taille d'origine.

Audacieux

Pour ajouter du texte au texte, placez-le simplement dans une balise <strong>. Cela ajoutera font-weightbold au texte sélectionné.

Italique

Pour les italiques, placez votre contenu dans la balise <em>. “Em” dérive du mot “emphasis” et vise à ajouter du stress à votre texte.

Vous pensez peut-être à vous-même, pourquoi ne pas simplement utiliser les balises <b> ou <i> au lieu de <em> ou <strong>. En HTML5, <b> vise à mettre en évidence des mots ou des phrases sans donner d’importance supplémentaire - par exemple, des termes clés ou des noms -, tandis que <i> s’applique principalement à la voix, aux termes techniques, au dialogue interne, etc. Pour plus d’informations sur les changements sémantiques Pour <b> et <i>, consultez l'article de W3.org.

Cours d'emphase

Outre <strong> et <em>, Boootstrap propose quelques autres classes pouvant être utilisées pour mettre l'accent. Celles-ci pourraient être appliquées à des paragraphes ou des étendues.

Classes d'accent.

<p class = "muet"> Ce contenu est muet </ p>

<p class = "text-warning"> Ce contenu comporte une classe d'avertissement </ p>

<p class = "text-error"> Ce contenu comporte une classe d'erreur </ p>

<p class = "text-info"> Ce contenu comporte une classe d'informations </ p>

<p class = "text-success"> Ce contenu comporte une classe de réussite </ p>

<p> Ce contenu est <em> souligné </ em> et peut être <strong> gras </ strong> </ p>.

Figure 2-3. Classes d'accent

Les abréviations

L'élément HTML fournit un balisage pour les abréviations ou les acronymes, tels que WWW ou HTTP. En balisant les abréviations, vous pouvez donner des informations utiles aux navigateurs, aux correcteurs orthographiques, aux systèmes de traduction ou aux moteurs de recherche. Bootstrap styles des éléments avec une bordure en pointillés clairs au bas, et révèle le texte intégral au survol (tant que vous ajoutez ce texte à l'attribut title).

………

Devis de blocs

Pour ajouter des blocs de texte entre guillemets à votre document, ou pour toute citation que vous souhaitez différencier du flux de texte principal, ajoutez la balise <blockquote> autour du texte. Pour de meilleurs résultats et pour les sauts de ligne, placez chaque sous-section dans une balise <p>. Le style par défaut de Bootstrap indente le texte et ajoute une bordure grise épaisse sur le côté gauche. Pour identifier la source de la citation, ajoutez la balise <small>, puis ajoutez le nom de la source entouré d’une balise <cite>. Lorsque vous mettez tout cela ensemble, vous obtenez quelque chose qui ressemble à ceci:

Markquote de bloc.

<blockquote>

 <p> L’incroyable utilisation de Bootstrap témoigne de cette nécessité. Je l'utilise dans tous les logiciels serveur sur lesquels je travaille. Et cela se voit dans le langage de modélisation que je développe, afin que tous les utilisateurs le trouvent «juste là» et qu'il fonctionne, chaque fois que vous souhaitez utiliser une technique Bootstrap. Rien à faire, pas de bibliothèques à inclure. C'est comme si cela faisait partie du matériel. Même approche que celle adoptée par Apple avec le Mac OS en 1984. </ P>

 <small> Développeur de RSS, <cite title = "Titre de la source"> Dave Winer </ cite> </ small>

</ blockquote>

Si vous voulez un <blockquote> avec un contenu aligné à droite, ajoutez simplement .pull-right à la balise. En plus du texte aligné à droite, l'ensemble de la citation est flottant à droite. Cela crée de belles citations à tirer dans votre contenu.

Figure 2-8. Pullqueter Blockquote

Des listes

Bootstrap offre un support et un style pour les trois types de liste principaux proposés par HTML: les listes ordonnée, non ordonnée et de définition. Une liste non ordonnée est une liste qui n’a pas d’ordre particulier et qui est traditionnellement stylée avec des puces.

Liste non ordonnée

Balisage de liste non ordonnée.

<h3> Activités de plein air préférées </ h3>

<ul>

 <li> La randonnée à Yosemite </ li>

 <li> Randonnée dans les arches

 <ul>

 <li> arche délicate </ li>

 <li> Park Avenue </ li>

 </ ul>

 </ li>

 <li> Vélo sur le sentier des pierres de silex </ li>

</ ul>

………

Liste de définition

Le troisième type de liste que vous obtenez avec Bootstrap est la liste de définitions. La liste de définitions diffère de la liste ordonnée et non ordonnée en ce que, au lieu d’avoir un élément <li> au niveau du bloc, chaque élément de la liste peut se composer des éléments <dt> et <dd>. <dt> signifie “terme de définition” et, à l'instar d'un dictionnaire, il s'agit du terme (ou de la phrase) en cours de définition. Par la suite, le <dd> est la définition du <dt>.

Souvent, dans le balisage, vous verrez des personnes utiliser des en-têtes dans une liste non ordonnée.

Cela fonctionne, mais ce n’est peut-être pas le moyen le plus sémantique de baliser le texte. Une meilleure idée serait de créer un <dl> puis d’appeler <dt> et <dd> comme vous le feriez pour l’en-tête et le texte. Cela étant dit, Bootstrap propose des styles propres par défaut et une option pour une disposition côte à côte de chaque définition.



53