Na primeira parte desta lição, projetamos uma introdução de conteúdo abaixo da imagem do carrossel. A introdução do conteúdo é dividida em duas partes, desta vez é a primeira metade.
um. Introdução ao conteúdo da página inicial
// Em relação ao diagrama de carrossel da última aula, na verdade existe uma solução melhor no manual e não requer controle de código adicional. <a href = "#mycarousel" data-slide = "prev"> <pan> </span> </a> <a href = "#mycarousel" data-slide = "next"> </span> </a> // Introdução ao conteúdo
<div> <div> <h2> "Por que escolher o treinamento corporativo da Piaocheng" </h2> <p> Faculdade forte e cursos de gerenciamento prático perfeito permitirão que sua empresa obtenha uma decolagem qualitativa! </p> <div> <div> <div> <div> <a href = "#"> <img src = "img/tab1-1.png"> </a> </div> <div> <h4> Conteúdo do curso </h4> <p> Outros: escritos por palestras desconhecidas em colegas e universidades, note prático de práticas práticas! </p> <p> Outros: Livros realistas compilados em conjunto por empreendedores conhecidos e mestres de gerenciamento! </p> </div> </div> </div> <div> <div> <a href="#"> <img src="img/tab1-2.png"> </a> </div> <div> <h4>Teacher</h4> <p> Others: Lecturers who are not from genuine European and American universities and have no reputation in the industry! </p> <p> Outros: universidades de classe mundial como Harvard e Yale nos Estados Unidos e especialistas famosos de marca com reputação! </p> </div> </div> </div> <div> <div> <a href = "#"> <img src = "img/tab1-3.png"> </a> </div> <div> <div> <h4> Cronograma de classe </h4> Outros: a eficiência da classe não pode ser garantida, não é possível garantir, não é possível garantir, não é possível garantir, não é possível garantir que não seja garantido, não é possível garantir que não seja garantido, não é possível garantir que não seja garantido, não é possível garantir que não seja garantido, não é possível garantir que não seja garantido. </p> <p> Outros: Garanta a eficiência normal da classe, formule um cronograma e conclua as tarefas no mesmo dia! </p> </div> </div> </div> <div> <div> <a href = "#"> <img src = "img/tab1-4.png"> </a> </div> <div> <div> <h4> Serviço Equipe </h4 <p> Outros: funcionários ordinários recruitados pela sociedade e não </p> <p> Outros: Treinamento interno de funcionários de alto padrão que passaram por um bom treinamento de serviço de ponta! </p> </div> </div> </div> </div> </div> </div> </div> </div>
A parte CSS correspondente
Corpo {Font-Family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yaheiui", "Microsoft Yaheiui", Simhei, "/5b8b/4f53", Simsun, Sans-Serif;}. Cor: #0059b2; Alinhamento de texto: centro; Espacamento de letas: 1px;}. TAB-P {Font-Size: 15px; Cor: #999; Alinhamento de texto: centro; Espacamento de cartas: 1px; Margem: 20px 0 40px 0;}. Tab1 {margem: 30px 0; Cor: #666;}. TAB1. Media-heading {margem: 5px 0 20px 0;}. Tab1 .text-muted {color: #999; Decoração de texto: linha de linha;}. TAB1. Media Heading {Margin: 5px 0 20px 0;}. Tab1 .Text Muted {Color: #999; Decoração de texto: linha de linha;}. Tab1 .Col {preenchimento: 20px;}/ * tela pequena (tablet, maior ou igual a 768px) */@mídia (min-width: 768px) {.tab-h2 {font-size: 26px; } .tab-p {font-size: 16px; }}/ * Tela média (tela da área de trabalho, maior ou igual a 992px) */@Media (Min-Width: 992px) {.tab-h2 {font-size: 28px; } .tab-p {font-size: 17px; }}/ * Tela grande (tela de desktop grande, maior ou igual a 1200px) */@Media (min-lar: 1200px) {.tab-h2 {font-size: 30px; } .tab-p {font-size: 18px; }}Agora, vamos criar a segunda metade da introdução do conteúdo da página inicial.
um. Introdução ao conteúdo da página inicial
Complete o rodapé no fundo primeiro
<rodapé id = "rodapé"> <div> <p> Treinamento corporativo | Matérias de cooperação | Reclamações de direitos autorais </p> <p> Su ICP No. 12345678. © 2009-2016 Rede de Treinamento Empresarial Piaocheng. Alimentado por bootstrap. </p> </div> </dower>
CSS inferior
#footer {preenchimento: 20px; Alinhamento de texto: centro; Background-Color: #eee; Border-top: 1px sólido #ccc;} // dois parágrafos de conteúdo<div> <div> <div> <div> <img src = "img/tab2.png"> </div> <div> <h3> Sistema de aprendizado forte </h3> <p> através de camadas de inspeção por mestres de gerenciamento, sua empresa fará um grande progresso. </p> </div> </div> </div> </div> </div> <div> <div> <div> <img src = "img/tab3.png"> </div> <div> <h3> Método de gerenciamento perfeito </h3> <p> O programa de treinamento de gerenciamento mais recente permitirá que seu negócio permitirá que seus peers. </p> </div> </div> </div> </div>
Seção CSS
.tab2 {background: #eee; preenchimento: 60px 20px; Text-align: Center;}. Tab2 img {largura: 40%; Altura: 40%;}. Tab3 {preenchimento: 40px 0; Text-align: Center;}. Tab3 img {largura: 65%; Altura: 65%;}. Texto H3 {Size da fonte: 20px;}. Texto P {Size da fonte: 14px;}/ * Tela pequena (tablet, maior ou igual a 768px) */@mídia (Min-Width: 768px) {.Text H3 {Font-size: 22px; } .text p {font-size: 15px; } .tab2-text {float: esquerda; } .tab2-img {float: certo; }}/ * Tela média (tela da área de trabalho, maior ou igual a 992px) */@Media (Min-Width: 992px) {.Text H3 {font-size: 24px; } .text p {font-size: 16px; } .tab2-text {float: esquerda; } .tab2-img {float: certo; }}/ * Tela grande (monitor de desktop grande, maior ou igual a 1200px) */@Media (Min-Width: 1200px) {.Text H2 {Font-size: 26px; } .text p {font-size: 18px; } .tab2-text {float: esquerda; } .tab2-img {float: certo; }}JS Control Centering Vertical
('. ($ ('. Auto'). Eq (0) .Height () - $ ('. Texto'). Eq (0) .Height ()) / 2 + 'PX');}); $ ('. Texto'). Eq (1) .CSS ('margin -top', ($ ('. / 2 + 'px'); $ (janela) .Resize (function () {$ ('. Text'). Eq (1) .css ('margin -top', ($ ('. Auto'). Eq (1) .Height () - $ ('. Text'). Eq (1) .Height ()) / 2 + 'Px);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 introduzido na página inicial do bootstrap. Espero que gostem. Haverá uma apresentação de conteúdo mais emocionante no futuro. Não perca.