Développement d'interfaces Web avancées de Bootstrap Framework

Dans un autre didacticiel, une introduction aux interfaces utilisateur Bootstrap a été expliquée ainsi qu'un didacticiel sur la façon de concevoir un projet Web avec Bootstrap 2.0, dans lequel nous nous dirigerons vers les interfaces et les éléments les plus utilisés dans le développement Web.
Nous pouvons télécharger Bootstrap et le mettre dans un répertoire sur notre site Web ou l'utiliser en le liant à votre bibliothèque en ligne.
Bootstrap est un framework open source et ouvert pour un développement Web plus rapide et plus facile.
En recherchant, nous pouvons trouver de nombreuses contributions de la communauté CSS et des composants personnalisés et des modèles de conception que d'autres utilisateurs ont créés et les rendre disponibles, il existe de nombreux composants pour créer des barres de navigation, des fenêtres modales et des popups, des carrousels d'images, des menus et bien d'autres , ainsi en tant que plugins JavaScript et Jquery pour valider les formulaires et autres fonctionnalités

Tableaux et lignes avec effets

Bootstrap a déjà programmé des styles et des effets CSS que nous pouvons utiliser, par exemple, pour changer la couleur des lignes d'un tableau et lorsque la souris passe dessus.

Le code sera le suivant :

Tableau et lignes avec effet
 

 
 
Véhicule
 
Origine
 
État
 
Prix
 

 

 

 
 
Fiat 500
 
Madrid
 
Utilisé
 
9690€
 

 
 
Accord Honda
 
Barcelone
 
Utilisé
 
14500€
 

 
 
Renault laguna
 
Tolède
 
Utilisé
 
2800€
 

 

 

Ensuite, nous allons créer un menu avec un sous-menu en utilisant uniquement Bootstrap CSS :

AGRANDIR

Le code sera le suivant :

Menu à plusieurs niveaux utilisant Css Bootstrap
Administrateur des ventes clients 

Système
Utilisateurs
Paramètres

Autorisations
Les serveurs

Serveur Vps A
Serveur Vps B


La consommation de ressources
Sauvegarde

Nous expliquons la structure et ses classes prédéfinies. La classe définit la taille du web trouvé par défaut dans Bootstrap.

 .container {largeur : 1170px; } 

Les classes de lignes suivantes fournissent une marge gauche et droite sur toute la page :

 .ligne {; marge-droite : -15px ; } 

La classe de menu déroulant est déjà fournie avec Bootstrap et les classes de bouton btn btn-primary également. Nous allons ajouter le sous-menu et les classes de niveau pour pouvoir générer le sous-menu. Rappelez-vous que les classes ont des hiérarchies, donc si nous nommons la même classe que nous avons dans Bootstrap et y ajoutons un attribut, la dernière déclaration faite prévaut.
C'est pour le cas où nous ajoutons un attribut shift left même si la classe est déjà définie dans bootstrap.min.css

 .menu déroulant {gauche : 150px; } 

Popup css et jquery avec contenu html
Nous allons utiliser la fonction popover qui affiche une popup lorsqu'un lien est survolé avec la souris et que la variable de contenu a le code html à afficher.
Nous allons reprendre le tableau précédent et ajouter une colonne pour une fiche technique.
Dans chaque lien, nous aurons la phrase suivante, puis avec l'identifiant, nous invoquerons un script.

 
 

 
 
Véhicule
 
Origine
 
État
 
Prix
 
Photos
 

 

 

 
 
Fiat 500
 
Madrid
 
Utilisé
 
9690€
 
Fiche technique
 

 
 
Accord Honda
 
Barcelone
 
Utilisé
 
14500€
 
Fiche technique
 

 

 

 

Si nous avons une liste large, nous pouvons créer une fonction JQuery où nous pouvons envoyer du contenu dynamique par exemple extrait d'une base de données.

Colonnes et blocs sur la page

Bootstrap est basé sur une largeur de 1200 pixels, divisé en 12 blocs qui couvrent 99% de la structure du web, chaque bloc couvre 8,3333%, équivalent à 100 pixels et a également un espace de 1 pixel.
Toujours la combinaison de blocs dans une même ligne pour ajouter 12 par exemple :
Deux blocs de 3 et un de 6

Blocs d'amorçage
Bloc Col-md-3 de 300px.
Bloc Col-md-6 de 600px.
Bloc Col-md-3 de 300px.
Bloc 800px col-md-8.

Ci-dessous, nous mettons un bloc de taille 8 qui est de 800 pixels :

Ces blocs sont réactifs car ils sont configurés dans le css Bootstrap. Ici, nous pouvons voir un exemple de la façon dont les blocs s'adaptent à un changement d'écran d'un appareil mobile.

Comment personnaliser Bootstrap pour changer les styles et les fonctionnalités

Pour créer des styles et des fonctionnalités compatibles avec Bootstrap, nous devons l'utiliser comme n'importe quelle autre bibliothèque css ou js, comme un autre framework du projet, dans ce cas, il sera utilisé pour la conception et les fonctionnalités du navigateur de l'utilisateur. Nous devons éviter de réformer les bibliothèques d'origine, mais ancrer les nôtres, donc lorsque les développeurs Bootstrap publieront une mise à jour, nous n'aurons aucun problème à incorporer la nouvelle si nous gardons nos modifications séparées.
Pour définir nos propres feuilles de style, nous devons créer un nouveau fichier de styles CSS, pour définir nos modifications sans affecter le css d'origine. Rappelons-nous la hiérarchie, par exemple.
Si dans Bootstrap css bootstrap.min.css

 .col-md-3 {largeur : 25 %; } 

Et nous voulons qu'il ait une bordure puis dans un fichier séparé my styles.css, nous pouvons déclarer :

 .borderojo {bordure : 1px rouge uni} 

Ensuite, sur la page, nous invoquons les deux fichiers

Dans le bloc, nous l'appliquons comme suit :

Bloc Col-md-3 de 300px.

Cela équivaudrait à le déclarer comme ceci :

 col-md-3 {largeur : 25 %; bordure : 1 pixel rouge uni ; } 

Maintenant, si pour une raison quelconque il avait deux déclarations similaires, supposons

 .borderojo {bordure : 1px rouge solide; } .clientblock {border : 1px bleu uni ; }
Bloc Col-md-3 de 300px.

C'est la sentence qui a été prononcée en dernier lieu qui l'emporte. Par conséquent, le bloc aura une bordure bleue.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif