A última vez que escrevi "O Bootstrap escreve uma página de estilo gigante de tela compatível com os principais navegadores" (clique para abrir o link) Algumas das necessidades da geração mais antiga podem não estar satisfeitas com esse estilo pós -moderno. Não importa, podemos alterar completamente o layout para um estilo de portal, e eles imediatamente aceitaram:
Primeiro de tudo, você precisa ser claro sobre o layout do portal. Isso nos ajudará a layout rapidamente. O início é uma tela gigante menor, seguida por uma barra de navegação, e o grupo de botões é usado aqui, seguido por várias colunas. Aqui está o uso do sistema de grade e painéis de bootstrap e, finalmente, informações de direitos autorais, e aqui ainda está um painel.
De qualquer forma, eu pessoalmente acho que esse estilo de layout do portal é uma bagunça, mas não sei por que parece ser muito popular.
Precisamos preparar algo, apenas uma barra de gradiente com uma altura de 1 no Photoshop. Primeiro, abra o Photoshop e crie uma nova imagem de 1024x1. A largura é gratuita, apenas tente ser o mais amplo possível. A imagem é 1. A cor do primeiro plano é verde escuro R: 0 g: 140 b: 0, a cor do fundo é verde claro R: 100 g: 200 b: 100. Use a ferramenta de gradiente para retirar a imagem a seguir. Não importa como você o puxe, você pode puxá -lo para a esquerda e a direita, e para o meio e os dois lados, dependendo de suas preferências pessoais:
Esta é a única imagem que precisamos nos preparar. Você pode fechar o Photoshop, jogá -lo de lado e salvar esta imagem na pasta do projeto do site. Esta imagem tem apenas cerca de 6k e não afeta o carregamento.
Depois disso, o código específico da página da web é o seguinte. O princípio é exatamente o mesmo que as peças em "Bootstrap Write uma página de estilo de tela gigante de audiência compatível com os principais navegadores" (clique para abrir o link), exceto que o local do código é diferente, por isso não o descreverei aqui.
<! xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> testa </title> <tena name = "Viewport" content = "width = dispositivo de dispositivo, escala inicial = 1,0, scalable = no"> <link href = "css/bootstrap.css" rel = "stylesheet" media = "screen"> <script type = "text/javascript" src = "js/jQuery-1.1.1.js" 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 ", sem serrif; } </style> </ad Head> <body> <div> <div style = "Background-imagem: url (imagens/bg.jpg); fundo-repeat: repeat; text-align: center"> <h1> <font color = "#fffff"> banner: o manchete principal </font </h1> <h2> </h2> </div> <div> <div> <div> <a href = "#"> button1 </a> </div> <div> <a href = "#"> button2 </a> </div> <div> <butty type = "button" data-toggle = "DropDown"> </span> <//button> <//buttle = "Button" " href = "#"> button1 </a> </li> <li> <a href = "#"> button2 </a> </li> </ul> </div> <div> <button type = "button" data-toggle = "suspenso"> retorno 2 </span> </"button" <unt <ult) <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 <p> ... </p> <p> <a href = "#"> button4 </a> </li> </ul> </div> </div> </div> <div> <div> <div> <div> <div> <h3> coluna </h3> <p> ... </p> <p> <abroft/href "" Role = "" Role = "Button"> Button </a> </p> </div> </div> </div> </div> <div> <div> <div> <h3> column2 </h3> <p> ... </p> <p> <a href = "#" função ""> botão </a> <a a href = ""#"role =" "" " </div> </div> </div> </div> <div> <div> <div> <h3> column3 </h3> <p> ... </p> <p> <a href = "#" role = "botão" </hit </a> </p> </div> </div> </div> </h3 </a> <p> ... </p> <p> <a href = "#" role = "botão"> botão </a> <a href = "#" role = "botão"> botão </a> </p> </div> </div> </center> </niv> </div> </div> </div style = "text-align: center"> </niv> </div> </div>Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.