Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Thực Hành Bootstrap 4 Phần 2

Thực Hành Bootstrap 4 Phần 2


Ngày 6 Tháng 4 Năm 2020

Thực Hành Bootstrap 4 Phần 2

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ tiếp tục phát triển giao diện cho trang web bằng Bootstrap 4. Nào hãy cũng mình tìm hiểu nhé!

Framework Bootstrap 4

Phát triển giao diện bằng Bootstrap 4:

Bây giờ chúng ta sẽ đi vào phát triển giao diện phần thứ 4 là Tiện Ích. Sau khi đưa thông tin về sản phẩm thì mình cần phải đưa ra những lí do tại sao khách hàng lại chọn sản phẩm của công ty. Để nắm lại bố cục trang web ở phần 1 thì bạn tham khảo hình ảnh bên dưới nhé:

Phát thảo Bố Cục Bootstrap 4

Sau khi đã hiểu bố cục thì chúng ta sẽ đi vào code phần tiện ích thông qua việc sử dụng hệ thống lưới trong Bootstrap 4. Mình có lưu ý nhỏ là khi thiết kế giao diện thì hai màu nền của hai thành phần web liền kề phải khác nhau giúp người dùng dễ phân biệt và tạo điểm nhấn các phần trong trang web. Để hiểu rõ hơn bạn xem đoạn code sau của mình nhé:

HTML:

<section id="tien_ich">
  <div class="container-fluid  bg-dark text-white">
    <div class="row noi_dung_tien_ich">
      <div class="col-sm-12">
        <h3 class="text-center">Tiện Ích</h3>
        <p class="text-center">Mình luôn muốn mang lại niềm vui cho các bạn học lập trình.</p>
      </div>
    </div>
    <div class="container">
      <div class="row  justify-content-center">
        <div class="col-sm-12 col-lg-4">
          <div class="tien_ich_item">
            <h3 class="p-4 text-primary icon_tien_ich"><i class="fa fa-map-marker icon"></i></h3>
            <h4>Làm Việc Mọi Lúc</h4>
            <p>Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus. Praesent aliquam in tellus eu.</p>
          <a href="http://www.niemvuilaptrinh.com/" target="_blank">Tìm Hiểu Thêm</a>
          </div>
        </div>
        <div class="col-sm-12 col-lg-4">
          <div class="tien_ich_item">
            <h3 class="p-4 text-primary icon_tien_ich"><i class="fa fa-clock-o icon"></i></h3>
            <h4>Hỗ Trợ Mọi Lúc</h4>
            <p>Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus. Praesent aliquam in tellus eu.</p>
          <a href="http://www.niemvuilaptrinh.com/" target="_blank">Tìm Hiểu Thêm</a>
          </div>
        </div>
        <div class="col-sm-12 col-lg-4">
          <div class="tien_ich_item">
            <h3 class="p-4 text-primary icon_tien_ich"><i class="fa fa-list-alt icon"></i></h3>
            <h4>Có Thể Chỉnh Sửa</h4>
            <p>Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus. Praesent aliquam in tellus eu.</p>
          <a href="http://www.niemvuilaptrinh.com/" target="_blank">Tìm Hiểu Thêm</a>
          </div>
        </div>
      </div>
      <div class="row mt-md-4 pb-4">
        <div class="col-sm-12 col-lg-4">
          <div class="tien_ich_item">
            <h3 class="p-4 text-primary icon_tien_ich"><i class="fa fa-leaf icon"></i></h3>
            <h4>Chuyên Nghiệp</h4>
            <p>Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus. Praesent aliquam in tellus eu.</p>
          <a href="http://www.niemvuilaptrinh.com/" target="_blank">Tìm Hiểu Thêm</a>
          </div>
        </div>
        <div class="col-sm-12 col-lg-4">
          <div class="tien_ich_item">
            <h3 class="p-4 text-primary icon_tien_ich"><i class="fa fa-plane icon"></i></h3>
            <h4>Giao Hàng Nhanh</h4>
            <p>Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus. Praesent aliquam in tellus eu.</p>
          <a href="http://www.niemvuilaptrinh.com/" target="_blank">Tìm Hiểu Thêm</a>
          </div>
        </div>
        <div class="col-sm-12 col-lg-4">
          <div class="tien_ich_item">
            <h3 class="p-4 text-primary icon_tien_ich"><i class="fa fa-phone icon"></i></h3>
            <h4>Đặt Hàng Qua Điện Thoại</h4>
            <p>Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus. Praesent aliquam in tellus eu.</p>
          <a href="http://www.niemvuilaptrinh.com/" target="_blank">Tìm Hiểu Thêm</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</section>

