Continuei a escrever o layout do artigo anterior. No artigo anterior, concluí o layout da barra de navegação e do anúncio.
Comece a colocar:
Eu acho que a renderização final é assim, da seguinte maneira: dividi em capturas de tela de três páginas, que são grandes demais:
Então, o último inacabado será continuado:
Etapa 5: Adicionando o sistema de grade, escolhi o layout de três colunas col-md-4; A grade completa é de 12 e 4 é um terço de 12. Você também pode fazer layout e definir várias grades:
<div id = "tag_container"> <div> <div> <img src = "image/3.jpg"> <h2> animal1 </h2> <p> Linka Hotel acabou de dizer que o Fenghan viu uma grande instituição enviada para a parte traseira </p> <p> <a href = "#"> clique </aa> src = "Image/3.jpg"> <H2> animal1 </h2> <p> Linka Hotel acabou de dizer que Fenghan viu uma grande instituição de lembrança enviada para as costas </p> <p> <a href = "#"> clique em mim </a> </p> </div> <d> <href = "#"> imagem </a> Que Fenghan viu uma grande instituição de busca de casas enviada por mim </p> <p> <a href = "#"> clique em mim </a> </p> </div> </div> </div> </div> </div>
1) A grade deve estar em um recipiente ou div contêiner, para que o alinhamento e o preenchimento apropriados possam ser atribuídos automaticamente.
2) Faça o ID "tag_container" e a parte da classe col-md-4 está centrada e alinhada:
#tag_container .col-md-4 {text-align: Center; }Etapa 6: defina um espaçamento de linha e divida as partes superior e inferior
<HR> </HR>
CSS é
hr .divider {margem: 40px; }Etapa 7: A criação da página da guia. A imagem a seguir são as renderizações das três páginas da guia:
1) Princípio da página da guia:
<ul role = "Tablist"> <li> <a href = "#an1" role = "tab" data-toggle = "tab"> animal1 </a> </li> <li> <a href = "#an2" role = "tab" data-toggle = "tab"> animal2 </a> </li> <li> <aqua " data-toggle = "tab"> animal3 </a> </li> </ul> <div> <div id = "an1"> </div> <div id = "an2"> </div> <div id = "an3"> </div> </div>
A estrutura da página de tags é: UL List declara a tag e rótulos class = "nav-tabs" role = "comprimido"
O link na tag Li está marcado por função = "tab" data-toggle = "guia" para que a função de abrir a página da página da guia possa ser alcançada. O href = "#an1" de cada página da guia está vinculado ao seguinte layout de exibição.
Estrutura de layout expandida: em <div>, cada página da guia possui um painel. Observe que o ID mapeia a página da guia acima, para que a página possa ser aberta. <div id = "an3">
2) Adicione o layout na página de tag
<ul role = "Tablist"> <li> <a href = "#an1" role = "tab" data-toggle = "tab"> animal1 </a> </li> <li> <a href = "#an2" role = "tab" data-toggle = "tab"> animal2 </a> </li> <li> <aqua " data-toggle = "tab"> animal3 </a> </li> </ul> <div> <div id = "an1"> <div> <div> <h2> animal1 <pan> zootopia </span> </h2> <p> ajdkgjfd vê o preço da aeronave de tecnologia desenvolvida por aeronave de tecnologia do tempo. Se os resultados do Dia da Polícia de Shiguo da Embaixada, o preço da música KA de luto artificial irjeigrugitajdokgjijrgi </p> </div> <div> <img src = "image/1.jpg"> </div> <//divha> <dnpiia> <hpg "> <npg"> </div> </divha> <drpia> <h2) <p> Ajdkgjfd vê o preço do tempo de tecnologia de tecnologia desenvolvido pela Time Technology Aircraft. Se os resultados do Dia da Polícia de Shiguo da Embaixada, o preço da música KA de luto artificial irjeigrugitajdokgjijrgi </p> </div> <div> <img src = "image/2.jpg"> </div> </div> </div <div = "AN3"> <> <pla> Zootopia </span> </h2> <p> Ajdkgjfd vê o preço do tempo de aeronave de tecnologia. Se o Dia da Polícia de Shiguo da Embaixada resultar, o preço da música KA de luto artificial irjeigrugitajdokgjijrgi </p> </div> <div> <img src = "image/3.jpg"> </div> </div> </div> </div> </div>
1) Defina a margem superior da página da guia
.Feature {Padding: 30px 0}2) Defina as fontes do título da página da guia, etc.
.Feature-heading {font-size: 50px; Cor:#2A6496; Margin-top: 120px; }3) Defina o formato de legenda da página da guia:
.Feature-head .Text Muted {font-size: 28px; Cor: #999; }Etapa 8: adicione o aviso de direitos autorais inferior, as renderizações são as seguintes:
<Footer> <p> <a href = "#top"> de volta ao top </a> </p> <p>@2016 rongyu System </p> </sirdeer>
NOTA: Class = "Pull-Right" pode puxar o elemento para a direita, que é um recurso do CSS do Bootstrap.
Etapa 9: adicione o botão pop-up sobre:
<div id="about"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4>About</h4> </div> <div> <p>Zootopia" is produced by Disney Pictures, co-directed by Rich Moore, Byrne Howard and Gerald Bush, and Vestido por Ginnifer Goodwin, Jason Bateman, Shakira, Allen Tuddick, Idris Elba, J.K. Simmons e outros [1]. /.Modal-Content-> </div> <!-/.modal-dialog-> </div> <!-/.modal-dialog-> </div> <!-/.modal->
1) A janela pop-up estática é dividida em três partes, título, forma e botão; Entre os quais, precisamos apenas de um botão e o outro comentou. E adicione id = para facilitar o posicionamento abaixo;
2) Na barra de menus sobre a barra de navegação, adicione o link de alternância, data-toggle = "modal", e o ID corresponde a Data-Target = "#About":
<li> <a href = "#" data-toggle = "modal" data-target = "#sobre"> sobre </a> </li>
Etapa 10, posicionamento do menu
Clique na coluna do recurso da barra de navegação e a página de guia correspondente será aberta; Um pedaço do código JS é necessário para implementá -lo
<SCRIPT> $ (document) .ready (function () {$ ("#Demo-Navbar .Dropdown-Menu A"). Clique (function () {var href = $ (this) .attr ('href'); // alert (href); $ ("#tab-list a [href = '" " +. </script>1) Navegue pelo posicionamento de ID $ ("#Demo-Navbar .Dropdown-Menu A") e defina o evento de clique;
2) TAB ("'SHOW") para abrir a página da guia de $ ("#tabl-list a [href ='" + href + "']").
Dessa forma, o Bootstrap Learning acabou de começar.
Se você ainda deseja estudar em profundidade, pode clicar aqui para aprender e anexar um tópico maravilhoso a você: Bootstrap Learning Tutorial
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.