L'utilisation du framework bootstrap pour la conception et le développement est une tendance relativement populaire dans le monde. Lors de l'optimisation de nouveaux produits, de nombreuses sociétés de logiciels choisiront ce cadre de développement en raison de leurs avantages complets en JS et contrôles.
Le framework bootstrap est un cadre de conception d'interface utilisateur frontal. Il fournit une interface d'interface utilisateur unifiée et simplifie le processus de conception de l'interface interface (l'inconvénient est que l'interface est personnalisée, donc il n'y a pas beaucoup de place à l'ajustement). En particulier la disposition actuelle du temps de réponse (je comprends que la page adopte la disposition de différents éléments de page selon différentes résolutions), qui est bien prise en charge dans Bootstrap. Tant que les propriétés sont simplement définies, la disposition du temps de réponse peut être automatiquement implémentée, simplifiant considérablement le processus d'interface des programmeurs.
Par conséquent, j'utilise le framework bootstrap pour implémenter l'interface suivante. Bien que ce soit simple, c'est extraordinaire (si vous voulez vraiment le mettre en œuvre vous-même, je ne sais pas si ce sera l'année du mois de singe et de chevaux)
La page entière est divisée en plusieurs parties, qui sont implémentées à l'aide de l'exemple de code sur le site officiel de Bootstrap, et finalement formé en page. Les schémas de chaque partie sont illustrés dans la figure suivante
Ensuite, expliquez le code de chaque partie tour à tour
Tout d'abord, construisez une page vierge, le code est le suivant:
<! Doctype html> <html lang = "en"> <éad> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge"> <meta name = "wiewport" contenu = "width = device-width, initial-sche name = "auteur" contenu = ""> <ititle> bootstrap </title> <link rel = "Stylesheet" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css"> <ling href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> <! - [si lt ie 9]> <script src = "../../ docs-assets / js / ie8-responsive-file-warning.js"> </ script> <! [endif] -> <! - [if lt ie 9]> <script src = "../../ docs-assets / js / ie8-responsive-warning.js"> </cript> Ie 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script> <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script> <! [endif] -> <style> .bs-docs-home {background-Color: # 1B31B1; Image d'arrière-plan: URL (line.png); } </ style> </ head> <body> <script src = "https://code.jquery.com/jquery-1.10.2.min.js"> </ script> <script src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"> </ script> </ body> </html>Pour utiliser le framework bootstrap, vous devez vous référer au fichier de framework bootstrap dans la page. Il y en a quatre au total: bootstrap.min.css, bootstrap-thme.min.css, jQuery-1.10.2.min.js, bootstrap.min.js
Ce n'est qu'en vous référant à ces fichiers que vous pouvez utiliser les différents éléments d'interface utilisateur fournis par le framework Bootstrap.
Ensuite, comme indiqué dans la figure ci-dessus, expliquez les codes de chaque partie en séquence
Description supérieure:
L'idée de concevoir la page entière est de placer la page entière sur un panneau, et le texte en haut est l'en-tête du panneau
La page du framework bootstrap est une disposition de grille à 12 colonnes. J'ai donc divisé toute la page en trois parties. Il y a 3 colonnes de larges blancs à gauche et à droite, et 6 colonnes élargissent un panneau (panneau).
Le code est le suivant: La partie restante du code est dans <div> </div> en séquence
<body> <div> <h1 style = "line-height: 2em;"> </h1> <br /> <div> <div> </div> <div> <div> <h3> <strong> SCHIETS VOCATAL SCEETTE SCORIATION </strong> </h3> </div> <v> </div> </div> </v> </div> <v> </div> </div> </vring src = "https://code.jquery.com/jquery-1.10.2.min.js"> </ script> <script src = "http://cdn.bootcss.com/twitter-bootsstrap/3.0.1/js/bootstrap.min.js"> </cript> </docked>
Texte invite
Le texte invite utilise le composant d'alerte dans le framework Bootstrap, et le code est le suivant:
<div> <Button Type = "Button" Data-Dismiss = "Alert" Aria-Hidden = "True"> × </futton> <strong> Remarque! </strong> Les scores de ce site proviennent du site officiel de 12333. Pour plus de détails, veuillez consulter le site officiel </div>
Formulaire de carte d'identité et bouton de requête
Le formulaire de carte d'identité et le formulaire de compte suivant doivent être sous une seule forme. Les boutons de forme d'identité et de requête sont des groupes d'éléments de forme qui utilisent le framework bootstrap. Utilisez le groupe d'entrée pour combiner la zone de texte et le bouton. Le cadre de bootstrap fournit des effets tels que des filigranes et des points forts. Ajoutez beaucoup de couleur à la forme
<form role = "form" name = "form1"> <div> <label for = "idcard"> Veuillez saisir votre numéro d'identification </ labe> <v> <input type = "text" id = "idcard" name = "idcard" placeholder = "idcard numéro"> <span> <bouton type = "bouton" onClick = "form1.submit ();" > Query </ Button> </span> </div> </ form>
Formulaire
Les formulaires de compte sont également des groupes d'éléments de forme qui utilisent le cadre de bootstrap. Utilisez le groupe d'entrée pour combiner la zone de texte (entrée), le bouton (bouton) et la liste déroulante (UL).
Vous pouvez saisir le sujet directement dans la zone de texte, ou vous pouvez sélectionner le sujet dans le menu déroulant. L'implémentation spécifique consiste à utiliser $ ('# sujet'). Val («Opérateur d'ordinateur») et autres codes pour modifier le contenu dans la zone de texte dans l'événement Click (cliquez) de l'hyperlien (a). Le formulaire de compte est situé sous le formulaire d'identification, à l'intérieur du formulaire (formulaire)
Le code est le suivant:
<v> <étiquette pour = "Subject"> Veuillez saisir le sujet que vous recherchez </ label> <v> <input type = "text" id = "sujet" name = "sujet" placeholder = "compte, le sujet vierge signifie interroger tous les sujets"> <v> <Button type = "Button" Data-Toggle = "Dropdown"> Compte <span> </span> </futton> <ul> <li> <a href = "#" " onClick = "$ ('# sujet'). Val ('Opérateur d'ordinateurs');"> Opérateur d'ordinateur </a> </li> <li> <a href = "#" onClick = "$ ('# sujet'). Val ('Web Design');"> Web Design </a> </ li> <li> <a href = "#" onclick = "$ ('# sujette'). Val ('multimédia');"> multimédia </a> </li> </ul> </div> </div> </div>Informations d'erreur de requête
Lorsque le bouton de requête est cliqué et qu'aucun enregistrement n'est trouvé, le message d'erreur de requête s'affiche. Comme le texte de l'invite précédent, il utilise le composant d'alerte dans le framework bootstrap.
La question de savoir si ces informations sont affichées nécessitent également la coopération du code dynamique d'arrière-plan. Le code dynamique décide s'il faut afficher les informations en fonction des résultats de la requête (s'il n'y a pas d'enregistrement, les informations seront affichées). Le code dynamique n'est pas discuté dans cet article.
L'emplacement est derrière le formulaire, et le code est le suivant:
<div> <Button Type = "Button" Data-Dismiss = "Alert" Aria-Hidden = "True"> × </futton> <strong> Remarque! </strong> Aucun résultat n'a été trouvé, veuillez vérifier le numéro d'identification et les sujets et vérifier à nouveau </v>
Forme de grade
Lorsque le bouton de requête est cliqué, le formulaire de score s'affiche lorsque l'enregistrement est trouvé. De même, l'opportunité de l'afficher nécessite également la coopération du code dynamique en arrière-plan.
Un seul message d'erreur et formulaire de score peut apparaître en même temps
Le code est le suivant:
<div> <table cellulepacing = "0" CellPadding = "0"> <tr> <th Scope = "Col"> <span style = "Color: White"> Sujets </span> </ th> <th Scope = "Col"> <Span Style = "Color: White"> Score </ Span> </ Th> </ Tr> <TD> Opérateur d'ordinateur </td> <td> NON GRADE </ TD> OPERATEUR DE L'ordinateur </td> <td> NON GRADE </ TD> TRD> Opérateur d'ordinateur </ TD> <TD> Opérateur d'ordinateur </td> <TD> Excellent </td> </tr> <tr> <TD> Opérateur multimédia </td> <td> bon </td> </tr> <tr> <td> la conception Web </td> <td> a échoué </td> </tr> </pable> </div>
Cette page est implémentée à l'aide du framework bootstrap. Grâce à la puissance du framework bootstrap, la conception de l'interface utilisateur n'est plus une tâche difficile. Mais Bootstrap n'est qu'un cadre d'interface utilisateur, et son excellence dépend de la coopération du code dynamique en arrière-plan.
L'URL suivante est la fonction de l'auteur utilisant l'interface ci-dessus plus le code dynamique backend (PHP) pour réaliser la requête des scores de test des compétences professionnelles (Shanghai uniquement). Vous pouvez aller jeter un coup d'œil et donner des commentaires précieux (valables pour 1 mois).
http://bertin.sturgeon.mopaas.com/
Le code d'interface utilisateur complet est le suivant:
<! Doctype html> <html lang = "en"> <éad> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge"> <meta name = "wiewport" contenu = "width = device-width, initial-sche name = "auteur" contenu = ""> <ititle> bootstrap </title> <link rel = "Stylesheet" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css"> <ling href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> <! - [si lt ie 9]> <script src = "../../ docs-assets / js / ie8-responsive-file-warning.js"> </ script> <! [endif] -> <! - [if lt ie 9]> <script src = "../../ docs-assets / js / ie8-responsive-warning.js"> </cript> Ie 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script> <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script> <! [endif] -> <style> .bs-docs-home {background-Color: # 1B31B1; Image d'arrière-plan: URL (line.png); } </ style> </ head> <body> <div> <h1 style = "line-height: 2em;"> </h1> <br /> <div> <div> </div> <div> <div> <h3> <strong> Examen des compétences professionnelles Score </strong> </h3> </v> <v> <div> <bouton type = "Button" Data-Dismiss = "Alert" aria-hidden = "true"> × </futton> <strong> note! </strong> Les scores interrogés sur ce site proviennent du site officiel de 12333. Pour plus de détails, veuillez consulter le site officiel </div> <formulaire de formulaire = "form" name = "form1"> <div> <label pour = "idcard"> Veuillez saisir votre numéro d'identification </ / labor placeholder = "id numéro"> <span> <bouton type = "bouton" onClick = "form1.sumit ();" > Query </ Button> </span> </div> <div> <étiquette pour = "Subject"> Veuillez saisir le sujet que vous souhaitez interroger </Beld> <div> <Input Type = "Text" ID = "Subject" Name = "Subject" Placeholder = "Account, Blank Subject signifie interroger tous les sujets"> <div> <Button Type = "Button" Datoggle = "Dropdown"> Compte <panned> href = "#" onclick = "$ ('# sujet'). Val ('opérateur informatique');"> Opérateur d'ordinateur </a> </li> <li> <a href = "#" onclick = "$ ('# Subject'). Val ('Web Design');"> web Design </a> </li> <li> <a href = "#" onclick = "$ ('# sujet'). Val ('multimédia');"> multimédia </a> </li> </ul> </div> </div> </ form> <div> <Button type = "Button" Data-Dismiss = "Alert" Aucun résultat n'a été trouvé, s'il vous plaît vérifier votre numéro d'identification et la vérification </ / Strong> <div> <table cellulepacing = "0" CellPadding = "0"> <tr> <th Scope = "Col"> <span style = "Color: White"> Sujets </span> </pr> <th Scope = "COL"> <Span Style = "Color: White"> Score </ Span> </ Th> </ Tr> <TD> Opérateur informatique </td> <td> Opérateur </td> <Td> Excellent </td> </tr> <TD> Opérateur multimédia </td> <Td> Good </td> </ Tr> </ TD> WEB DESIGN </TD> <TD> Échec </v> </tr> </ Table> </v Div> </v> </v> <v> </div> </div> src = "https://code.jquery.com/jquery-1.10.2.min.js"> </ script> <script src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"> </cript> </gody> </bootstrap.Ce qui précède est la connaissance pertinente de l'utilisation du framework bootstrap pour créer des codes d'exemples d'interface pour les pages de requête qui vous sont introduits. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!