Hướng dẫn footer bootstrap đẹp

Nếu bạn chưa hiểu rõ về bố cục giao diện một trang web thì bạn có thể xem thêm ở bài viết: Phần 24: Bố cục trang web HTML cơ bản. Bài viết hướng dẫn bạn cách thực hiện tạo một giao diện trang web bằng Bootstrap 4.

Nội dung chính Show

Một số lưu ý cơ bản
Giao diện trang web
Giao diện 2 cột, tỉ lệ 4/8
Giao diện 3 cột, tỉ lệ 3/6/3

Một số lưu ý cơ bản

Trước khi thiết kế giao diện của bất kỳ trang web nào, bạn cần nắm một số điều cơ bản:

Kích thước trang web: Thông thường kích thước trang web mặc định theo chiều ngang (width) và chiều cao (height) nên tính bằng đơn vị % (phần trăm). Mỗi màn hình của các thiết bị có kích thước khác nhau. Ví dụ màn hình laptop có kích thước khác với điện thoại di động. Vì vậy, đó là lý do bạn dùng Bootstrap 4, cho phép thiết kế giao diện đáp ứng với nhiều loại kích thước thiết bị. Thông thường, chúng ta chỉ canh giao diện theo chiều ngang (width).
Trình duyệt: khi thiết kế mã HTML giao diện thì không phải tất cả trình duyệt đều hiển thị khác nhau. Do hiện nay, một số trình duyệt như Chrome, Firefox, Edge, Safari, Opera,… trở nên phổ biến, vì vậy bạn chỉ cần thiết kế giao diện để hiển thị tốt trên 1 số trình duyệt như Chrome, Firefox và Edge là được. Lưu ý một số thành phần HTML sẽ hiển hơi khác 1 chút trên các trình duyệt.
Màu sắc: Một trang web chỉ nên có 4 màu “chủ đạo” trong thiết kế. Chữ chủ đạo có ý nghĩa là “những màu chính”, bạn được phép thiết kế nhiều màu hơn, nhưng chú ý sự cân bằng màu sắc.
Font chữ và kích thước chữ: Font chữ ở mỗi thành phần có thể khác nhau, tuy nhiên dùng 1 hoặc 2 font chính. Màu sắc chữ phải tương phản với màu nền, giúp người dùng cảm giác dễ chịu khi theo dõi.
Tối ưu mã nguồn: Tránh áp dụng quá nhiều mã nguồn HTML cho những thành phần không cần thiết.

Giao diện trang web

Trang web sau đây gồm 4 phần:

Phần Header: Tên website, mô tả ngắn website, logo,…
Phần Nagigation: chứa menu chính
Phần Body: chứa nội dung cột phải và cột trái
Phần Footer: Thông tin trang web, thông tin bản quyền,…

Giao diện 2 cột, tỉ lệ 4/8

Giao diện sau thể hiện nội dung website có 2 cột chính: chia theo tỉ lệ 4 và 8. Miễn sao cộng lại đủ 12 theo định nghĩa hệ thống lưới của Bootstrap 4.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bố cục trang web Bootstrap 4 --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <style>
  .fakeimg {
    height: 200px;
    background: #aaa;
  }
  </style>
</head>
<body>

<div class="container">

<!-- Phần header website -->
<div class="jumbotron text-center" style="margin-bottom:0">
  <h2>Tiêu đề trang web --- DAMMIO.COM</h2>
  <p>Phóng to/thu nhỏ trang web để xem sự thay đổi bố cục</p> 
</div>
<!-- Kết thúc phần header website -->

<!-- Phần menu chính -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">DAMMIO.COM</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">
      <li class="nav-item">
        <a class="nav-link" href="#">Mục 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Mục 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Mục 3</a>
      </li>    
    </ul>
  </div>  
</nav>
<!-- Kết thúc phần menu chính -->

<!-- Phần nội dung chính -->
<div class="row">

	<!-- Cột trái -->
    <div class="col-sm-4">
      <h2>Thông tin cá nhân</h2>
      <h5>Hình ảnh:</h5>
      <div class="fakeimg">Vùng giả hình ảnh</div>
      <p>Nhãn mô tả cho hình ảnh</p>
      <h3>Liên kết</h3>
      <p>Nội dung mục liên kết</p>
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Kích hoạt</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Liên kết 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Liên kết 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Vô hiệu hóa</a>
        </li>
      </ul>
      <hr class="d-sm-none">
    </div>
	<!-- Kết thúc cột trái -->
	
	<!-- Cột phải -->
    <div class="col-sm-8">
      <h2>TIÊU ĐỀ 1</h2>
      <h5>Mô tả tiêu đề, Ngày 01 tháng 01, 2020</h5>
      <div class="fakeimg">Vùng giả hình ảnh</div>
      <p>Một số văn bản...</p>
      <p>Một số văn bản hiển thị ở website <a href="https://www.dammio.com">DAMMIO.COM</a>. Nội dung website là lập trình, thiết kế Web và học ngoại ngữ.</p>
      <br>
      <h2>TIÊU ĐỀ 2</h2>
      <h5>Mô tả tiêu đề, Ngày 01 tháng 01, 2020</h5>
      <div class="fakeimg">Vùng giả hình ảnh</div>
      <p>Một số văn bản...</p>
      <p>Một số văn bản hiển thị ở website <a href="https://www.dammio.com">DAMMIO.COM</a>. Nội dung website là lập trình, thiết kế Web và học ngoại ngữ.</p>
    </div>
	<!-- Kết thúc cột phải -->
	
  </div>
