La dernière fois que j'ai écrit "Bootstrap écrit une page de style d'écran géant du public compatible avec les navigateurs grand public" (cliquez pour ouvrir le lien) Certains des besoins de la génération plus âgés peuvent ne pas être satisfaits de ce style postmoderne. Peu importe, nous pouvons complètement changer la disposition en un style de portail, et ils l'ont immédiatement accepté:
Tout d'abord, vous devez être clair sur la disposition du portail. Cela nous aidera à mettre en disposition rapidement. Le début est un écran géant plus petit, suivi d'une barre de navigation, et le groupe de boutons est utilisé ici, suivi de diverses colonnes. Voici l'utilisation du système et des panneaux de grille bootstrap, et enfin des informations sur le droit d'auteur, et voici toujours un panneau.
Quoi qu'il en soit, je pense personnellement que ce style de mise en page du portail est un gâchis, mais je ne sais pas pourquoi il semble être très populaire.
Nous devons préparer quelque chose, juste une barre de dégradé avec une hauteur de 1 dans Photoshop. Tout d'abord, ouvrez Photoshop et créez une nouvelle image de 1024x1. La largeur est gratuite, essayez simplement d'être aussi large que possible. L'image est 1. La couleur du premier plan est vert foncé r: 0 g: 140 b: 0, la couleur d'arrière-plan est vert clair r: 100 g: 200 b: 100. Utilisez l'outil de dégradé pour retirer l'image suivante. Peu importe comment vous le tirez, vous pouvez le tirer vers la gauche et la droite, et vers le milieu et les deux côtés, selon vos préférences personnelles:
C'est la seule image que nous devons préparer. Vous pouvez fermer Photoshop, le jeter de côté et enregistrer cette image dans le dossier du projet de site Web. Cette image n'est qu'environ 6k et n'affecte pas du tout le chargement.
Après cela, le code de page Web spécifique est le suivant. Le principe est exactement le même que les pièces dans "Bootstrap Écrivez une page de style d'écran géant de l'audience compatible avec les navigateurs grand public" (cliquez pour ouvrir le lien), sauf que l'emplacement du code est différent, donc je ne le décrirai pas ici.
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"> <éad- head> <meta http-equiv = "contenu-tent" contenu = "text / html; charset = utf-8" /> <itle> testa </ title> <méta name = "Viewport" Content = "width = Device-width, initial-scale = 1.0, utilisateur-échec = no"> <link href = "css / bootstrap.css" rel = "Stylesheet" media = "screen"> <script type = "text / javascrip src = "js / bootstrap.js"> </ script> <style type = "text / css"> h1, h2, h3, h4, h5 {font-family: "Microsoft yahei ui", "Microsoft Yahei", "Helvetica neue" "Wenquanyi Micro Hei", Sans-Serif; } </ style> </ head> <body> <div> <div style = "background-image: url (images / bg.jpg); background-repeat: répéter; texte-align: Center"> <h1> <font color = "# ffffff"> bannière: le titre principal </font> </h1> <h2> <font color = "# ffffff"> sub-tête </h2> <font color = "# ffffff"> sub-hier </h2> <font color = "# ffffff"> sub-hier </h2> <font color = "# ffffff"> sub-hier </h2> <font color = "# ffffff"> sub-hier </h2> <font color = "# FFFFFFFFF"> Sub-hier </ Font> Color = "# FFFFFFFF" </h2> </div> <div> <div> <div> <a href = "#"> Button1 </a> </div> <v> <a href = "#"> Button2 </a> </div> <v> <Button type = "Button" Data-Toggle = "Dropdown"> <li> <span> </scold> </sponse> <ul rôle = "Menu"> <li> href = "#"> Button1 </a> </li> <li> <a href = "#"> Button2 </a> </li> </ul> </ div> <div> <Button type = "Button" Data-Toggle = "Dropdown"> Dropdown2 <span> </ span> </sponte> <ul role = "Menu"> <li> <a href = "#"> bouton1 <a href="#">button2</a> </li> <li> <a href="#">button3</a> </li> <li></li> <li> <a href="#">button4</a> </li> </ul> </div> </div> </div> <div> <div> <div> <div> <div> <h3> Column1 </h3> <p> ... </p> <p> <a href = "#"> Button4 </a> </li> </ul> </div> </ div> </div> <div> <v> <div> <div> <div> <h3> Column1 </h3> <p> ... </p> <p> <a href = "#" role = "Button"> Button "Button" Button "Button" Button " Role = "Button"> Button </a> </p> </div> </ div> </div> </div> <div> <div> <div> <h3> Column2 </h3> <p> ... </p> <p> <a href = "#" role = "Button"> Button </a> <a href = "#" role = "Button"> bouton> bouton </a> </div> </ div> </ div> </ div> <div> <div> <div> <h3> Column3 </h3> <p> ... </p> <p> <a href = "#" role = "Button"> Button </a> </p> </ div> </v> </v> </v> </v> <v> <v> <v> <v> <v> <h> Collumn3 </v> <v> <v> <v> <v> <h3> Collumn3 </div> <v> <v> <v> <p> ... </p> <p> <a href = "#" role = "Button"> Button </a> <a href = "#" role = "Button"> Button </a> </p> </ div> </ div> </div> </div> </div> </div> <v> <div style = "Text-Align: Center"> Copyright InformationSi 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.