Bootstrap Project Home Page Content Introduction (Full)
- 2021-02-17 06:15:09
- OfStack
In the first section of this lesson, we will design a content introduction at the bottom of the rotation map. The content introduction is divided into two parts, this time the first part.
1. Home page content introduction
// In terms of the rotation from the last lecture, it's actually in the manual 1 A better solution that does not require additional code control.
<a href="#myCarousel" data-slide="prev" class="carousel-control left"> <span class="glyphicon glyphicon-chevron-left"></span> </a>
<a href="#myCarousel" data-slide="next" class="carousel-controlright"> <span class="glyphicon glyphicon-chevron-right"></span> </a>
// Content introduction
<div class="tab1">
<div class="container">
<h2 class="tab-h2"> " Why choose diaocheng enterprise training " </h2>
<p class="tab-p">
Powerful teachers, perfect practical management courses, so that your enterprise to achieve the quality of take-off!
</p>
<div class="row">
<div class="col-md-6 col">
<div class="media">
<div class="media-left media-top">
<a href="#"> <img class="media-object"
src="img/tab1-1.png" alt="..."> </a>
</div>
<div class="media-body">
<h4 class="media-heading"> Course content </h4>
<p class="text-muted">
Other: Unknown lecturers in colleges and universities, without any practical value of the textbook!
</p>
<p>
Other: well-known entrepreneurs, management masters jointly compiled with the realization of teaching materials!
</p>
</div>
</div>
</div>
<div class="col-md-6 col">
<div class="media">
<div class="media-left media-top">
<a href="#"> <img class="media-object"
src="img/tab1-2.png" alt="..."> </a>
</div>
<div class="media-body">
<h4 class="media-heading"> faculty </h4>
<p class="text-muted">
Other: non - European and American legitimate university graduates, the industry has no visibility of the lecturer!
</p>
<p>
Others: Harvard, Yale and other universities in the world 1 The flow university, enjoys the reputation famous brand expert!
</p>
</div>
</div>
</div>
<div class="col-md-6 col">
<div class="media">
<div class="media-left media-top">
<a href="#"> <img class="media-object"
src="img/tab1-3.png" alt="..."> </a>
</div>
<div class="media-body">
<h4 class="media-heading"> Scheduling, </h4>
<p class="text-muted">
Others: no guarantee of class efficiency, no schedule, tasks can not be completed!
</p>
<p>
Others: to ensure the normal efficiency of class, formulation 1 Zhang schedule, the day's task to complete the day!
</p>
</div>
</div>
</div>
<div class="col-md-6 col">
<div class="media">
<div class="media-left media-top">
<a href="#"> <img class="media-object"
src="img/tab1-4.png" alt="..."> </a>
</div>
<div class="media-body">
<h4 class="media-heading"> Service team </h4>
<p class="text-muted">
Other: social recruitment, service level is uneven ordinary staff!
</p>
<p>
Others: internally trained, experienced good high-end service training of high standard staff!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
The corresponding CSS section
body {
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft YaheiUI", "Microsoft YaHei", 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 (flat, greater than or equal to 768px ) */
@media (min-width: 768px) {
.tab-h2 {
font-size: 26px;
}
.tab-p {
font-size: 16px;
}
}
/* Medium screen (desktop monitor, greater than or equal to 992px ) */
@media (min-width: 992px) {
.tab-h2 {
font-size: 28px;
}
.tab-p {
font-size: 17px;
}
}
/* Large screen (large desktop monitor, greater than or equal to 1200px ) */
@media (min-width: 1200px) {
.tab-h2 {
font-size: 30px;
}
.tab-p {
font-size: 18px;
}
}
Now let's make the second half of the introduction to the home page.
1. Home page content introduction
Finish the bottom footer first
<footer id="footer" class="text-muted">
<div class="container">
<p>
Enterprise training | cooperation | Copyright complaints
</p>
<p>
Sue ICP To prepare 12345678. © 2009-2016 Diaocheng enterprise training network . Powered by
Bootstrap.
</p>
</div>
</footer>
At the bottom of the CSS
#footer {
padding: 20px;
text-align: center;
background-color: #eee;
border-top: 1px solid #ccc;
}
// Two pieces of content
<div class="tab2">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 tab2-img">
<img src="img/tab2.png" alt="" class="auto
img-responsive center-block">
</div>
<div class="text col-md-6 col-sm-6 tab2-text">
<h3> Strong learning system </h3>
<p>
After management masters layer upon layer check, let your enterprise advance by leaps and bounds.
</p>
</div>
</div>
</div>
</div>
<div class="tab3">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<img src="img/tab3.png" alt="" class="auto
img-responsive center-block">
</div>
<div class="text col-md-6 col-sm-6">
<h3> Perfect management style </h3>
<p>
The latest management training program, let your enterprise catch up with peers.
</p>
</div>
</div>
</div>
</div>
CSS part
.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 (flat, 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 monitor, 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 controls vertical center
$('.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 want to learn more, you can click here to learn more, and here are three wonderful topics for you:
Bootstrap tutorial
Bootstrap Practical Tutorial
Use the tutorial for the Bootstrap plug-in
The above is all the content of Bootstrap home page introduction, I hope you like, there will be more wonderful content to present, do not miss.