Comment créer un formulaire de connexion bootstrap?
Présentez les fichiers CSS et JS de Bootstrap 5 pour créer un environnement de base; 2. Utilisez des conteneurs, des cartes et des classes de formulaires pour créer une structure de formulaire de connexion centrée et réactive, y compris le courrier électronique, la case d'entrée de mot de passe, la case à cocher et le bouton Soumettre; 3. Ajouter éventuellement la vérification du formulaire HTML5 et activer le style de vérification bootstrap via JavaScript, combiner la conception réactive pour assurer une convivialité mobile et ajouter des informations rapides ou des effets de chargement; 4. Enfin, il est recommandé de combiner la vérification du serveur, les HTTP, les mécanismes de sécurité tels que le captcha et la personnalisation des styles au besoin pour remplir un formulaire de connexion sûr et magnifique.
La création d'un formulaire de connexion bootstrap est simple et efficace grâce au système de grille réactif de bootstrap et aux cours intégrés. Voici comment construire un formulaire de connexion propre et convivial en utilisant Bootstrap 5 (pas de jQuery requis).
✅ 1. Configurer le bootstrap 5
Tout d'abord, incluez CSS et JS de Bootstrap dans votre fichier HTML. Vous pouvez utiliser le CDN:
<! Doctype html> <html lang = "en"> <adal> <meta charset = "utf-8" /> <meta name = "Viewport" content = "width = device-width, initial-scale = 1" /> <Title> Formulaire de connexion </TITME> <! - Bootstrap CSS -> <link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel = "Stylesheet"> </ head> <body> <! - Le formulaire de connexion va ici -> <! - Bootstrap JS (facultatif pour les fonctionnalités de formulaire comme la validation) -> <script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"> </ script> </docy> </html>
✅ 2. Créez la structure du formulaire de connexion
Utilisez les classes de formulaire de bootstrap et le système de grille pour aligner et styliser le formulaire. Enveloppez-le dans un récipient pour centrer.
<div class = "Container D-flex Justify-Content-Center Align-Items-Center VH-100">
<div class = "card shadow-sm" style = "width: 100%; max-width: 400px; padding: 2rem;">
<h4 class = "Text-Center MB-4"> Login </h4>
<formulaire
<div class = "MB-3">
<étiquette pour = "e-mail" class = "form-label"> Adresse e-mail </ label>
<entrée type = "e-mail" class = "form-control" id = "e-mail" requis>
</div>
<div class = "MB-3">
<étiquette pour = "mot de passe" class = "form-label"> Mot de passe </ label>
<input type = "mot de passe" class = "form-control" id = "mot de passe" requis>
</div>
<div class = "MB-3 Form-Check">
<input type = "checkbox" class = "form-check-input" id = "Remember">
<étiquette class = "form-check-label" pour = "Remember"> Rappelez-vous moi </ label>
</div>
<Button Type = "soumi" class = "btn btn-primary w-100"> Login </ftont>
</ form>
<div class = "Text-Center MT-3">
<small>
<a href = "#"> Mot de passe oublié? </a> | <a href = "#"> Inscrivez-vous </a>
</small>
</div>
</div>
</div>✅ 3. Ajouter des améliorations facultatives
Validation côté client (style bootstrap)
Ajoutez novalidate et utilisez les classes de validation de Bootstrap via JavaScript ou comptez sur la validation HTML5 de base.
<form class = "Needs-validation" novalidate>
<! - Entrées avec l'attribut requis ->
<div class = "MB-3">
<étiquette pour = "e-mail" class = "form-label"> e-mail </bablace>
<entrée type = "e-mail" class = "form-control" id = "e-mail" requis>
<div class = "invalid-feedback"> Veuillez saisir un e-mail valide. </div>
</div>
<! - Répétez le mot de passe ->
</ form>Activer la validation avec JavaScript:
(() => {
«utiliser strict»;
const Forms = Document.QuerySelectorAll ('. Needs-Validation');
Array.from (forms) .ForEach (form => {
form.addeventListener ('soumi', événement => {
if (! form.checkvalidity ()) {
event.PreventDefault ();
event.stoppropagation ();
}
form.classList.add («a été validé»);
}, FAUX);
});
}) ();✅ Comportement réactif
La grille de Bootstrap (par exemple, col-md-6 , w-100 ) garantit les échelles de formulaire sur mobile. Le centrage d-flex vh-100 fonctionne bien sur les appareils.
✅ Retour visuel
Vous pouvez ajouter des filateurs de chargement ou des messages de réussite à l'aide d'alertes bootstrap:
<div class = "alert alert-succès mt-3" role = "alert"> Connecté avec succès! </div>
✅ Conseils finaux
- Associez toujours à la validation côté serveur.
- Utilisez HTTPS dans la production.
- Envisagez d'ajouter le captcha ou la limitation des taux pour la sécurité.
- Personnalisez les styles à l'aide de variables bootstrap ou de CSS supplémentaires.
Fondamentalement, Bootstrap facilite la création d'une forme de connexion professionnelle en quelques minutes - structurez simplement la forme avec des classes appropriées et laissez bootstrap gérer le style et la réactivité.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Stock Market GPT
Recherche d'investissement basée sur l'IA pour des décisions plus intelligentes
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment créer un pied de page collant en bootstrap
Sep 16, 2025 am 06:00 AM
À l'aide de la disposition Flexbox, définissez le HTML et la hauteur du corps à 100% et ajoutez les classes D-Flex, Flex-Colonne et Min-VH-100 au conteneur; 2. Ajoutez des classes Flex-Grow-1 à l'élément principal pour occuper l'espace restant, poussant ainsi le pied de page vers le bas; 3. Le pied de page est naturellement à la fin du contenu et colle le bas en cas de contenu court et se déplace avec le document lorsqu'il est un contenu long; Cette méthode ne nécessite pas de javascript ou de hauteur fixe supplémentaire, et est compatible avec la conception réactive et est simple et fiable.
Comment utiliser un groupe de liste d'amorçage pour la navigation
Sep 21, 2025 am 06:31 AM
Oui, ListGroup de Bootstrap peut être utilisé comme navigation. 1. Utilisez des classes de groupes de groupe et de groupe de liste pour ajouter des effets visuels cliquables et des états interactifs à chaque projet; 2. Utilisez des classes actives pour identifier l'emplacement actuel en ajoutant des classes actives aux liens de la page actuelle; 3. Ajouter éventuellement des icônes ou des badges pour améliorer l'affichage des informations; 4. Utiliser éventuellement JavaScript pour changer dynamiquement d'états actifs pour réaliser la navigation dans des applications à une seule page; 5. Placer les groupes de liste dans les dispositions réactives telles que les barres latérales et les combiner avec des grilles ou des dispositions élastiques pour atteindre la structure globale de la page; Lorsque des éléments de navigation au niveau du bloc et de l'espacement sont requis, les groupes de liste sont préférés.
Comment changer les couleurs du thème par défaut dans Bootstrap?
Sep 16, 2025 am 01:42 AM
TOCHANGEDEFAULTTHEMECOLORSINBOOTSTRAP5, utilise la STOoverridevariables Like $ primaireforeImporttingBootstrap; 2.UpdateThe $ $-colorsmaptoAddorModifyColorsSuchas "Soulignez"
Comment utiliser des alertes bootstrap et les rendre licencies?
Sep 17, 2025 am 08:57 AM
Les alertes bootstrap peuvent être désactivées en ajoutant des classes spécifiques et une prise en charge JavaScript. 1. Créer des alertes de base avec des classes. Alert et de contexte telles que. 2. Ajouter des classes. 3. Ajoutez des boutons avec .Btn-Close Class et Data-Bs-Dismiss = "Alert" Attributs aux alertes pour atteindre la fonction d'arrêt; 4. Assurez-vous que le bundle JavaScript bootstrap est introduit pour activer le comportement de fermeture; 5. Ajouter éventuellement des icônes ou écouter fermé.B
Comment utiliser Bootstrap avec Vue.js?
Sep 18, 2025 am 04:33 AM
Usebootstrap5asitisjquery-free and compatiblewithvue; 2.InstallbootstrapvianPandImPortitscsinyourmainFileForStyling; 3.ApplybootstrapClassDirectlyInvueTEmplatesForlayoutandDesign; 4.Optionally utilisentrap-vue-3forvue3ToAccessSnativeVuEComponontsLitsLits-Vue-3Forvue3ToAccessSnativeVuuSLiBentestprap-Vue-3forvue3ToAccessSnativeVuuSLiKentsLikEnTrap-Vue-3forvue3ToaccessNativeVuuSLiKEANTSLIKEANT-ARRIC
Comment utiliser les utilitaires bootstrap pour les ombres
Sep 20, 2025 am 04:01 AM
Bootstrap fournit trois classes d'ombre: 1..Shadow-SM est utilisée pour les ombres faibles, 2..Shadow est utilisé pour les ombres standard et 3..shadow-lg est utilisé pour les grandes ombres. Il peut être directement appliqué à des éléments tels que des cartes et des boutons pour augmenter la hiérarchie visuelle. Il est nécessaire d'assurer la visibilité avec des couleurs d'arrière-plan telles que BG-White; 4. Utilisez .shadow-none pour supprimer les ombres par défaut; 5. Des ombres réactives peuvent être réalisées grâce à CSS personnalisée. La sélection correcte des ombres peut rapidement améliorer la trois dimensionnalité des éléments et maintenir la cohérence de la conception, et finalement améliorer la profondeur de l'interface de manière simple, se terminant de manière complète.
Comment créer une liste déroulante à plusieurs niveaux en bootstrap
Sep 20, 2025 am 04:08 AM
Pour créer un menu déroulant à plusieurs niveaux pour BootStrap5, vous devez combiner l'implémentation CSS et JavaScript personnalisés; 1. Utilisez une structure déroulante standard et un sous-menu avec une classe Dropdown-SubMenu; 2. Ajouter un sous-menu de positionnement CSS (comme à gauche: 100%) et éventuellement ajouter des styles de flèches; 3. Utilisez JavaScript pour empêcher les événements de bouillonner et de changer d'affichage sous-menu, ou d'utiliser: Trig à partir; 4. Assurez-vous que le CSS et le JSCDN de Bootstrap5.3.2 sont introduits; Faites attention à l'expérience mobile et au support d'accessibilité des attributs ARIA et réalisez enfin le menu déroulant à plusieurs niveaux disponible sur les appareils.
À quoi sert Popper.js pour Bootstrap?
Sep 18, 2025 am 04:14 AM
Popper.jsissentialforbootstrapBecauseitAutomAticalPositionStoolTips, popovers et DROPDOWNSTOENSURETHEYREMAINvisibleandProperlyaligned.1.itdynamicallycalculatesthebestplacerselatrelatoTRIGH
