Bootstrap, de Twitter, est actuellement le cadre frontal le plus populaire. Bootstrap est basé sur HTML, CSS et JavaScript. Il est simple et flexible, ce qui rend le développement Web plus rapide.
Points clés pour l'apprentissage:
1. Forme
2. Photos
Dans cette leçon, nous apprenons principalement des formes de bootstrap et des fonctions d'image, et affichons divers effets riches grâce à la définition CSS intégrée.
un. Formulaire
Bootstrap fournit des styles de formulaires riches aux développeurs à utiliser.
1. Format de base
// Implémentez le style de formulaire de base <form> <div> <vabed> e-mail </ labe> <entrée type = "e-mail" placeholder = "Veuillez saisir votre e-mail"> </ div> <div> <vabed> mot de passe </ labe> <input type = "mot de passe" placeholder = "Veuillez saisir votre mot de passe"> </div> </ form>
Remarque: Le style correct ne peut être donné que si le type de type de la zone d'entrée est correctement défini. Les commandes de la boîte d'entrée prise en charge incluent: Texte, mot de passe, datetime, datetime-local, date, mois, heure, semaine, numéro, e-mail, URL, recherche, tél et couleur.
2. Formulaire en ligne
// Laissez la forme être alignée et flottée, et se comportez comme une structure de bloc en ligne en ligne <form> <form>
Remarque: Lorsqu'il est inférieur à 768px, le style exclusif sera restauré.
3. GRASSION FORME
// Ajouter des fragments avant et après <div> <div> ￥ </div> <input type = "Text"> <div> .00 </div> </div>
4. Arrangement horizontal
// Gardez les éléments sous la forme organisé horizontalement <form> <div> <bablow> e-mail </ label> <v> <entrée type = "e-mail" Planholder = "Veuillez saisir votre e-mail"> </div> </div> </ form>
Remarque: Le système Raster Col-SM est utilisé ici, et les chapitres suivants se concentreront sur l'expliquer, tandis que le contrôle de contrôle représente la synchronisation avec le style élément parent.
5. cocher les cases et les boîtes de radio
// Définissez la case à cocher, sur une ligne <div> <vabelle> <entrée type = "Checkbox"> Sports </Beld> </div> <div> <vabe> <entrée type = "Checkbox"> Music </ Label> </ Div> // Définissez la boîte à cocher désactivée <v> <Vabe> <Input Type = "Checkbox" Disabled> Music </ Label> </div> // Définir la boîte à chèques affichée dans LIGNE avec une ligne </ Label> </div> // Définir la boîte à chèques affichée dans LIGNE avec une ligne </ Label> </v> Type = "Checkbox"> Sports </ Label> <Babel> <Input Type = "Checkbox" Disabled> Music </ Label> // Définissez la zone de radio <v> <Belle> <Input Type = "Radio" Name = "Sex" Disabled> Male </Beld> </div>
6. Liste déroulante
// Définissez la liste déroulante <lelect> <option> 1 </ Option> <Option> 2 </ Option> <Option> 3 </ Option> <Option> 4 </ Option> <Option> 5 </ Option> </lect>
7. Vérifier le statut
// défini sur l'état d'erreur <v>
Remarque: il y a d'autres statuts comme suit:
Style Description Has-Error Error Status Has-Success Success Status Has Warning Statut d'avertissement // Synchronisation de la balise d'étiquette Statut correspondant <label> Entrée avec succès </QUILAGE>
8. Ajouter des icônes supplémentaires
// Icône de texte intégrée sur le côté droit de la zone de texte <div> <vabere> Email </Bel> <entrée type = "Email"> <span> </span> </div>
Remarque: En plus de Glyphicon-OK, il y a plusieurs tables ci-dessous:
Style Description Glyphicon-ok Success Status Glyphicon-Warning-Sign Statut d'alerte Glyphicon-Remover Statut
9. Contrôlez la taille
// du grand à petit <entrée type = "mot de passe"> <entrée type = "mot de passe"> <Type d'entrée = "mot de passe">
Remarque: Vous pouvez également définir les éléments parents form-group-lg et form-group-sm pour ajuster.
deux. image
Bootstrap fournit des styles d'images riches à utiliser.
1. Forme d'image
// trois formes <img src = "img / pic.png"> <img src = "img / pic.png"> <img src = "img / pic.png"> // image réactive <img src = "img / pic.png">
Ce qui précède est le contenu lié aux formulaires et images de bootstrap qui vous sont présentés par l'éditeur. J'espère que ce sera utile à tous!