Das letzte Mal, als ich "Bootstrap schreibt einen Publikumsriesenbildschirm, kompatibel mit Mainstream -Browsern" (klicken Sie, um den Link zu öffnen), sind einige der Bedürfnisse der älteren Generation mit diesem postmodernen Stil möglicherweise nicht zufrieden. Es spielt keine Rolle, wir können das Layout vollständig in einen Portalstil ändern, und sie akzeptierten es sofort:
Zunächst müssen Sie sich über das Portallayout klar ausmachen. Dies hilft uns schnell das Layout. Der Anfang ist ein kleinerer Riesenbildschirm, gefolgt von einer Navigationsleiste, und die Knopfgruppe wird hier verwendet, gefolgt von verschiedenen Spalten. Hier geht es um die Verwendung von Bootstrap -Gittersystemen und Panels sowie schließlich Copyright -Informationen, und hier ist immer noch ein Panel.
Wie auch immer, ich persönlich denke, dieser Portal -Layout -Stil ist ein Chaos, aber ich weiß nicht, warum es sehr beliebt zu sein scheint.
Wir müssen etwas vorbereiten, nur eine Gradientenstange mit einer Höhe von 1 in Photoshop. Öffnen Sie zunächst Photoshop und erstellen Sie ein neues Bild von 1024x1. Die Breite ist kostenlos. Versuchen Sie einfach, so breit wie möglich zu sein. Das Bild ist 1. Die Vordergrundfarbe ist dunkelgrün R: 0 g: 140 b: 0, die Hintergrundfarbe ist hellgrün. R: 100 g: 200 b: 100. Verwenden Sie das Gradientenwerkzeug, um das folgende Bild herauszuziehen. Egal wie Sie es ziehen, Sie können es nach links und rechts und in die Mitte und beide Seiten ziehen, abhängig von Ihren persönlichen Vorlieben:
Dies ist das einzige Bild, das wir uns vorbereiten müssen. Sie können Photoshop schließen, beiseite werfen und dieses Bild im Website -Projektordner speichern. Dieses Bild ist nur etwa 6K und wirkt sich überhaupt nicht aus.
Danach lautet der spezifische Webseitencode wie folgt. Das Prinzip ist genau das gleiche wie die Teile in "Bootstrap Schreiben Sie eine mit Mainstream -Browsern kompatibele Seite des Publikums -Riesen -Bildschirms (Klicken Sie, um den Link zu öffnen), außer dass der Code -Standort unterschiedlich ist, sodass ich es hier nicht beschreiben werde.
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"><Htmlmlml xmlns = "http://www.w3.org/1999/xhtml"> <kopf> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> testa </title> <meta name = "viewport". content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <style type="text/css"> h1,h2,h3,h4,h5 { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Wenquanyi Micro Hei", sans-serif; } </style> </head> <body> <div> <div style = "Hintergrund-Image: URL (Bilder/bg.jpg); Hintergrund-Repeat: Wiederholung; text-align"> <h1> <font color = "#ffffff"> Banner: Die Hauptübertragung </font> </h1> <h2> </font#font#FONT#FONT#FONT#FONT> </H1> </h2> </font = "#FONT> </h1> </h2> </font ="##FONT " </h2> </div> <div> <div> <div> <a href="#"> button1 </a> </div> <div> <a href="#"> button2 </a> </div> <div> <button type="button" data-toggle="dropdown"> Dropdown1 <span></span> </button> <ul role="menu"> <li> <a href = "#"> button1 </a> </li> <li> <a href = "#"> button2 </a> </li> </ul> </div> <div> <button type = "button" data-toggle = "Dropdown"> Dropdown2 <Pan> </button1> </li> <li> <li> <li> <li> <a. <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> <div> <div> <div> <h3> column1 rollen = "button"> button </a> </p> </div> </div> </div> </div> <div> <div> <h3> Spalte2 </h3> <p> ... </p> <p> <p> <p> <p> </#"#"#"#"#"#" button "> button". </div> </div> </div> <div> <div> <div> <h3> Column3 </h3> <p> ... </p> <p> <a href="#" role="button">Button</a> </p> </div> </div> </div> </div> </div> <div> <div> <div> <div> <h3> Column3 </h3> <p> ... </p> <p> <a href="#" role="button">Button</a> <a href="#" role="button">Button</a> </p> </div> </div> </div> </div> </div> </div> <div> <div style="text-align: center"> Copyright information </div> </div> </body></html>Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.