Dieser Artikel teilt den Implementierungscode der ersten Bootstrap -Seite für Ihre Referenz. Der spezifische Inhalt ist wie folgt
Reproduktionsbild:
Implementierungscode:
<! DocType html> <html> <head> <meta charset = "utf-8" /> <meta name = "viewPort" content = "width = Gerätebiddien, initial-scale = 1" /> <!-Um ordnungsgemäßes Zeichnungs- und Touchscreen-Skalieren zu gewährleisten, muss das ViewPort-Metadata-Tag hinzugefügt werden. -> <title> </title> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <script type = "text/javaScript" src = "js/jQuery-1.9.Min.js"> </script> <Script> <Script> <Script> <Script>. 110px 0px 110px; Randboden: 0px; } .masthead: nach {content: ''; Anzeige: Block; Position: absolut; Top: 0; Rechts: 0; unten: 0; links: 0; Hintergrund: URL (IMG/BG1.PNG) Wiederholungszentrum; Opazität: 0,4; } .masthead H1 {Schriftgewicht: 700; Schriftgröße: 700%; } .Active {Schriftgröße: 120%; Schriftgewicht: BOLD;} .masthead-a {Opazität: 0,5; Farbe: weiß; Schriftgröße: Medium; } .masthead-a: hover {Farbe: weiß; Deckkraft: 1; } .modal-Header li i {opazität: 0.5;} .text-align {display: Inline; } .img-ls {width: 23%; Grenze: 1PX Solid HSL (0, 0%, 87%); Marge-Right: 2%; Polsterung: 4px 0px; Margin-Bottom: 6%; min-hohe: 350px; MAX-Hoch: 600px; float: links; } .img-ls img {width: 97%; Höhe: Auto; } .img-ls img: hover {cursor: pointer; } .footer {padding: 50px 50px; } .navbar-nav li {display: inline;} </style> </head> <body> <div> <!-Definieren Sie den Ton, die Position, die Größe und den Hintergrund des internen Frameworks-> <div> <button type <span> </span> </button> <ul> <li> <a href = "#"> Bootstrap Chinesische Website </a> </li> </ul> <div rollen = "navigation"> <ul> <li> <a href = "#"> bootstrap2 chinesische Dokument </a> <li> <a href = " <li><a href="#">Bootstrap 4.0 Preview</a></li> <li><a href="#">Less Tutorial</a></li> <li><a href="#">jQuery API</a></li> <li><a href="#">Website Example</a></li> <li><a href = "#"> Front-End High-Salary-Positionen </a> </li> <li> <a href = "#"> über </a> </li> </div> </div> </div> <div> <div> <h1> Bootstrap </h1> <h2> Der konkrete, intusive und kraftvolle Front-End-Rahmen für die Entwicklung des Webs und das einfache. </h2> <p> <a href = "#"> bootstrap3 chinesische Dokumente (v3.3.5) </a> </p> <p> <a href = "#"> bootstrap2 Chinesische Dokumente (v2.3.2) </p> </p> </div> </div> <il> </li> bootsstrap -Technologie -Austauschgruppe: 318630708 <i> <li> <li> bootsstrap -Technologie -Austauschgruppe: 318630708 <i> <li> bootsstrap technology austausch: </li> <li> Bootstrap Q & A Community <i> | </i> </li> <li> Sina Weibo: @bootstrap Chinese Network </li> </ul> </div> </div> <div> <Viv> <div> <h2> basierend auf dem Basis von Bootstraps, die auf dem Basis von Bootstraps-Basis der Startstruktur basieren. <div> <img src="img/codeguide.png" /> <h3> <a href="javascript:void(0)">Bootstrap encoding specification<br/><small>by @mdo</small></a> </h3> <p> Bootstrap encoding specification: specifications for writing flexible, stable, and high-quality HTML and CSS Code. </p> </div> <div> <img src = "img/jQueryapi.png"/> <h3> <a href = "JavaScript: void (0)"> JQuery API <br/> <kleines chinesisches Handbuch </small> </a> </h3> <P>. </p> </div> <div> <img src = "img/w3schools.png"/> <h3> <a href = "javaScript: void (0)"> W3schools <br/> <kleiner> Original inländischer Inlandsspiegel </small> </a> </H3> W3Sschools. Es ist nicht möglich, darauf zugreifen zu können, und die inländische chinesische Übersetzungsversion ist sehr veraltet. Deshalb habe ich ein Spiegelbild gemacht und hoffe, dass Schüler mit gutem Englisch das Original -Tutorial direkt lesen können! </p> </div> <div> <img src = "img/expo.png"/> <h3> <a href = "JavaScript: void (0)"> Ausgezeichnete Site -Auswahl <br/> <Small> Bootstrap -Website -Beispiele für die Auswahl des Bootstraps -Setraps -Sortions -Sammlungs -Sammlungs -Sammlungs -Sammlung von Bootstraps -Kanalen. </p> </div> </div> </div> <fose mit dem <a href = "javaScript: void (0)"> <small> cc von 3.0 </small> </a> Protokoll. </p> </h5> </div> <div> <div> <h4> Über </h4> <h4> <ul> <li> <a href = "JavaScript: void (0)"> <klein> Über uns </small> </a> </li> <li> <a href = "javascript: void (0)") </ly/void (0) "" <li><a href="javascript:void(0)"><small>Friendly links</small></a></li> <li><a href="javascript:void(0)"><small>Recruitment</small></a></li> </h4> </div> <div> <h4>Contact information</h4> <h4> <ul> <li><a href="javascript:void(0)"><small>Sina Weibo</small></a></li> <li><a href="javascript:void(0)"><small>Email</small></a></li> </ul> </h4> </div> <div> <h4>Official website</h4> <h4> <ul> <li><a href="javascript:void(0)"><small>Laravel Chinese</small></a></li> <li><a href="javascript:void(0)"><small>Ghost China</small></a></li> </ul> </h4> </div> <div> <h4>Sponsor</h4> <h4> <ul> <li><a href = "javaScript: void (0)"> <small> ucloud </small> </a> </li> <li> <a href = "javaScript: void (0)"> <small> Sie können die Cloud </small> </a> </li> </ul> </h4> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>, drehen lassen. href = "javaScript: void (0)"> <small> peking icp Nr. 11008151 </small> </a> <klein> | Beijing Public Security Network Security 11010802014853 </small> </h4> </footer> </body> </html>Ich glaube, jeder darf noch nicht zufrieden sein. Lassen Sie uns unten ein paar Artikel mit Ihnen teilen:
"Bootstrap -Lern -Tutorials, die es wert ist, geteilt und zu sammeln" "Bootstrap -Lern -Tutorials"
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.