Interface utilisateur et architecture d’interaction

Télécharger Bootstrap

Fichiers inclus

Utiliser Bootstrap dans les pages Web

mise en page

Disposition imbriquée et disposition fluide

Mise en page réactive

Convertir une mise en page existante à largeur fixe en mise en page réactive

Classes utilitaires pour des mises en page réactives

Balises et styles courants

liste

code

Google joli

feuille

formulaire

Préfixes et suffixes des zones de texte

bouton radio

case à cocher

sélectionner la liste

Disposition du formulaire

bouton

groupe de boutons

bouton avec menu déroulant

Menu de navigation

Menu déroulant dans le menu de navigation

Conception réactive du menu de navigation

Onglet n°1

Onglet n°2

Chemins de navigation et paginateurs

Message rapide

vignette

boîte de dialogue

info-bulle

Réduire le contenu

carrousel

Introduction au cours

Exemples concrets de conception réactive

fenêtre - fenêtre

Configurer manuellement la fenêtre

Densité de pixels

Comment appliquer des requêtes multimédias

type de média type de média

fonctionnalité média de la fonctionnalité meida

rapport hauteur/largeur de la largeur de la fenêtre visuelle par rapport à la hauteur

aspect-ratio Le rapport entre la largeur et la hauteur de l'appareil

orientation Le sens d'utilisation de l'appareil

hauteur (hauteur de la fenêtre visuelle) et hauteur de l'appareil (hauteur de l'appareil)

width (largeur de la fenêtre visuelle) et device-width (largeur de l'appareil)

densité de pixels de résolution

Opérateur - et

Rejoignez plusieurs requêtes multimédias séparées par des virgules

Opérateur - non

Mise en page réactive #1

Mise en page réactive #2

Mise en page réactive #3

Navigation réactive

HTML pour le menu de navigation

CSS pour le menu de navigation

Style de bouton bascule

Styles de menu de navigation réactifs

Images réactives

Images d'arrière-plan réactives

Différentes tailles d'appareils utilisent des images différentes

Utilisez différentes images d'arrière-plan pour des appareils de différentes tailles

Changer différentes images d'arrière-plan en fonction de la densité de l'écran

remplissage d'image

Diaporama réactif

Boutons de commande coulissants

Style de bouton de commande coulissant

Résoudre le problème d'écrasement des diapositives

Conclusion