Cours gratuits » Cours informatique » Cours développement web » Cours Bootstrap » Bootstrap javascript tutorial PDF

Bootstrap javascript tutorial PDF

Problème à signaler:

Télécharger



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

Bootstrap javascript tutorial PDF

Simplon Boulogne - Bootstrap

Introduction Bootstrap - Javascript

Bootstrap ?

Twitter Bootstrap (3.3.6 actuelle), de son vrai nom, est une collection d’outils en téléchargement gratuit favorisant le développement web

Mélangeant des fichiers css et js externes, il permet de créer plus rapidement et plus facilement des sites / applications web avec une approche plus intuitive et responsive.

Composition de Bootstrap

tify;">Notion de template

Les templates sont des thèmes prédéfinis définissant les outils / composants de bases d’un site.

Exemples : Menu, boutons, footer, carousels etc…

Installation

par CDN (Content Delivery Network)

Installation

par CDN (Content Delivery Network)

  • Avantages : rapidité de chargement, si modification en ligne vous aurez la dernière version.
  • Inconvénient : dépend d’un serveur externe

Utilisation de

Un projet créé par Nicolas Gallagher et Jonathan Neal.

Permet de « resetter » avec une approche récente tous les éléments de rendus html pour obtenir un standard plus moderne, on « normalise »

Grid

Bootstrap intègre un fonctionnement par colonne pour permettre une approche plus responsive.

Une classe spécifique est spécifiée pour chaque colonne en fonction du type d’écran utilisé par l’utilisateur, ainsi donc nous pouvons simplement définir à l’avance le rendu des colonnes par rapport au type d’écran.

Types d’écrans

Colonnes

Colonnes

Attention, dépassé 12 colonnes, Bootstrap mettra automatiquement la 13ème colonne à la ligne !

Il faut donc bien définir le nombre de colonnes souhaitées par type d’écran pour plus de simplicité.

Colonnes

Exemple

Javascript Components

Découverte de quelques plugins

Javascript Components

Activation des librairies

Pour activer ces librairies : + Deux méthodes pour activer chaque librairies, soit :

  • via Javascript
  • via les « Data Attributes » grâce au HTML 5

Javascript Components

Permet de fixer un élément sur une zone de la page. Souvent utilisé pour les menus ou encore pour les sidebars (navigation dans la page)

Javascript Components

Définir l’affix Position top   Position bottom pour fixer pour fixer

Javascript Components

Permet de créer un « slideshow » avec l’apparition d’éléments un par un qui sont mis en avant sur la page, on parle alors d’un effet « carousel ».

Bootstrap javascript tutorial PDF

Javascript Components

Sert à afficher ou cacher du contenu à l’aide d’un bouton ou d’un lien, utilisé pour afficher / cacher des informations supplémentaires en toute simplicité.

- code

Javascript Components

Affiche une fenêtre de dialogue en premier plan pour mettre en avant des informations ou guider l’utilisateur sur une action.

- code1 : appel modal

- attention

Attention, si vous souhaitez mettre votre appel au modal sur un élément de type lien , il faut utiliser href que data-target.

- code2 : le modal

Javascript Components

Permet de créer en toute simplicité un menu de sélection vertical, souvent utilisé dans une barre de navigation pour créer un sousmenu ou encore

- code

   Dropdown

Javascript Components et bien d’autres…

Zurb Foundation

Alternative à Bootstrap

N’hésitez pas à aller y faire un petit tour !

Challenge

Bootstrap javascript tutorial PDF

Refaire votre portfolio en intégrant le framework Bootstrap et y intégrer au minimum trois librairies Javascript différentes.

OU

Utiliser un template de Bootstrap pour reproduire la page d’accueil d’un site populaire. (exemple : )

… …

Cartes

Une carte dans Bootstrap 4 est une boîte bordée avec du rembourrage autour de son contenu. Il comprend des options pour les en-têtes, les pieds de page, le contenu, les couleurs, etc.

image

John Doe

Quelques exemples de texte Quelques exemples de texte. John Doe est un architecte et ingénieur

Carte de base

Une carte de base est créée avec la classe .card et son contenu a une classe .card-body :

Carte de base

Exemple

<div class="card">

<div class="card-body">Basic card</div>

</div>

Si vous connaissez bien Bootstrap 3, les cartes remplacent les anciens panneaux, puits et miniatures.

En-tête et pied de page

Entête

Contenu

Bas de page

La classe .card-header ajoute un en-tête à la carte et la classe .card-footer ajoute un pied de page à la carte:

Exemple

<div class="card">

<div class="card-header">Header</div>

<div class="card-body">Content</div>

<div class="card-footer">Footer</div>

</div>

Cartes contextuelles