CSS:

section#tien_ich .noi_dung_tien_ich{
    padding: 2rem 0rem;
}
section#tien_ich .tien_ich_item{
    margin-right: 1.5rem;
    color:#000;
    background-color:#FFF;
    text-align: center;
     padding-bottom: 2rem;
}
section#tien_ich .icon_tien_ich{
    font-size:4rem;
}
@media (max-width: 991.98px) { 
    section#tien_ich .tien_ich_item{
        margin-top:1rem;
    }
}

Bạn xem kết quả và mình sẽ giải thích bên dưới nhé:

Xây Dựng Tiện Ích Bootstrap 4

Ở phần xây dựng tiện ích này mình có một số lưu ý nhỏ là:

  • Class col-sm-12 col-lg-4 giúp mình xác định độ rộng của cột với màn hình điện thoại, máy tính bảng là 12 và với màn hình desktop hoặc lớn hơn thì độ rộng của mỗi cột sẽ là 4.
  • Class icon_tien_ich sẽ xác định kích thước của icon trong nội dung tiện ích.
  • Thuộc tính @media (max-width: 991.98px){...} giúp chúng ta thiết lập thuộc tính CSS cho trang web và chỉ kích hoạt khi độ rộng của nó nhỏ hơn 991.98px. Bạn có thể xem thêm các kích thước màn hình cơ bản trong Bootstrap ở đây nhé: Kích Thước Màn Hình Bootstrap.
  • Class mt-md-4 cái này nghĩa là mình sẽ thiết lập thuộc tính margin-top với độ lớn bằng 4 khi màn hình là máy tính bảng hoặc lớn hơn. Để hiểu hơn bạn có thể xem ví dụ ở đây nhé: Khoảng cách trong Bootstrap.

Mình cũng có để thêm ví dụ về phần này trên Codepen ở bên dưới bạn có thể tham khảo thêm nhé:

See the Pen Tien ich viet bang Bootstrap4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Còn dưới đây là đường dẫn để bạn tải về phần 4 nhé:

Đường dẫn tải File Source Code Dự Án Bootstrap 4 Phần 4

Bây giờ chúng ta sẽ đi vào phần thiết kế bảng giá dịch vụ cho sản phẩm bằng hệ thống lưới và component table trong Bootstrap 4. Để hiểu rõ hơn bạn xem đoạn code dưới đây nhé:

HTML:

<section id="gia_dich_vu">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <h3 class="text-center price-headline">Bảng Giá Dịch Vụ</h3>
        </div>
      </div>
      <div class="row justify-content-center mt-4">
        <div class="col-sm-12">
          <table class="table table-striped table-hover table-dark">
            <thead>
              <tr>
                <th class="success">
                  <h4 class="text-center white-text">Gói Miễn Phí</h4>
                </th>
                <th class="info">
                  <h4 class="text-center white-text">Gói Tiêu Chuẩn</h4>
                </th>
                <th class="danger">
                  <h4 class="text-center white-text">Gói Cao Cấp</h4>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="success">
                  <h3 class="text-center white-text">0 VND</h3>
                </td>
                <td class="info">
                  <h3 class="text-center white-text">200.000 VND</h3>
                </td>
                <td class="danger">
                  <h3 class="text-center white-text">500.000 VND</h3>
                </td>
              </tr>
              <tr>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
              </tr>
              <tr>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
              </tr>
              <tr>
                <td>Dolor sit amet</td>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum</td>
              </tr>
              <tr>
                <td>-</td>
                <td>Dolor sit amet</td>
                <td>Lorem ipsum</td>
              </tr>
              <tr>
                <td>-</td>
                <td>-</td>
                <td>Lorem ipsum</td>
              </tr>
              <tr>
                <td><a href="#" class="btn btn-success btn-block">Đặt Hàng</a></td>
                <td><a href="#" class="btn btn-info btn-block">Đặt Hàng</a></td>
                <td><a href="#" class="btn btn-danger btn-block">Đặt Hàng</a></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
