Cours gratuits » Cours informatique » Cours développement web » Cours Bootstrap » Bootstrap tutorial italiano pdf de A à Z

Bootstrap tutorial italiano pdf de A à Z

Problème à signaler:

Télécharger



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

bootstrap tutorial italiano pdf de A à Z

...

réglage

Pour implémenter l'application avec Angular et Bootstrap, passons au paramétrage, qui consiste à créer une page HTML et à inclure des fichiers. Commencez par créer un nouveau répertoire chapitre1 et ouvrez-le dans votre éditeur. Créez un nouveau fichier, index.html, et entrez ce code standard:

<! DOCTYPE html>

<html lang = "en">

<Head>

font-size: 8pt;"><meta charset = "utf-8">

<Title> </ title>

</ Head>

<Body>

</ Body>

</ Html>

Ceci est une page HTML standard avec laquelle nous allons travailler après l’intégration de Angular et Bootstrap.

Créez deux dossiers dans le dossier chapter1: css et js. La structure de dossier complète devrait ressembler à ceci.

Installation de AngularJS et Bootstrap

L'installation de ces frameworks est aussi simple que d'inclure des fichiers CSS ou JavaScript sur la page. Nous pourrions le faire avec un réseau de distribution de contenu (CDN) comme Google.

Code ou MaxCDN, mais pour l'instant nous allons récupérer les fichiers manuellement. Examinons les étapes à suivre pour intégrer AngularJS et Bootstrap dans le projet.

Installation de bootstrap

Allez sur http://getbootstrap.com et cliquez sur le bouton Télécharger le bootstrap. Vous obtiendrez un fichier ZIP avec la dernière version de Bootstrap, qui comprend les fichiers CSS, les polices et les fichiers JavaScript. Les versions précédentes incluaient un répertoire d'images, qui dans la version 3 devenait des polices d'icônes.

Pour cette application, pour l'instant, nous ne nous intéressons qu'à un fichier: bootstrap.min.css dans le répertoire css. La feuille de style fournit toute la structure et ces éléments gracieux, entre

boutons et messages d’avertissement pour lesquels Bootstrap est connu. Copiez-le dans le répertoire css du projet et ouvrez le fichier index.html dans l'éditeur de texte.

Intégrer Bootstrap est aussi simple que de connecter le fichier CSS que nous venons de copier. Ajoutez ce qui suit à la balise <head>. Placez cette balise dans l'élément <head> de la page:

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

Installation de AngularJS

Après avoir intégré Bootstrap dans l’application Web, installez Angular.

Visitez https://angularjs.org/ et cliquez sur le bouton Télécharger. Vous verrez quelques options. vous avez besoin de la version stable minifiée.

Copiez le fichier que vous avez téléchargé dans le répertoire js du projet et ouvrez le fichier index.html. Angular peut être intégré à l'application comme n'importe quel autre fichier JavaScript.

Il est préférable de l’inclure dans la balise <head> de la page, sinon certaines fonctions que vous trouverez dans le livre ne seront pas actives. Même si cela n'est pas nécessaire, vous devrez prendre d'autres mesures pour intégrer Angular encore plus loin dans le fichier HTML.

Placez cette balise <script> dans la page <head>.

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

Tout est fait? Presque. Nous devons dire à Angular que nous avons l'intention de l'utiliser dans l'application.

Angular nécessite ce bootstrap, et le framework simplifie grandement cette procédure. Vous devez simplement inclure un autre attribut dans la balise <html> d'ouverture:

<html lang = "en" ng-app>

Le voici! Angular sait maintenant que nous voulons l’utiliser.

NOTE

Angular nous permet également de faire précéder ces attributs de données (par exemple, data-ng-app) au cas où nous voudrions écrire du code HTML5 valide.

Utilisez AngularJS

Nous avons vu beaucoup de théorie à la base de Angular; Le moment est venu de le mettre en pratique. Après avoir créé une application fonctionnelle, nous verrons comment l’embellir avec

Bootstrap.

Rouvrez le fichier index.html, mais cette fois-ci, ouvrez-le également dans le navigateur pour que vous puissiez voir

sur quoi vous travaillez. Voici d'où nous venons:

<html lang = "en" ng-app>

<Head>

<meta charset = "utf-8">

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

<Title> </ title>

<script type = "text / javascript" src = "js / angular.min.js"> </ script>

</ Head>

<Body>

</ Body>

</ Html>

Nous avons défini Bootstrap et Angular et nous avons initialisé l'application avec l'attribut ng-app dans la balise d'ouverture <html>; Passons maintenant rapidement à l'action.

Nous allons faire une application Hello, World un peu différente. INVEC

Nous devons maintenant inclure la saisie de texte et spécifier le modèle que nous avons l'intention d'utiliser. Le modèle peut être de n'importe quel type, mais dans ce cas, ce sera une chaîne que l'entrée retournera:

<type d'entrée = "texte" ng-model = "nom">

L'attribut ng-model déclare la liaison du modèle sur cet élément et tout ce que nous tapons dans le champ de texte lui sera associé par Angular. Évidemment, il ne sera pas affiché comme par magie sur la page; nous devrons dire au cadre où le répéter. Pour afficher le modèle sur la page, insérez simplement le nom entre des doubles accolades:

{{Name}}

Placez-le à la place de Monde dans la balise <h1> et actualisez la page dans le navigateur. Si vous tapez votre nom dans le champ de texte, vous verrez qu'il est automatiquement affiché dans l'en-tête en temps réel. Angular le fait pour vous sans avoir à écrire une seule ligne de JavaScript.

Un bon résultat, mais il serait sage d’avoir un paramètre par défaut qui évite de donner l’impression que cela ne fonctionne pas avant même que l’utilisateur n’écrit son nom.

Heureusement, tout ce qui est entre les accolades est analysé comme une expression AngularJS. Vous pouvez donc vérifier si le modèle a une valeur. sinon, il peut répéter World. Dans Angular, il s’agit d’une expression, et il suffit d’ajouter le double tuyau comme dans JS:

{{nom || 'Monde'}}

NOTE

De cette manière, Angular décrit une expression: "Des fragments de code similaires à JavaScript, généralement placés dans des liaisons telles que {{expression}}."

Il est à noter qu'il s'agit de JavaScript et c'est pourquoi nous devons insérer des guillemets pour indiquer qu'il s'agit d'une chaîne et non du nom d'un modèle.

Si vous essayez de les supprimer, vous verrez que Angular n’affiche plus rien. Cela se produit car le nom et les modèles mondiaux ne sont pas définis.

Ces modèles peuvent être définis directement dans le code HTML à l'aide, comme nous l'avons vu, d'un attribut, mais il est également possible de leur attribuer une valeur à partir d'un contrôleur. Pour ce faire, créez un nouveau fichier JS, controller.js, et incluez-le dans l'application:

<script type = "text / javascript" src = "js / controller.js"> </ script>

Insérez-le après avoir inclus Angular sur la page pour éviter les erreurs.

Les contrôleurs sont simplement des fonctions que Angular peut utiliser.

examinons-en un:

fonction AppCtrl ($ scope) {

}

Ici nous avons déclaré le contrôleur (essentiellement une fonction simple du constructeur JavaScript) et nous y avons entré la portée. La portée est ce que nous pouvons accéder dans la vue. Plusieurs contrôleurs et plusieurs étendues peuvent exister sur une seule page. C’est fondamentalement un objet JavaScript de nos modèles et de nos fonctions, sur lequel Angular exploite sa magie; par exemple, la portée de notre application pour le moment à notre application. Pour l'instant, l'application est mal alignée à gauche et tout semble trop dense; allons avec un peu d'échafaudage. Bootstrap offre d’abord un excellent système de grilles mobiles réactives que nous pouvons utiliser en ajoutant des divs et des classes.

Cependant, dans un premier temps, nous enfermons le contenu dans un conteneur pour passer immédiatement une petite commande.

NOTE

Le concept de mobile first consiste à concevoir / développer principalement pour des écrans plus petits et à ajouter des éléments à la conception au lieu de les éliminer.

<div class = "conteneur">

<h1> Bonjour, {{name || 'Monde'}} </ h1>