Pour ajouter une couleur de fond à la carte, utilisez des classes contextuelles ( .bg-primary , .bg-success , .bg-info , .bg-warning , .bg-danger , .bg-secondary , .bg-dark et .bg-light .

Exemple

Basic card

Primary card

Success card

Info card

Warning card

Danger card

Secondary card

Dark card

Light card

Titres, texte et liens

Titre de la carte

Quelques exemples de texte. Quelques exemples de texte.

Lien de carte Un autre lien

Utilisez .card-title pour ajouter des titres de cartes à n’importe quel élément de titre. La classe .card-text est utilisée pour supprimer les marges inférieures d'un élément <p> s'il s'agit du dernier enfant (ou du seul) de .card-body . La classe .card-link ajoute une couleur bleue à tout lien et un effet de survol.

Exemple

<div class="card">

<div class="card-body">

   <h4 class="card-title">Card title</h4>

   <p class="card-text">Some example text. Some example text.</p>

   <a href="#" class="card-link">Card link</a>

   <a href="#" class="card-link">Another link</a>

</div>

</div>

Images de cartes

Image de la carte

John Doe

Quelques exemples de texte Quelques exemples de texte. John Doe est un architecte et ingénieur

Jane Doe

Quelques exemples de texte Quelques exemples de texte. Jane Doe est architecte et ingénieur

Image de la carte

Ajoutez .card-img-top ou .card-img-bottom à un <img> pour placer l'image en haut ou en bas à l'intérieur de la carte. Notez que nous avons ajouté l'image en dehors du .card-body pour couvrir toute la largeur:

Exemple

<div class="card" style="width:400px">

<img class="card-img-top" src="/img_avatar1.png" alt="Card image">

<div class="card-body">

   <h4 class="card-title">John Doe</h4>

   <p class="card-text">Some example text.</p>

   <a href="#" class="btn btn-primary">See Profile</a>

</div>

</div>

Superposition d'images de cartes

Image de la carte

John Doe

Quelques exemples de texte Quelques exemples de texte. Quelques exemples de texte Quelques exemples de texte. Quelques exemples de texte Quelques exemples de texte. Quelques exemples de texte Quelques exemples de texte.

Transformez une image en fond de carte et utilisez .card-img-overlay pour ajouter du texte sur l’image:

Exemple

<div class="card" style="width:500px">

<img class="card-img-top" src="/img_avatar1.png" alt="Card image">

<div class="card-img-overlay">

   <h4 class="card-title">John Doe</h4>

   <p class="card-text">Some example text.</p>

   <a href="#" class="btn btn-primary">See Profile</a>

</div>

</div>

Colonnes de cartes

Du texte à l'intérieur de la première carte

Du texte à l'intérieur de la deuxième carte

Du texte à l'intérieur de la troisième carte

Du texte à l'intérieur de la quatrième carte

Du texte à l'intérieur de la cinquième carte

Du texte à l'intérieur de la sixième carte

La classe .card-columns crée une grille de cartes de type maçonnerie (comme pinterest). La mise en page s'ajustera automatiquement lorsque vous insérez plus de cartes.

Remarque: les cartes sont affichées verticalement sur de petits écrans (moins de 576 pixels):

Exemple

<div class="card-columns">

<div class="card bg-primary">

   <div class="card-body text-center">

     <p class="card-text">Some text inside the first card</p>

   </div>

</div>

<div class="card bg-warning">

   <div class="card-body text-center">

     <p class="card-text">Some text inside the second card</p>

   </div>

</div>

<div class="card bg-success">

   <div class="card-body text-center">

     <p class="card-text">Some text inside the third card</p>

   </div>

</div>

<div class="card bg-danger">

   <div class="card-body text-center">

     <p class="card-text">Some text inside the fourth card</p>

   </div>

</div>

<div class="card bg-light">

   <div class="card-body text-center">

     <p class="card-text">Some text inside the fifth card</p>

   </div>

</div>

<div class="card bg-info">

   <div class="card-body text-center">

     <p class="card-text">Some text inside the sixth card</p>

   </div>

</div>

</div>

Jeu de cartes

Du texte à l'intérieur de la première carte

Encore du texte pour augmenter la hauteur

Encore du texte pour augmenter la hauteur

Encore du texte pour augmenter la hauteur

Du texte à l'intérieur de la deuxième carte

Du texte à l'intérieur de la troisième carte

Du texte à l'intérieur de la quatrième carte

La classe .card-deck crée une grille de cartes d' égale hauteur et largeur . La mise en page s'ajustera automatiquement lorsque vous insérez plus de cartes.

Remarque: les cartes sont affichées verticalement sur de petits écrans (moins de 576 pixels):

Exemple

<div class="card-deck">

<div class="card bg-primary">

   <div class="card-body text-center">

     <p class="card-text">Some text inside the first card</p>

   </div>

</div>

<div class="card bg-warning">

   <div class="card-body text-center">

     <p class="card-text">Some text inside the second card</p>

   </div>

</div>

<div class="card bg-success">

   <div class="card-body text-center">

     <p class="card-text">Some text inside the third card</p>

   </div>

</div>

<div class="card bg-danger">

   <div class="card-body text-center">

     <p class="card-text">Some text inside the fourth card</p>

   </div>

</div>

</div>

Groupe de cartes

Du texte à l'intérieur de la première carte

Encore du texte pour augmenter la hauteur

Encore du texte pour augmenter la hauteur

Encore du texte pour augmenter la hauteur

Du texte à l'intérieur de la deuxième carte

Du texte à l'intérieur de la troisième carte

Du texte à l'intérieur de la quatrième carte

La classe .card-group est similaire à .card-deck . La seule différence est que la classe .card-group supprime les marges gauche et droite entre chaque carte.

Remarque: les cartes sont affichées verticalement sur de petits écrans (moins de 576 pixels), AVEC les marges supérieure et inférieure:

Exemple

<div class="card-group">

<div class="card bg-primary">

   <div class="card-body text-center">

     <p class="card-text">Some text inside the first card</p>

   </div>

</div>

<div class="card bg-warning">

   <div class="card-body text-center">

     <p class="card-text">Some text inside the second card</p>

   </div>

</div>

<div class="card bg-success">

   <div class="card-body text-center">

     <p class="card-text">Some text inside the third card</p>

   </div>

</div>

<div class="card bg-danger">

   <div class="card-body text-center">

     <p class="card-text">Some text inside the fourth card</p>

   </div>

</div>

</div>


2