Bootstrap est comme un cadre frontal. Il a déjà organisé beaucoup de CSS et peut être appelé directement s'il est nécessaire pour le développement frontal. L'adresse du site Web est http://www.bootcss.com. L'utilisation de bootstrap peut réduire le temps de disposition dans CSS pendant le développement frontal
Vous devez utiliser Bootstrap pour télécharger les composants sur le site officiel (cliquez pour ouvrir le lien). La version bootstrap utilisée dans l'environnement de production (cliquez pour ouvrir le lien). Bootstrap3 n'est pas compatible avec 2. Il est recommandé d'utiliser Bootstrap3 directement en fonction de ses documents de développement.
Après avoir décompressé le bootstrap, copiez les 3 dossiers obtenus CSS, FONTS et JS dans le répertoire du site. S'il s'agit du projet Web JSP d'Eclipse, placez-les dans le dossier WebRoot.
Après cela, vous pouvez appeler Bootstrap pour modéliser rapidement la page frontale de n'importe quelle page dans ce répertoire de site.
Cependant, il convient de noter que différents navigateurs ont des explications différentes pour Bootstrap. IE ne peut pas lire certains styles, mais les fonctions de base ne sont pas affectées et la page est juste un peu laide.
Voici une comparaison entre IE et Google Chrome sur la même page:
1. Objectifs de base
Utilisez Bootstrap pour écrire une belle page de destination pour PC, tablette et téléphone mobile.
S'il est étiré sur le PC, divers éléments s'adapteront automatiquement à l'écran.
Si vous ouvrez de telles pages sur votre téléphone, vous vous adapterez directement à l'écran du téléphone sans avoir besoin d'un ajustement automatique de l'utilisateur.
2. Idées de base
La disposition de la page est conçue en fonction du style inhérent de bootstrap comme suit:
3. Processus de production
Le code spécifique de toute la page est le suivant, et les éléments suivants analyseront les balises une par une:
<! Doctype html public "- // w3c // dtd html 4.01 transitional // en"> <html> <adhed> <title> page de connexion </ title> <méta-name = "wiffort" contenu = "width = device-width, initial-scale = 1.0, user-scalable = no"> <link href = "css / bootsTrap. rel = "Stylesheet" media = "screen"> </ head> <body> <div> <div> <table frame = "void"> <tr> <td> <img src = "images / img0.jpg" /> </td> <td> bienvenue. Veuillez vous connecter en premier. </td> </ tr> </ table> </ div> <div> <form role = "form" action = "1.html" method = "post"> <div> <label for = "username"> username: </ label> <v> <entrée type = "text" name = "nom d'utilisateur" placeholder = "username" id = "username" /> </ div> </ div> </ div> </ étiquette pour le nom d'usern "/> </ div> Mot de passe: </ label> <div> <entrée type = "mot de passe" name = "mot de passe" placeholder = "mot de passe" id = "mot de passe" /> </div> </div> <div> <div> <Button type = "soumi"> Connectez-vous </futton> <small> Vous n'avez pas de compte? <a href = "http://2.com"> Cliquez pour s'inscrire </a> </small> </div> </div> </ Form> </div> </div> </div> </ body> </html>
1. <éad- head> balise
Tout d'abord, mettez les deux lignes de code suivantes dans la balise <adhead>:
<A-Head> <Title> Page de connexion </TITLE> <! - Exiger que la page s'adapte automatiquement à l'écran du navigateur -> <Meta name = "Viewport" Content = "width = Device-Width, Initial-Scale = 1.0, User-Scalable = No"> <! - Declare I Wante to Bootstrap -> <link href = "CSS / bootsTrap.css" Rell = "STATERE" Media = "Screen"> </ Head>
2. TAG TAG
(1) Écrivez d'abord <v> </div>, puis y mettez le code. La description de base est la suivante:
(2) balise <v>
<div> <! - Réglez la table pour mettre en place cette couche CSS. Il n'est pas facile d'ajouter Align = "Left" à la balise IMG. L'image débordera du calque -> <! - Identique à <Bile> -> <Table Frame = "void"> <tr> <td> <img src = "images / img0.jpg" /> </td> <td> bienvenue. Veuillez vous connecter en premier. </td> </tr> </ table> </div>
(3) Sous la balise <v>, mettez d'abord un élément de formulaire formulaire Role = "form" action = "1.html" méthode = "post">. Par rapport aux formes HTML ordinaires, cette forme a plus d'attributs de classe et d'attributs de rôle. Il n'est pas nécessaire de dire grand-chose sur l'attribut de classe. Si la valeur est le formulaire, même si le formulaire a suffisamment d'emplacement, l'étiquette extérieure et la zone d'entrée ne seront pas sur la même ligne. Si la valeur est le formulaire actuel-horizontal, il est comme indiqué dans l'effet de la figure. L'attribut de rôle ne montre aucun effet, et il n'est ajouté que selon le document chinois de Bootstrap.
Ensuite, les éléments sous chaque formulaire sont les suivants:
<div> <form role = "form" action = "1.html" méthode = "post"> <! - L'étiquette extérieure de chaque propriété forme un tuple de groupe avec la boîte d'entrée -> <v> <! - L'attribut de classe suivant est pour qu'il soit automatiquement étiré selon la taille de l'écran -> <étiquette pour = "nom d'utilisateur" des mots de gris: </ étiquette> <div> <div> <Div> <Div> <! entrant quoi que ce soit, ce qui ne peut bien sûr pas être expliqué dans IE8. Je ne vois aucune fonction de l'ID, elle est simplement ajoutée en fonction des exigences des documents chinois bootstrap -> <entrée type = "text" name = "username" placeholder = "username" id = "username" /> </v> </v> <div> <label for = "mot de passe"> mot de passe: </vabe> <div> <entrée type = "mot de passe" nom = "mot de passe" </div> <div> <! - Le bouton ici est différent du bouton de soumission ordinaire HTML, mais il n'affecte pas la soumission du formulaire -> <Button Type = "Soumider"> Connexion </futton> <! - <mmall> TAG garantit que ce texte est la même ligne que le bouton de soumission -> <small> Pas de compte? <a href = "http://2.com"> Cliquez pour s'inscrire </a> </small> </div> </div> </ form> </div> </div>
À ce stade, le développement de cette page a été achevé.
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.