Dans la première partie de cette leçon, nous concevons une introduction de contenu sous l'image du carrousel. L'introduction du contenu est divisée en deux parties, cette fois est la première moitié.
un. Introduction du contenu de la page d'accueil
// En ce qui concerne le diagramme de carrousel de la dernière classe, il existe en fait une meilleure solution dans le manuel, et il ne nécessite pas de contrôle de code supplémentaire. <a href = "# myCaRousel" data-slide = "prev"> <span> </span> </a> <a href = "# mycarel" data-slide = "next"> <span> </span> </a> // contenu introduction
<div> <div> <h2> "Pourquoi choisir la formation de Piaocheng en entreprise" </h2> <p> Les professeurs forts et les cours de gestion pratique parfaits permettront à votre entreprise de réaliser un décollage qualitatif! </p> <div> <div> <div> <div> <a href = "#"> <img src = "img / tab1-1.png"> </a> </div> <div> <h4> Contenu du cours </h4> <p> Autres: Écrit par des lecteurs inconnus dans les collèges et universités, manuels sans valeur pratique! </p> <p> Autres: manuels réalistes compilés conjointement par des entrepreneurs bien connus et des maîtres de gestion! </p> </ div> </div> </div> <div> <div> <a href = "#"> <img src = "img / tab1-2.png"> </a> </div> <div> <h4> professeur </h4> <p> Autres: descteurs qui ne sont pas des universités européennes et américaines réelles et n'ont pas de réputation dans l'industrie! </p> <p> Autres: des universités de classe mondiale telles que Harvard et Yale aux États-Unis, et des experts de marque célèbres avec réputation! </p> </div> </div> </div> <div> <div> <a href = "#"> <img src = "img / tab1-3.png"> </a> </v> <div> <div> <h4> Classe </h4> <p> Autres: L'efficacité de la classe ne peut pas être garantie, il n'y a pas de time en temps, et la tâche ne peut pas être terminée! </p> <p> Autres: assurez-vous une efficacité normale de classe, formulez un horaire et effectuez les tâches le même jour! </p> </ div> </ div> </ div> <div> <div> <a href = "#"> <img src = "img / tab1-4.png"> </a> </div> <div> <div> <h4> Service Team </h4> <p> Autres: Employés ordinaires recrutés par la société et ont des niveaux de service UNEVE! </p> <p> Autres: Formation interne des employés de haut niveau qui ont suivi une bonne formation de service haut de gamme! </p> </div> </ div> </div> </div> </div> </div> </div> </div>
La partie CSS correspondante
Body {Font-Family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yaheiui", "Microsoft Yaheiui", Simhei, "/ 5b8b / 4f53", Simsun; Couleur: # 0059B2; Texte-aligne: Centre; Espacement des lettres: 1px;}. TAB-P {FONT-SIZE: 15PX; Couleur: # 999; Texte-aligne: Centre; Espacement des lettres: 1px; marge: 20px 0 40px 0;}. tab1 {marge: 30px 0; Couleur: # 666;}. Tab1 .Media-Heading {margin: 5px 0 20px 0;}. Tab1 .Text-Mutted {Color: # 999; Text-Decoration: Line-Through;}. Tab1 .Media-Heading {margin: 5px 0 20px 0;}. Tab1 .Text-Mutted {Color: # 999; text-décoration: line-through;}. tab1 .col {padding: 20px;} / * petit écran (tablette, supérieur ou égal à 768px) * / @ media (min-width: 768px) {.tab-h2 {font-size: 26px; } .tab-p {Font-Size: 16px; }} / * Écran moyen (affichage de bureau, supérieur ou égal à 992px) * / @ média (Min-Width: 992px) {.tab-h2 {Font-Size: 28px; } .tab-p {Font-Size: 17px; }} / * Grand écran (grand écran de bureau, supérieur ou égal à 1200px) * / @ média (min-large: 1200px) {.tab-h2 {font-size: 30px; } .tab-p {Font-Size: 18px; }}Créons maintenant la seconde moitié de l'introduction du contenu de la page d'accueil.
un. Introduction du contenu de la page d'accueil
Complétez le pied de page en bas en premier
<Footer ID = "Footer"> <div> <p> Formation d'entreprise | Cooperation Matters | Copyright plaintes </p> <p> SU ICP n ° 12345678. © 2009-2016 Piaocheng Enterprise Training Network. Propulsé par bootstrap. </p> </div> </footer>
CSS inférieur
#footer {padding: 20px; Texte-aligne: Centre; Color d'arrière-plan: #eee; Border-top: 1px solide #ccc;} // deux paragraphes de contenu<div> <div> <div> <div> <img src = "img / tab2.png"> </div> <div> <h3> Système d'apprentissage fort </h3> <p> à travers les couches d'inspection par les maîtres de gestion, votre entreprise fera de grands progrès. </p> </ div> </ div> </ div> </ div> </ div> <div> <div> <div> <img src = "img / tab3.png"> </div> <div> <h3> Méthode de gestion parfaite </h3> <p> Le programme de formation en direction permettra à votre entreprise de rattraper ses pairs. </p> </div> </div> </div> </div>
Section CSS
.tab2 {Background: #eee; rembourrage: 60px 20px; Text-Align: Centre;}. Tab2 IMG {Width: 40%; hauteur: 40%;}. tab3 {padding: 40px 0; Text-Align: Centre;}. Tab3 IMG {Largeur: 65%; Hauteur: 65%;}. Texte H3 {Font-Size: 20px;}. Texte P {Font-Size: 14px;} / * petit écran (tablette, supérieur ou égal à 768px) * / @ Media (Min-Width: 768px) {.Text H3 {Font-Size: 22px; } .Text p {Font-Size: 15px; } .tab2-text {float: Left; } .tab2-iMg {float: droit; }} / * Écran moyen (affichage de bureau, supérieur ou égal à 992px) * / @ média (min-large: 992px) {.Text H3 {Font-Size: 24px; } .Text p {Font-Size: 16px; } .tab2-text {float: Left; } .tab2-iMg {float: droit; }} / * Grand écran (grand moniteur de bureau, supérieur ou égal à 1200px) * / @ média (min-large: 1200px) {.Text H2 {Font-Size: 26px; } .Text p {Font-Size: 18px; } .tab2-text {float: Left; } .tab2-iMg {float: droit; }}Centre vertical JS Control
$ ('. text'). eq (0) .css ('margin-top', ($ ('. auto'). eq (0) .height () - $ ('. text'). eq (0) .height ()) / 2 + 'px'); $ (window) .resize (function () {$ ('. ($ ('. auto'). eq (0) .height () - $ ('. text'). eq (0) .height ()) / 2 + 'px');}); $ ('. text'). eq (1) .css ('margin-top', ($ ('. / 2 + 'px'); $ (fenêtre) .resize (function () {$ ('. Text'). Eq (1) .css ('margin-top', ($ ('. Auto'). Eq (1) .height () - $ ('. Text'). Eq (1) .height ()) / 2 + 'px');}));Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est tout le contenu introduit sur la page d'accueil de bootstrap. J'espère que vous l'aimez. Il y aura une présentation de contenu plus excitante à l'avenir. Ne le manquez pas.