Analyse de cas classique BootStrap

Présentation du contenu

Objectifs pédagogiques

Version Web design_task en mode écran étroit

Points de compétence de conception Web en mode écran étroit

Travail de préparation et de conception Web en mode écran étroit

Construction Web design_step1_framework en mode écran étroit

Conception Web en mode écran étroit_step2_navigation bar design

Titre Web design_step3_jumbotron en mode écran étroit

Mode écran étroit web design_step4_Concevoir le contenu de chaque section

Web en mode écran étroit design_step5_custom Page d'embellissement CSS

Conception Web en mode écran étroit_Résumé du cas

Correction du mode de mise en page Web design_task release

Correction du travail de préparation et de conception Web en mode mise en page

Correction du mode de mise en page Web design_step1_framework construction

Mode de mise en page fixe web design_step2_content mise en page et composition

Mode de mise en page fixe Web design_step3_Design contenu du titre

Mode de mise en page fixe web design_step4_Design Contenu de la section de colonne

Mode de mise en page fixe web design_step5_responsive conception de la barre de navigation

Conception Web en mode mise en page fixe_Résumé du cas

Interface de connexion réelle combat_step1_Task release et analyse des points de compétence

Interface de connexion réelle combat_step2_add chaque composant du formulaire de connexion

Interface de connexion practice_step3_Add CSS pour l'embellissement

Interface de connexion practice_step4_Apply CSS pour former des éléments

Effet réel de la fonction combat_step5_enhance de l'interface de connexion

Pratique de l'interface de connexion_Résumé du cas

Version mobile actuelle de layout_task

Points de compétence de mise en page mobile réels et travail de préparation

Flux réel layout_step1_overall construction du cadre

Conception de la barre de navigation de flux pratique layout_step2_top

Conception pratique du bloc layout_step3_title

Flux pratique layout_step4_Content conception réactive détaillée

Flux pratique layout_step5_Design barre de navigation latérale

Disposition du flux pratique_step6_Reconstruire la barre de navigation latérale pour masquer le petit écran

Flux pratique layout_step7_Reconstruire la barre de titre pour ajouter du contenu dynamique

Flux pratique layout_step8_Attacher des événements JS au contenu dynamique

Layout mobile pratique_case petit

Conception de sites Web marketing_tâches, analyse des points de compétence

Conception de sites Web marketing_travail de préparation et analyse des étapes de mise en œuvre

Conception du site Web marketing_step1_Conception du cadre global de la page d'accueil

Conception de sites Web marketing_step2_Affiner la barre de navigation supérieure

Site Web marketing design_step3_Design titre en surbrillance

Conception de sites Web marketing_étape 4_Conception détaillée du contenu

Conception de sites Web marketing_step5_Page d'embellissement CSS personnalisée

Conception de sites Web marketing_Résumé du cas

Effet de collage en haut et en bas de la version page_task Web

Effet Coller en haut et en bas de la page Web_Points de compétence et travail de préparation

Effet de collage en haut et en bas de la page Web_step1_overall frame layout

Effet Coller en haut et en bas de la barre de navigation page_step2_top Web

Effet de collage en haut et en bas de la conception de l'élément page_step3_bottom

Effet de collage en haut et en bas de la page Web_step4_conception de pièce interne

Effet Coller en haut et en bas de la page Web_step5_bottom effet fixe de navigation

Effet Coller en haut et en bas de la page web_step6_CSS personnalisé pour embellir la page

Effet Coller en haut et en bas de la page Web_Résumé du cas

Version de la page du blog_tâche

Page du blog_Points de compétence et travail de préparation

Blog page_step1_overall construction du cadre

Barre de navigation page_step2_top du blog

Conception du contenu de la page_step3_tail du blog

Blog page_step4_Design haut titre

Conception de la mise en page des pièces du blog page_step5_content

Blog page_step6_bottom pagination des articles

Conception du contenu du blog page_step7_sidebar

Blog page_step8_Ajouter du CSS pour embellir le menu d'en-tête

Blog page_step9_Ajouter du CSS pour embellir le contenu de la queue

Page du blog_Résumé du cas