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 1

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


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

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

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ đi vào các ví dụ về việ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ạn nắm rõ hơn và thực hành những gì mình đã học thì chúng ta sẽ đi vào dự án thiết kế giao diện cho trang web công ty về dịch vụ bằng Bootstrap 4. Đầu tiên thì mình sẽ phát họa ra những phần của trang web giúp bạn có thể hiểu được cái sườn mà ta sẽ làm. Để hiểu rõ hơn bạn xem hình ảnh dưới đây nhé:

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

Sau khi đã xác định rõ bố cục thì mình sẽ đi vào tạo những file cần thiết cho việc thiết kế trang web là HTML, CSS, JS và Bootstrap. Để không mất thời gian của bạn thì mình đã tạo một thư mục chứa sắn các file cần thiết và để đường dẫn bên dưới để tải về nhé.

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

Mình có lưu ý nhỏ là ở trên mình sử dụng CDN link liên kết với file Bootstrap 4 để thiết lập nhanh hơn còn nếu bạn thích tải các file về để sử dụng thì có thể xem thêm ở đây nhé: Cách tải Bootstrap 4. Bạn cũng nên để các file Javascript nằm cuối cùng trang HTML để tối ưu hiệu suất trang web và nếu cần chỉnh sửa CSS thì bạn phải đặt file CSS của mình nằm bên dưới file CSS của Bootstrap nhé.

Bây giờ chúng ta sẽ đi vào cách tạo thanh điều hướng bằng cách sử dụng component navbar trong Bootstrap 4. Để nắm rõ hơn bạn xem đoạn code dưới đây nhé:

HTML:

<header>
<div class="container-fluid">
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Niềm Vui Lập Trình</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">Về Chúng Tôi</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Tiện Ích</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Giá Dịch Vụ</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Liên Hệ</a>
        </li>
      </ul>
    </div>
  </nav>
  </div>
</header>

Ở trên mình sử dụng thuộc tính ml-auto trong thẻ div class navbar-nav dùng để đẩy các phần tử trong navbar nằm sang bên phải và sử dụng class navbar-dark bg-dark để xác định màu nền cho component Navbar. Bạn có thể thay đổi màu tùy vào mục đích của mình bằng cách gọi bg-(color) với color là các màu cơ bản trong Bootstrap như là primay, success... Để nắm rõ hơn bạn xem ví dụ sau đây nhé:

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

Để xem được kết quả bạn chuyển sang chế độ screen 0.5x, 0.25x nha. Bây giờ chúng ta sẽ đi vào thiết kế phần thứ hai cho trang web và để hiểu rõ hơn bạn xem đoạn code sau nhé:

HTML:

<section id="header-gioi-thieu">
  <div class="container">
    <div class="d-flex justify-content-center align-items-center">
      <div class="wrap-headline">
        <h1 class="text-center">Niềm Vui Lập Trình</h1>
        <h2 class="text-center">Mang đến niềm vui cho các bạn học lập trình.</h2>
        <hr>
        <ul class="list-inline list-unstyled text-center">
          <li class="list-inline-item">
            <a class="btn  btn-primary btn-lg" href="http://www.niemvuilaptrinh.com" target="_blank" ><i class="fa fa-facebook-official" aria-hidden="true"></i> Facebook</a>
          </li>
          <li class="list-inline-item">
            <a class="btn btn-danger btn-lg" href="http://www.niemvuilaptrinh.com" target="_blank" role="button"><i class="fa fa-google-plus-square" aria-hidden="true"></i> Google</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  </section>

CSS:

.container-fluid {
    padding: 0 !important;
}
section#header-gioi-thieu {
    background-image: url("Hinh_Anh/Hinh_anh_1.jpg");
    background-size: cover;
    height: 400px;
    background-position: center center;
}
section#header-gioi-thieu .wrap-headline {
    position: relative;
    padding-top: 5%;
}
section#header-gioi-thieu h1,
section#header-gioi-thieu h2 {
    color: #FFF;
}
section#header-gioi-thieu h2 {
    font-size: 1.5rem;
}

