微信登录捕鱼赚钱平台

書名： Bootstrap 4：Responsive Web Design
作者名： Silvio Moreto Matt Lambert Benjamin Jakobus Jason Marah
本章字數： 324字
更新時間： 2021-07-09 18:54:49

Finishing with the right-hand-side content

Well, we are almost done. It is time to create the right-hand-side content of our web app. The right-hand-side content contains information such as Whom to follow and the about page. Let's create it!

Coming to the HTML, let's create another Card component inside div.right-content, as follows:

<div id="right-content" class="col-md-3 hidden-sm hidden-xs">
  <div id="who-follow" class="card">
    <div class="card-header">
      Who to follow
    </div>
    <div class="card-block">
      
    </div>
  </div>
</div>

Inside .card-block, create a vertical list:

<div id="right-content" class="col-md-3 hidden-sm hidden-xs">
  <div id="who-follow" class="card">
    <div class="card-header">

      Who to follow
    </div>
    <div class="card-block">
 <ul class="list-unstyled">
 <li>
 <img src="imgs/cat.jpg" class="img-rounded">
 <div class="info">
 <strong>Crazy cats</strong>
 <button class="btn btn-default">
 <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Follow
 </button>
 </div>
 </li>
 <li>
 <img src="imgs/ration.jpg" class="img-rounded">
 <div class="info">
 <strong>Free ration alert</strong>
 <button class="btn btn-default">
 <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Follow
 </button>
 </div>
 </li>
 </ul>
    </div>
  </div>
</div>

So, the result without the CSS is not good, as shown in the following screenshot. We need to fix it.

Finishing with the right-hand-side content

First, we add margins for the items in the list:

div#who-follow li {
  margin-bottom: 2em;
}

div#who-follow li:last-child {
  margin-bottom: 0;
}

Then, we adjust the size of the image and the following text:

div#who-follow li img {
  width: 26%;
  display: inline-block;
  vertical-align: top;
  margin-right: 2%;
}

div#who-follow li .info {
  width: 68%;
  display: inline-block;
}

To finish this, we adjust the content inside the .info element:

div#who-follow li .info strong {
  display: block;
  overflow:hidden;
  text-overflow: ellipsis;
}

div#who-follow li .info .glyphicon {
  color: #2F92CA;
}

The result should look like what is shown here:

To end the main web page content, let's create another card that has content about the web app, such as help, privacy, and so on. After the div#who-follow, create another card:

<div id="app-info" class="card">
  <div class="card-block">
    ? 2015 SampleApp
    <ul class="list-unstyled list-inline">
      <li><a href="#">About</a></li>
      <li><a href="#">Terms and Privacy</a></li>
      <li><a href="#">Help</a></li>
      <li><a href="#">Status</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div class="card-footer">
    <a href="#">Connect other address book</a>
  </div>
</div>

First of all, note that we have just used .card-footer for this card. If you are using Bootstrap 3, add the next CSS:

.card .card-footer {
  border-radius: 0 0 0.4rem 0.4rem;
  padding: .75rem 1.25rem;
  background-color: #f5f5f5;
  border-top: 0.1em solid #e5e5e5;
  color: #4e5665;
}

For this card, we also need to add some margin within the card above:

div#app-info {
  margin-top: 2rem;
}

That looks great! We have finished the majority of the components in our web application! The next image shows the final result that we will cover at this chapter. Great work!

官术网_书友最值得收藏!

Bootstrap 4：Responsive Web Design

Finishing with the right-hand-side content