</div>
<!-- Kết thúc phần nội dung chính -->

<!-- Phần Footer -->
<div class="jumbotron text-center" style="margin-bottom:0">
  <p>Bản quyền 2020 thuộc về DAMMIO.COM.</p>
</div>
<!-- Kết thúc phần Footer -->

</body>
</html>

Giao diện 3 cột, tỉ lệ 3/6/3

Nếu bạn muốn bố cục chính có 3 cột thì cũng chia làm 3 cột theo tỉ lệ 3/6/3 như ví dụ sau.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bố cục trang web Bootstrap 4 --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <style>
  .fakeimg {
    height: 200px;
    background: #aaa;
  }
  </style>
</head>
<body>

<div class="container">

<!-- Phần header website -->
<div class="jumbotron text-center" style="margin-bottom:0">
  <h2>Tiêu đề trang web --- DAMMIO.COM</h2>
  <p>Phóng to/thu nhỏ trang web để xem sự thay đổi bố cục</p> 
</div>
<!-- Kết thúc phần header website -->

<!-- Phần menu chính -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">DAMMIO.COM</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">
      <li class="nav-item">
        <a class="nav-link" href="#">Mục 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Mục 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Mục 3</a>
      </li>    
    </ul>
  </div>  
</nav>
<!-- Kết thúc phần menu chính -->

<!-- Phần nội dung chính -->
<div class="row">

	<!-- Cột trái -->
    <div class="col-sm-3">
      <h2>Thông tin cá nhân</h2>
      <h5>Hình ảnh:</h5>
      <div class="fakeimg">Vùng giả hình ảnh</div>
      <p>Nhãn mô tả cho hình ảnh</p>
      <h3>Liên kết</h3>
      <p>Nội dung mục liên kết</p>
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Kích hoạt</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Liên kết 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Liên kết 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Vô hiệu hóa</a>
        </li>
      </ul>
      <hr class="d-sm-none">
    </div>
	<!-- Kết thúc cột trái -->
	
	<!-- Cột giữa -->
    <div class="col-sm-6">
      <h2>TIÊU ĐỀ 1</h2>
      <h5>Mô tả tiêu đề, Ngày 01 tháng 01, 2020</h5>
      <div class="fakeimg">Vùng giả hình ảnh</div>
      <p>Một số văn bản...</p>
      <p>Một số văn bản hiển thị ở website <a href="https://www.dammio.com">DAMMIO.COM</a>. Nội dung website là lập trình, thiết kế Web và học ngoại ngữ.</p>
      <br>
      <h2>TIÊU ĐỀ 2</h2>
      <h5>Mô tả tiêu đề, Ngày 01 tháng 01, 2020</h5>
      <div class="fakeimg">Vùng giả hình ảnh</div>
      <p>Một số văn bản...</p>
      <p>Một số văn bản hiển thị ở website <a href="https://www.dammio.com">DAMMIO.COM</a>. Nội dung website là lập trình, thiết kế Web và học ngoại ngữ.</p>
    </div>
	<!-- Kết thúc cột giữa -->
	
	<!-- Cột phải-->
    <div class="col-sm-3">
      <h2>Thông tin cá nhân</h2>
      <h5>Hình ảnh:</h5>
      <div class="fakeimg">Vùng giả hình ảnh</div>
      <p>Nhãn mô tả cho hình ảnh</p>
      <h3>Liên kết</h3>
      <p>Nội dung mục liên kết</p>
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Kích hoạt</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Liên kết 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Liên kết 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Vô hiệu hóa</a>
        </li>
      </ul>
      <hr class="d-sm-none">
    </div>
	<!-- Kết thúc cột phải -->
	
  </div>
</div>
<!-- Kết thúc phần nội dung chính -->

<!-- Phần Footer -->
<div class="jumbotron text-center" style="margin-bottom:0">
  <p>Bản quyền 2020 thuộc về DAMMIO.COM.</p>
</div>
<!-- Kết thúc phần Footer -->

</body>
</html>

Như vậy, DAMMIO.COM đã hướng dẫn bạn cách tạo 2 bố cục đơn giản mà hầu hết website nào cũng có. Chúc bạn thành công!