Ở trên đây mình có mộ vài lưu ý là :

  • Sử dụng flex và căn vị trí chính giữa cho nội dung bằng cách sử dụng class d-flex , justify-content-center, align-items-center. Nếu bạn muốn tìm hiểu thêm về flex trong Bootstrap có thể tham khảo ở đây nhé: Flex Bootstrap 4.
  • Mình sử dụng Font Awesome 4.7 để tạo các icon cho các nút. Bạn có thể tham khảo ở đây nhé: Cài đặt Font Awesome 4.7.
  • Mình tạo một thư mục tên là Hinh_Anh và trong đó đặt một file ảnh tên là Hinh_anh_1.jpg. Sau đó sử dụng thuộc tính background-image để thiết lập ảnh nền cho thẻ div id #header-gioi-thieu. Dưới đây là File hình ảnh nếu bạn cần nhé:
    Download hình ảnh.
  • Mình thiết lập thuộc tính padding: 0 !important cho class container-fluid để làm độ rộng của nó bằng với trang web.

Do Code pen không hiển thị được phần này nên bạn xem kết quả thông qua hình dưới đây nhé:

Bootstrap 4 tạo nội dung section

Mình cũng sẽ để thư mục ở dưới để bạn có thể tải về và xem lại đoạn code ở phần này:

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

Tiếp theo mình sẽ đi vào phần thứ ba là tạo hình ảnh sản phẩm và tiêu đê, nội dung cho nó. Để responsive trên nhiều màn hình thiết bị thì chúng ta sẽ sử dụng hệ thống lưới trong Bootstrap 4 để làm phần này. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

HTML:

<section id="thong_tin_san_pham">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-md-6">
        <img  src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1586106189/Project%20Bootstrap/computer1_mcoeri.jpg"  class="img-fluid">
      </div>
      <div class="col-sm-12 col-md-6">
        <h3>Tiêu Đề Máy Tính 1</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis iaculis sodales. Etiam ante elit, commodo vitae enim vel, imperdiet aliquet lectus. Curabitur id consequat quam, vitae convallis lacus. Suspendisse potenti. Curabitur rhoncus vestibulum pulvinar. Nullam mauris ex, dapibus sed nisi sed, posuere pulvinar eros.
        </p>
      </div>
    </div>
    <hr>
    <div class="row">
      <div class="col-sm-12 col-md-6">
        <h3>Tiêu Đề Máy Tính 2</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis iaculis sodales. Etiam ante elit, commodo vitae enim vel, imperdiet aliquet lectus. Curabitur id consequat quam, vitae convallis lacus. Suspendisse potenti. Curabitur rhoncus vestibulum pulvinar. Nullam mauris ex, dapibus sed nisi sed, posuere pulvinar eros.
        </p>
      </div>
      <div class="col-sm-12 col-md-6">
        <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1586106307/Project%20Bootstrap/computer2_myhivw.jpg" class="img-fluid">
      </div>
    </div>
  </div>
</section>

CSS:

section#thong_tin_san_pham{
    margin-top:6rem;
}

Bạn xem kết quả bên dưới nhé:

See the Pen Thong tin san pham Bootstrap 4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ở trên mình sử dụng class col-sm-12 col-md-6 nghĩa là khi màn hình điện thoại và nhỏ hơn thì nó sẽ hiển thị độ rộng 12 cột và đối với màn hình máy tính bảng và lớn hơn thì độ rộng cộ sẽ là 6. Và chúng ta sử dụng class img-fluid để tự động điều chỉnh hình ảnh theo kích thước của trang. Để bạn có thể tải về và xem lại đoạn code ở phần này thì mình có để đường dẫn để tải về ở bên dưới:

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

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!