</section>

CSS:

section#gia_dich_vu {
    margin-top: 3rem;
    margin-bottom: 3rem;
}
section#gia_dich_vu .white-text {
    color: #FFF;
}
section#gia_dich_vu thead .success {
    background-color: #78CFBF;
}
section#gia_dich_vu thead .info {
    background-color: #3EC6E0;
}
section#gia_dich_vu thead .danger {
    background-color: #E3536C;
}
section#gia_dich_vu tbody .success {
    background-color: #82DACA;
}
section#gia_dich_vu tbody .info {
    background-color: #53CFE9;
}
section#gia_dich_vu tbody .danger {
    background-color: #EB6379;
}

Và đây là hình ảnh kết quả của đoạn code trên nhé:

Xây Dựng Bảng Trong Bootstrap 4

Như bạn thấy thì mình sẽ thiết lập độ rộng bảng sẽ bằng độ rộng của một dòng trong hệ thống lưới Bootstrap là 12 trên mọi màn hình thiết bị. Và để gọi component table thì ta sẽ sử dụng class table. Nếu các bạn muốn xem lại hay tìm hiểu component table trong Bootstrap thì xem ở đây nhé: Bảng trong Bootstrap 4. Các thuộc tính CSS ở trên mình chủ yếu để thiết lập màu cho các ô bảng giúp nó trông bắt mắt và dễ nhìn hơn.

Mình cũng có để thêm ví dụ về phần này trên Codepen ở bên dưới bạn có thể tham khảo thêm nhé:

See the Pen Bang Bootstrap4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Còn dưới đây là đường dẫn để bạn tải về phần 5 nhé:

Đường dẫn tải File Source Code Dự Án Bootstrap 4 Phần 5

Cuối cùng chúng ta sẽ đi vào phần thiết kế giao diện footer cho trang web bằng cách kết hợp component List và hệ thống lưới trong Bootstrap. Để hiểu rõ hơn bạn xem đoạn code dưới đây nhé:

<footer class="pt-4">
  <div class="container-fluid text-center text-md-left bg-dark text-white">
    <div class="container pt-4">
    <div class="row">
      <div class="col-md-6 mt-md-0 mt-3">
        <h5 class="text-uppercase">Nội Dung Footer</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim, metus at ultricies porta, ante tortor venenatis dolor, in imperdiet felis diam vitae ante. Nunc et lacus eget urna mattis efficitur. In hac habitasse platea dictumst. Sed turpis odio, laoreet eu posuere ut, vehicula et augue.</p>
      </div>
      <hr class="clearfix w-100 d-md-none pb-3">
      <div class="col-md-3 mb-md-0 mb-3">
        <h5 class="text-uppercase">Đường Dẫn Liên Kết</h5>
        <ul class="list-unstyled">
          <li>
            <a href="#!">Đường Dẫn 1</a>
          </li>
          <li>
            <a href="#!">Đường Dẫn 2</a>
          </li>
          <li>
            <a href="#!">Đường Dẫn 3</a>
          </li>
          <li>
            <a href="#!">Đường Dẫn 4</a>
          </li>
        </ul>
      </div>
      <div class="col-md-3 mb-md-0 mb-3">
        <h5 class="text-uppercase">Đường Dẫn Liên Kết</h5>
        <ul class="list-unstyled">
          <li>
            <a href="#!">Đường Dẫn 1</a>
          </li>
          <li>
            <a href="#!">Đường Dẫn 2</a>
          </li>
          <li>
            <a href="#!">Đường Dẫn 3</a>
          </li>
          <li>
            <a href="#!">Đường Dẫn 4</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="text-center py-3">
      © 2020 Copyright: <a href="http://www.niemvuilaptrinh.com/" target="_blank"> Niềm Vui Lập Trình</a>
    </div>
  </div>
</div>
</footer>

Mình cũng có để thêm ví dụ về phần này trên Codepen ở bên dưới bạn có thể tham khảo thêm nhé:

See the Pen Footer Bootstrap 4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Còn dưới đây là đường dẫn để bạn tải về toàn bộ thiết kế giao diện trang web nha:

Đường dẫn tải File Source Code Dự Án Bootstrap 4

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn thực hành về một số component trong Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!