<type d'entrée = "texte" ng-model = "nom">

</ Div>

Si vous redimensionnez la fenêtre du navigateur, vous devriez commencer à examiner l'adaptabilité du framework et voir la fenêtre se réduire. Ce serait peut-être une bonne idée de l'inclure dans la terminologie de Bootstrap qui est un Jumbotron (dans les versions précédentes, cela s'appelait Hero Unit). Cela fera ressortir le titre beaucoup plus. Nous pouvons obtenir ce résultat en entourant les balises

<h1> et <input> dans une nouvelle division associée à la classe jumbotron:

<div class = "conteneur">

<div class = "jumbotron">

<h1> Bonjour, {{name || 'Monde'}} </ h1>

<type d'entrée = "texte" ng-model = "nom">

</ Div>

</ Div>

Cela semble beaucoup mieux, mais le contenu est encore trop proche du haut de la fenêtre du navigateur. Nous pouvons introduire une amélioration supplémentaire avec un en-tête de page, même si le champ de texte semble toujours déplacé. Tout d'abord, nous définissons l'en-tête de page:

<div class = "conteneur">

<div class = "page-header">

<h2> Chapitre 1 <small> Bonjour le monde </ small> </ h2>

</ Div>

<div class = "jumbotron">

<h1> Bonjour, {{name || 'Monde'}} </ h1>

<type d'entrée = "texte" ng-model = "nom">

</ Div>

</ Div>

J'ai entré le numéro et le titre du chapitre. La balise <small> dans la balise <h2> distingue effectivement le numéro du titre du chapitre.

La classe en-tête de page ajoute plus de marge et de marge, plus un bord inférieur mince. Le dernier élément que nous pourrions améliorer est la zone de texte. Bootstrap offre de très bons styles de texte et vaut la peine d’être utilisé. Nous devons d’abord ajouter la classe de contrôle de formulaire à la saisie de texte.

De cette manière, la largeur sera réglée à 100% et certains aspects stylistiques seront améliorés, tels que les bords arrondis et une lueur lorsque l'élément obtient le focus:

<input type = "text" ng-model = "name" class = "form-control">

C'est beaucoup mieux, mais ça a quand même l'air un peu petit comparé à l'en-tête. Bootstrap propose deux autres classes permettant de réduire ou d’élargir l’élément, respectivement input-lg et input-sm. Dans ce cas, nous choisissons la classe input-lg et l'ajoutons à l'entrée:

<input type = "text" ng-model = "name" class = "form-control input-lg">

Nous devons encore résoudre la question de l'espacement car elle est trop proche de la balise <h1>. C'est peut-être une bonne idée d'ajouter une étiquette pour que l'utilisateur comprenne qu'il doit taper dans la case. Bootstrap nous permet de faire d'une pierre deux coups parce qu'il comporte une marge dans l'étiquette:

<label for = "name"> Entrez votre nom </ label>

<type d'entrée = "texte" ng-model = "nom" classe = "contrôle de formulaire entrée-lg" id = "nom">>

quiz

  1. Comment Angular est-il initialisé sur la page?
  2. Qu'est-ce que vous utilisez pour afficher une valeur de modèle sur la page?
  3. Qu'est-ce que correspond à l'acronyme MVC?
  4. Comment crée-t-on un contrôleur et comment dit-on à Angular que nous avons l’intention de l’utiliser?
  5. Dans Bootstrap 3, quel est le nouveau nom de Hero Unit?

Résumé

Notre application est magnifique et fonctionne comme il se doit; résumez ce que nous avons appris dans ce premier chapitre.

Nous avons d’abord constaté à quel point il est facile d’installer AngularJS et Bootstrap, y compris un seul fichier JavaScript et une seule feuille de style. Nous avons également examiné comment une application angulaire est initialisée et nous avons commencé à créer notre première application.

L'application Hello, World que nous avons créée, bien que très simple, illustre certaines des fonctionnalités de base d'Angular:

expressions;

balais;

modèles;

liaison de données bidirectionnelle.

Tout cela était possible sans écrire une seule ligne de JavaScript; En fait, le contrôleur que nous avons créé était utilisé uniquement pour illustrer la liaison bidirectionnelle et n'était pas un composant obligatoire de l'application.

Avec Bootstrap, nous avons utilisé certains des nombreux composants disponibles, notamment les classes jumbotron et en-tête de page, pour donner à l'application un style et une substance.

Nous avons également vu le nouveau premier design mobile réactif entrer en action sans avoir à surcharger le balisage avec des classes ou des éléments inutiles.

Dans le chapitre 2, nous examinerons plus en détail certaines caractéristiques fondamentales d’AngularJS et de Bootstrap et présenterons le projet que nous mettrons en œuvre au cours du livre.

Chapitre 2 Développer avec AngularJS et Bootstrap

Après avoir officiellement créé la première application utilisant AngularJS et Bootstrap, il est temps de faire un bond en avant.

Dans ce livre, vous utiliserez les deux cadres pour développer une application de gestion des contacts avec recherche, création, modification et suppression de texte.

Nous examinerons une base de code pouvant être maintenue et exploiterons tout le potentiel des deux frameworks. Nous commençons à développer!

réglage

Nous créons rapidement un nouveau répertoire pour l'application et mettons en place une structure similaire à l'application Hello, World que nous avons développée au chapitre 1.

Par exemple, dans la structure de dossiers illustrée à la figure suivante, nous plaçons les répertoires dans le répertoire assets pour tout garder en ordre. Copiez Angular et Bootstrap, comme décrit au chapitre 1 dans les répertoires appropriés, puis créez le fichier index.html à la racine, qui deviendra la base de l'application de gestion des contacts. L'extrait suivant est une simple page HTML avec Bootstrap et Angular intégrés. Nous avons également initialisé Angular sur la page avec l'attribut ng-app dans la balise <html>.

Voici à quoi cela devrait ressembler:

<! DOCTYPE html>

<html lang = "en" ng-app>

<Head>

<meta charset = "utf-8">

<titre> Gestionnaire de contacts </ title>

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

<script type = "text / javascript"

src = "actifs / js / angular.min.js"> </ script>

</ Head>

<Body>

</ Body>

</ Html>

échafaudage

Après avoir configuré le fichier et la structure de base des dossiers, nous pouvons commencer à échafauder l’application avec Bootstrap. En plus d'offrir un certain nombre de composants, tels que la navigation et les boutons, que nous pouvons utiliser dans l'application de gestion des contacts, Bootstrap propose également un système de grilles réactives très puissant que nous exploiterons au maximum.

Barre de navigation

Nous aurons besoin d'une barre de navigation (barre de navigation) pour basculer entre les vues.

autres. Évidemment, il sera placé en haut de l'écran.

Regardons la barre de navigation complète avant de l'examiner plus en profondeur:

<nav class = "navbar navbar-default" role = "navigation">

<div class = "navbar-header">

<type de bouton = "bouton" class = "barre-de-basculement" data-toggle = "collapse" data-target = "# nav-toggle">

<span class = "icon-bar"> </ span>

<span class = "icon-bar"> </ span>

<span class = "icon-bar"> </ span>

</ Button>

<a class="navbar-brand" href="/"> Gestionnaire de contacts </a>

</ Div>

<div class = "collapse navbar-collapse" id = "nav-toggle">

<ul class = "nav navbar-nav">

<li class = "active"> <a href="/"> Parcourir </a> </ li>

<li> <a href="/add"> Ajouter un contact </a> </ li>

</ Ul>

<form class = "navbar-form navbar-right" role = "search">

<input type = "text" class = "form-control" placeholder = "Search">

</ Form>

</ Div>

</ Nav>

Ce code peut vous intimider, car il s’agit d’un composant très simple de la page, mais si vous l’analysez en détail, vous remarquerez que chaque élément est nécessaire.

La balise <nav> contient tout ce qui se trouve dans la barre de navigation. À l'intérieur, il y a deux sections: navbar-header et navbar-collapse. Ces éléments sont réservés à la navigation mobile et contrôlent ce qui est affiché ou caché par le bouton de commutation.

L'attribut data-target du bouton correspond directement à l'attribut id de l'élément navbar-collapse; De cette façon, Bootstrap sait ce qu’il doit activer. L'écran suivant lit la barre de navigation sur les périphériques plus grands qu'une tablette.

Nous allons inclure la barre de navigation directement à l'intérieur de la balise <body>. De cette façon, nous occuperons toute la largeur de la fenêtre du navigateur.

Si vous le redimensionnez, Bootstrap affiche l'en-tête de mobile avec le bouton de commutation pour les écrans inférieurs à 768 px, ce qui correspond à la taille d'écran d'un iPad en orientation portrait. Cependant, si vous cliquez sur le bouton pour vous déplacer dans la navigation, vous verrez que rien ne se passe. Cela est dû au fait que nous n'avons pas inclus le fichier JavaScript dans Bootstrap, présent dans le fichier ZIP que nous avons téléchargé précédemment.

Copiez-le dans le répertoire js de l'application et reportez-vous à celui-ci dans le fichier index.html. Vous devrez également inclure jQuery dans l’application, car Bootstrap JS en dépend.

Vous pouvez trouver la dernière version sur http://jquery.com/; Encore une fois, ajoutez-le au répertoire et incluez-le sur la page avant bootstrap.js. Vérifiez que les fichiers JavaScript apparaissent dans l'ordre suivant:

<script src = "assets / js / jquery.min.js"> </ script>

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

<script src = "assets / js / angular.min.js"> </ script>

Si vous actualisez la page, vous devriez pouvoir cliquer sur le bouton pour afficher la navigation mobile.

Grilles Bootstrap

Le système de grille avec 12 colonnes de Bootstrap est très puissant et nous permet de réaliser l'échafaudage de notre application réactive avec très peu d'éléments, en tirant parti du CSS modulaire. La grille est composée de lignes et de colonnes pouvant être adaptées à l'aide d'une série de classes. Avant de commencer, nous devons insérer un conteneur pour les lignes, sinon la structure ne se comportera pas comme prévu.

Tout ce dont vous avez besoin est une simple balise <div> à placer sous la barre de navigation:

<div class = "container"> </ div>

De cette façon, la grille sera centrée et nous ajouterons la propriété max-width pour que tout soit bien rangé.

Il existe quatre préfixes pour les classes, qui définissent le comportement des colonnes. Nous allons principalement utiliser le préfixe col-sm-, qui compresse les colonnes pour qu’elles apparaissent les unes au dessus des autres lorsque le conteneur a une largeur inférieure à 750 px.

Les autres classes font toutes référence à des tailles d'écran de périphérique différentes et se comportent de la même manière. Le tableau suivant, tiré de http://getbootstrap.com/, montre les différences entre les quatre classes.

... ...

Nous créons rapidement une mise en page à deux colonnes avec une zone du contenu principal et une barre latérale. Étant donné que la grille est composée de 12 colonnes, nous devrons nous assurer que la zone de contenu y est incluse, sinon nous aurons un espace vide.

Huit colonnes pour la zone de contenu et quatre pour la barre latérale devraient constituer une solution optimale, mais comment les implémentez-vous?

Dans le conteneur, nous créons une nouvelle balise <div> avec la classe row. Nous pouvons définir le nombre de lignes que nous voulons; chacun peut contenir au plus douze colonnes:

<div class = "conteneur">

<div class = "row">

</ Div>

</ Div>

Puisque nous voulons que les colonnes soient affichées sur les appareils mobiles, nous utiliserons le préfixe col-sm-. Créer une colonne est simple. sélectionnez simplement le préfixe approprié et ajoutez le nombre de colonnes que vous souhaitez définir. Regardez la disposition de base à deux colonnes:

<div class = "conteneur">

<div class = "row">

<div class = "col-sm-8">

Ceci est notre zone de contenu

</ Div>

<div class = "col-sm-4">

Voici notre sidebar

</ Div>

</ Div>

</ Div>

Si vous le visualisez sur un écran plus grand qu'un appareil mobile, Bootstrap ajoutera automatiquement 30 pixels d'espace entre les colonnes (15 pixels de chaque côté). Cependant, vous souhaiterez parfois insérer plus d'espace entre les colonnes et les éloigner un peu. Bootstrap vous permet d'obtenir ce résultat en ajoutant une autre classe à la colonne.

Choisissez à nouveau le préfixe approprié, mais cette fois-ci, ajoutez le mot clé offset:

<div class = "col-sm-4 col-sm-offset-1"> </ div>

Dans ce cas, le nombre présent à la fin contrôle le nombre de colonnes sur lesquelles le décalage est défini. La nouvelle classe ajoute une marge supplémentaire à gauche.

NOTE

Rappelez-vous: la somme des colonnes d’une ligne, y compris le décalage, ne doit pas dépasser 12.

Dans les colonnes, vous pouvez imbriquer d'autres lignes et colonnes pour créer une présentation plus complexe:

<div class = "conteneur">

<div class = "row">

<div class = "col-sm-8">

<div class = "row">

<div class = "col-sm-6">

<p> Lorem ipsum dolor ... <p>

</ Div>

<div class = "col-sm-6">

<p> Classe aptent taciti ... </ p>

</ Div>

</ Div>

</ Div>

</ Div>

</ Div>

Cela créera deux colonnes dans le conteneur principal que nous avons précédemment configuré. A titre d'exemple, nous avons inclus dans le texte fictif.

Dans le navigateur, vous verrez qu'il y a maintenant trois colonnes. Cependant, comme la grille est imbriquée, nous pouvons créer une nouvelle ligne et une seule colonne, trois colonnes ou une nécessitant une mise en forme.

Cours d'assistance

Bootstrap inclut des classes d’aide que nous pouvons utiliser pour adapter la présentation. Ils sont généralement fonctionnels et répondent à un seul objectif. Regardons quelques exemples.

Éléments flottants

Les éléments flottants sont souvent essentiels pour créer une mise en page efficace sur le Web. Bootstrap propose deux classes pour rendre les éléments mobiles à gauche ou à droite:

<div class = "pull-left"> ... </ div>

<div class = "pull-right"> ... </ div>

Pour utiliser efficacement les éléments flottants, nous devons les inclure dans une classe de correctifs. De cette façon, nous les isolerons et le flux de documents sera affiché comme prévu:

<div class = "clearfix">

<div class = "pull-left"> ... </ div>

<div class = "pull-right"> ... </ div>

</ Div>

Si les classes float se trouvent directement dans un élément avec la classe row, les éléments "flottants" sont automatiquement isolés par Bootstrap et il n'est pas nécessaire d'appliquer manuellement la classe clearfix.

Centrer les éléments

Avec les éléments flottants, il est souvent nécessaire de centrer les éléments au niveau du bloc. Bootstrap vous permet de le faire avec la classe center-block:

<div class = "center-block"> ... </ div>

Cela définit les propriétés des marges gauche et droite sur automatique et l'élément sera centré.

Afficher ou masquer

Vous souhaiterez peut-être afficher ou masquer des éléments avec CSS; Bootstrap propose deux classes pour atteindre ce résultat:

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

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

Il est important de noter que la classe définit la propriété display à bloquer; ensuite, appliquez-le uniquement aux éléments de niveau bloc et non aux éléments inline ou inline-block.

Bootstrap inclut également plusieurs classes pour permettre aux éléments d'être affichés ou masqués sur des écrans de tailles spécifiques. Les classes utilisent la même taille par défaut que la grille Bootstrap.

Par exemple, le code suivant cachera un élément sur un écran avec des dimensions spécifiques:

<div class = "hidden-md"> </ div>

Cet élément sera masqué sur les appareils dotés d'un écran de taille moyenne, mais restera visible sur les appareils mobiles, les tablettes et les grands ordinateurs de bureau. Pour masquer un élément sur plusieurs appareils, vous devez utiliser plusieurs classes:

<div class = "hidden-md hidden-lg"> </ div>

Les classes visibles ont un comportement opposé et affichent les éléments sur des écrans de dimensions spécifiques. Cependant, contrairement aux classes cachées, vous devez définir la valeur d'affichage, qui peut être bloquée, en ligne ou en ligne:

<div class = "visible-md-block"> </ div>

<div class = "visible-md-inline"> </ div>

<div class = "visible-md-inline-block"> </ div>


0