Este artigo compartilha o código de implementação da primeira página de bootstrap para sua referência. O conteúdo específico é o seguinte
Imagem de reprodução:
Código de implementação:
<! Doctype html> <html> <head> <meta charset = "utf-8" /> <meta name = "viewport" content = "width = width, escala inicial = 1" /> <!-para garantir o escala de desenho e toque adequado, a tag de viewport metadata precisa ser adicionada na cabeça. -> <title> </title> <link href = "css/bootstrap.min.css" Rel = "SHILEET"> <script type = "text/javascript" src = "js/jQuery-1.9.1.min.js"> </script> <sCript "/" .Masthead {preenchimento: 110px 0px 110px; Margin-Bottom: 0px; } .Masthead: após {content: ''; exibição: bloco; Posição: Absoluto; topo: 0; Direita: 0; Inferior: 0; Esquerda: 0; Antecedentes: URL (IMG/BG1.png) Centro central; Opacidade: 0,4; } .Masthead H1 {Fonte-peso: 700; tamanho de fonte: 700%; } .Active {font-size: 120%; font-weight: Bold;} .Masthead-A {Opacity: 0.5; Cor: Branco; tamanho de fonte: médio; } .masthead-a: hover {color: white; opacidade: 1; } .Modal-header li i {opacity: 0.5;} .text-align {display: inline; } .img-ls {largura: 23%; borda: 1px HSL sólido (0, 0%, 87%); Margem-direita: 2%; preenchimento: 4px 0px; Bottom de margem: 6%; Min-altura: 350px; Max-Hight: 600px; flutuar: esquerda; } .img-ls img {width: 97%; Altura: Auto; } .img-ls img: pairar {cursor: pointer; } .footer {preenchimento: 50px 50px; } .navbar-nav li{display: inline;} </style> </head> <body> <div> <!-- Define the tone, position, size and background of the internal framework --> <div> <button type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span>Toggle navigation</span> <span></span> <span></span> <li> <li> <a href = "#"> bootstrap site chinês </a> </li> </ul> <div role = "navegação"> <ul> <li> <a href = "#"> bootstrap2 Chinês <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 Posições de alto salário </a> </li> <li> <a href = "#"> sobre </a> </li> </div> </div> </div> <div> <div> <h1> bootstrap </h1> <h2> A estrutura de desenvolvimento de front-end concisa, intuitiva e poderosa torna o desenvolvimento da web fazer mais rápido. </h2> <p> <a href = "#"> bootstrap3 documentos chineses (v3.3.5) </a> </p> <p> <a href = "#"> bootstrap2 documentos chineses (v2.3.2) </a> </p> </div> </divumerping <dithonwert) <l) <m10) <li> <ly30) <l) <l) <l) <l) <l) <l) <l) <l) </a [/a> </p> </div> </divumer <ditny [Div 31> <li> <li> boots <li> <li> <li>, </a> </a> </i trister </divyster <dithology) <l) <li> <li> <li> <li> </a> </a> </p> </div> </dent> <div> <l) <li> <li> </li> <li> Bootstrap q & A Comunidade <i> | </i> </li> <li> Sina Weibo: @BootStrap Rede chinesa </li> </ul> </div> </div> <div> <div> <div> <h2> Bootstrap de alta qualidade Recomendações de projeto de alta qualidade </h2> <p> <div> <img src = "img/codeguide.png"/> <h3> <a href = "javascript: void (0)"> especificação de codificação de bootstrap <br/> <mmall> por specifications para specialting. </p> </div> <div> <img src = "img/jqueryapi.png"/> <h3> <a href = "javascript: void (0)"> jQuery API <br/> <morn> Manual chinês </small> </110> <1110, o jQuery. versões. </p> </div> <div> <img src = "img/w3schools.png"/> <h3> <a href = "javascript: void (0)"> w3schools <br/> <mpoted> espelho doméstico original </small> </a> </h3> <bloconChools.) Para acessá -lo, e a versão doméstica de tradução chinesa está muito desatualizada. Portanto, fiz uma imagem espelhada e espero que os alunos com um bom inglês possam ler diretamente o tutorial original! </p> </div> <div> <img src = "img/expo.png"/> <h3> <a href = "javascript: void (0)"> excelente seleção de sites <br/> <mmall> bootstrap site sites de sites </small> </a> </s3> <e bellying sites. </p> </div> </div> </div> <Foother> <div> <img src = "img/logo.png"/> <h5> <p> A versão chinesa dos projetos de código aberto listado neste site é traduzido e compilado por membros do <a href = "javatrcript: void (0)">>> o protocolo de 3,0 </a> </a> Protocolo. </p> </h5> </div> <div> <div> <h4> sobre </h4> <h4> <ul> <li> <a href = "javascript: void (0)"> <mmall> sobre nós </mall> </a> </li> <a href = "JavScript: Void (0)" <li> <a href = "javascript: void (0)"> <mall> links amigáveis </mall> </a> </li> <li> <a href = "javascript: void (0)"> <mm4> contact ingletghtment </mall> </a> </h4> <fli> <dl> <h4> href = "javascript: void (0)"> <mall> sina weibo </mall> </a> </li> <li> <a href = "javascript: void (0)"> <mmall> <dit> href = "javascript: void (0)"> <mall> laravel chinês </mall> </a> </li> <li> <a href = "javascript: void (0)"> <mmall> ghost </h4> </a> </li> </h4> <li> <t> <h4> SPANSOR href = "javascript: void (0)"> <mall> ucloud </mall> </a> </li> <li> <a href = "javascript: void (0)"> <mmall> Você pode atirar na nuvem </mall> </a> </li> </ul> </h4> </div> href = "JavaScript: void (0)"> <mall> Beijing ICP No. 11008151 </mall> </a> <small> | Segurança da Rede de Segurança Pública de Pequim 11010802014853 </small> </h4> </do Footer> </body> </html>Eu acredito que todos não devem estar satisfeitos ainda. Vamos compartilhar alguns artigos com você abaixo:
"Tutoriais de aprendizado de bootstrap que valem a pena compartilhar e coletar" "Tutoriais de aprendizado de bootstrap"
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.