In the first part of this lesson, we design a content introduction below the carousel picture. The content introduction is divided into two parts, this time is the first half.
one. Home page content introduction
// Regarding the carousel diagram of the last class, there is actually a better solution in the manual, and it does not require additional code control. <a href="#myCarousel" data-slide="prev"> <span></span> </a><a href="#myCarousel" data-slide="next"> <span></span> </a>//Content introduction
<div> <div> <h2>"Why choose Piaocheng Enterprise Training"</h2> <p> Strong faculty and perfect practical management courses will allow your company to achieve a qualitative takeoff! </p> <div> <div> <div> <div> <a href="#"> <img src="img/tab1-1.png"> </a> </div> <div> <h4>Course content</h4> <p> Others: Written by unknown lecturers in colleges and universities, textbooks with no practical value! </p> <p> Others: Realistic textbooks jointly compiled by well-known entrepreneurs and management masters! </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> Others: World-class universities such as Harvard and Yale in the United States, and famous brand experts with reputation! </p> </div> </div> </div> <div> <div> <a href="#"> <img src="img/tab1-3.png"> </a> </div> <div> <div> <h4>Class Schedule</h4> <p> Others: The class efficiency cannot be guaranteed, there is no timetable, and the task cannot be completed! </p> <p> Others: Ensure normal class efficiency, formulate a schedule, and complete the tasks on the same day! </p> </div> </div> </div> <div> <div> <a href="#"> <img src="img/tab1-4.png"> </a> </div> <div> <div> <h4>Service Team</h4> <p> Others: Ordinary employees recruited by the society and have uneven service levels! </p> <p> Others: Internal training of high-standard employees who have undergone good high-end service training! </p> </div> </div> </div> </div> </div> </div> </div></div>
The corresponding CSS part
body { font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft YaheiUI", "Microsoft YaheiUI", SimHei, "/5B8B/4F53", simsun, sans-serif;}.tab-h2 { font-size: 20px; color: #0059B2; text-align: center; letter-spacing: 1px;}.tab-p { font-size: 15px; color: #999; text-align: center; letter-spacing: 1px; margin: 20px 0 40px 0;}.tab1 { margin: 30px 0; color: #666;}.tab1 .media-heading { margin: 5px 0 20px 0;}.tab1 .text-muted { color: #999; text-decoration: line-through;}.tab1 .media-heading { margin: 5px 0 20px 0;}.tab1 .text-muted { color: #999; text-decoration: line-through;}.tab1 .col { padding: 20px;}/* Small screen (tablet, greater than or equal to 768px) */@media (min-width: 768px) { .tab-h2 { font-size: 26px; } .tab-p { font-size: 16px; }}/* Medium screen (desktop display, greater than or equal to 992px) */@media (min-width: 992px) { .tab-h2 { font-size: 28px; } .tab-p { font-size: 17px; }}/* Large screen (large desktop display, greater than or equal to 1200px) */@media (min-width: 1200px) { .tab-h2 { font-size: 30px; } .tab-p { font-size: 18px; }}Now let’s create the second half of the homepage content introduction.
one. Home page content introduction
Complete the footer at the bottom first
<footer id="footer"> <div> <p> Corporate training | Cooperation matters | Copyright complaints</p> <p> Su ICP No. 12345678. © 2009-2016 Piaocheng Enterprise Training Network. Powered by Bootstrap. </p> </div></footer>
Bottom CSS
#footer { padding: 20px; text-align: center; background-color: #eee; border-top: 1px solid #ccc;}//Two paragraphs of content<div> <div> <div> <div> <img src="img/tab2.png"> </div> <div> <h3>Strong learning system</h3> <p> Through layers of inspection by management masters, your business will make great progress. </p> </div> </div> </div> </div></div><div> <div> <div> <img src="img/tab3.png"> </div> <div> <h3>Perfect management method</h3> <p> The latest management training program will allow your business to catch up with its peers. </p> </div> </div> </div></div>
CSS section
.tab2 { background: #eee; padding: 60px 20px; text-align: center;}.tab2 img { width: 40%; height: 40%;}.tab3 { padding: 40px 0; text-align: center;}.tab3 img { width: 65%; height: 65%;}.text h3 { font-size: 20px;}.text p { font-size: 14px;}/* Small screen (tablet, greater than or equal to 768px) */@media (min-width: 768px) { .text h3 { font-size: 22px; } .text p { font-size: 15px; } .tab2-text { float: left; } .tab2-img { float: right; }}/* Medium screen (desktop display, greater than or equal to 992px) */@media (min-width: 992px) { .text h3 { font-size: 24px; } .text p { font-size: 16px; } .tab2-text { float: left; } .tab2-img { float: right; }}/* Large screen (large desktop monitor, greater than or equal to 1200px) */@media (min-width: 1200px) { .text h2 { font-size: 26px; } .text p { font-size: 18px; } .tab2-text { float: left; } .tab2-img { float: right; }}JS control vertical centering
$('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).height()) / 2 + 'px');$(window).resize(function() { $('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).height()) / 2 + 'px');});$('.text').eq(1).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height()) / 2 + 'px');$(window).resize(function() { $('.text').eq(1).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height()) / 2 + 'px');});If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all the content introduced on the Bootstrap homepage. I hope you like it. There will be more exciting content presentation in the future. Don’t miss it.