Thiết kế giao diện website với bootstraps

Cập nhật lần cuối: 18 Tháng Tư 2017

WordPress

2,407 Lượt xem

Xin chào các bạn đã trở lại. Hôm nay mình sẽ chia sẻ với bạn cách để tạo ra một giao diện html blog đẹp, nhanh chóng nhờ vào một framework có tên Bootstraps. Ở đây mình sẽ không nói nhiều đến Bootstraps nữa. Nó đơn giản chỉ là một tổ hợp chứa các css và js cung cấp các thuộc tính định dạng cho html mà chúng ta không cần phải viết thủ công thôi. Bây giờ hãy bắt đầu nhé.

Đầu tiên hãy tải Bootstraps về từ http://getbootstrap.com/ sau đó giải nén bạn sẽ có được các thư mục như css, js, fonts.

Phát thảo bố cục giao diện

Trong bài này mình sẽ thiết kế một trang chủ của website tin tức nhé. Các trang khác bạn có thể thiết kế tương tự.

Phát thảo giao diện trang chủ

Theo giao diện trên bạn sẽ phải thiết kế rất nhiều các div và chắc chắn sẽ phải css cho kích thước của từng div phù hợp như phát thảo. Tuy nhiên khi sử dụng bootstraps thì bạn sẽ chẳng phải làm gì cả ngoài việc lựa chọn các class phù hợp.

Cài đặt bootstraps và tạo các khung div

Trong thu mục đã giải nén của bootstraps bạn hãy tạo ra một file có tên “index.html“, sau đó code cấu trúc này trước. Nếu bạn đã học qua html thì cái này đơn giản đúng không.

Cài đặt bootstraps

<html>
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script src="js/bootstrap.min.js" defer=""></script>
 </head>
 
 
 <body>
 
 </body>
</html>

Trong thẻ head bạn cần import vào thư viện css và js của bootstraps, đồng thời nên import thêm jquery để một vài hàm trong bootstraps.min.js không sinh lỗi và có thể sử dụng ổn nhé.

Tạo khung div theo phát thảo

Phát thảo sao thì chúng ta sẽ tạo ra các div như vậy và dưới đây là đoạn code mình phát thảo theo, Trong đây đã có các comment chú thích rồi, bạn có thể xem lại từng cặp xem phù hợp chưa nhé.

<html>
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script src="js/bootstrap.min.js" defer=""></script>
 </head>
 
 
 <body>
 
 <div> <!--phần bao hết-->
 
   <div> <!--phần chứa logo và menu-->
     <div> <!--phần cho logo-->
     </div>
     
     <div> <!--phần cho menu-->
     </div>
   </div>
 
   <div> <!--phần chứa banner-->
   </div>
 
   <div> <!--phần chứa content-->
     <div> <!--phần chứa các item-->
     </div>
     <div> <!--phần chứa phân trang-->
     </div>
     <div> <!--phần chứa banner quảng cáo-->
     </div>
   </div>
 
   <div> <!--phần chứa sidebar-->
   </div>
 
   <div> <!--phần chứa footer-->
   </div>
 
  </div>
 
 </body>
</html>

Bạn lưu ý nên giữ vị trí của chúng cho phù hợp nhé. Thứ tự của chúng trên html cũng chính là thứ tự vị trí trên màng hình điện thoại đấy.

Lựa chọn các class phù hợp cho từng div

Bây giờ chúng ta sẽ cùng tìm hiểu về các class của bootstraps và lựa chọn những class phù hợp nhất cho các div để tạo ra một giao diện như ý nhé.

Phần bao hết

Nghe tên phần bạn cũng có thể biết nó sẽ bao hết toàn bộ trang web. Và ở cái div này mình có 2 class để lựa chọn đó là “.container” và “.containe-fluid” với lớp container bạn sẽ có được 2 khoảng trống hai bên còn containe-fluid thì full màng hình. Tuy nhiên ở những loại màng hình nhỏ như thiết bị di động thì tất cả đều full.

Và chắc chắn với thiết kế trên phát thảo thì chúng ta sẽ sử dụng lớp container nhé. và code như sau.

<div class="container"> <!--phần bao hết-->

Phần chứa logo và menu

Ta thấy phần này có chiều rộng gần như hết chiều rộng của div chứa nó nên ta sẽ sử dụng một class phổ biến trong bootstraps đó là “.row“. Nghe cái tên bạn cũng có thể biết được class này định dạng như thế nào rồi đấy. Tuy nhiên bạn nên nhớ class row hoàn toàn không full 100% chiều rộng của div chứa nó đâu nhé. Nó được định dạng cách lề trái và lề phải là -15px, tức là vượt ra ngoài div chứa của nó 15px. Bạn thêm class này vào như sau.

<div class="row"> <!--phần chứa logo và menu-->

Phần cho logo và phần cho menu

Cùng nằm trên một div chứa có class là row, nếu tổng kích thước chiều ngang của 2 phần này không vượt quá row thì nó sẽ nằm trên một hàng.

Có lẽ bạn nên tham khảo trước phần này tại: https://v4-alpha.getbootstrap.com/layout/grid/ để có thể hiểu rõ hơn. Tuy nhiên nếu bạn chỉ cần làm một website vừa đủ dùng thì có thể đọc tiếp.

Trong bootstraps thì row được định nghĩa là một hàng, thì col được định nghĩa là một cột. Tuy nhiên ở bootstraps người ta chia ra 12 cột thì nó sẽ được gắn với col để tạo ra một class như vậy. Tuy nhiên Bootstraps còn gắn các col này theo kích thước màng hình nữa, và họ chia nó thành 5 loại kích thước màng hình khác nhau nữa. 5 loại màng hình lần lượt là:

Màng hình cực nhỏ: Kích thước: <576px, ký hiệu: không có.
Màng hình nhỏ: Kích thước: ≥576px đến <768px, ký hiệu: sm.
Màng hình vừa: Kích thước: ≥768px đến <992px, ký hiệu: md.
Màng hình lớn: Kích thước: ≥992px đến <1200px, ký hiệu: lg.
Màng hình cực lớn: Kích thước: ≥1200px, ký hiệu: xl.

Công thức chúng cho các cột bootstraps đó là: col-{ký hiệu màng hình}-{số cột}

Khi col mang ký hiệu nào thì nó sẽ được áp dụng khi màng hình đang ở trong kích thước của ký hiệu đó.

Giả sử mình muốn hiển thị độ rộng div bằng 3 cột ở màng hình nhỏ và 6 cột ở màng hình lớn thì code như sau:

<div class="col-sm-3 col-lg-6"></div>

Tuy nhiên điều trên chỉ áp dụng cho các thiết kế với nhiều hộp phức tạp và yêu cầu các div linh hoạt khác nhau trong các kích thước màng hình khác nhau. Với yêu cầu đơn giản như website tuandc.com của mình thì bạn chỉ cần lựa chọn một đến 2 ký hiệu là ổn rồi. Ở đây mình sẽ sử dụng md thôi nhé.

 <div class="row"> <!--phần chứa logo và menu-->
    <div class="col-md-3"> <!--phần cho logo-->
    </div>
 
    <div class="col-md-9"> <!--phần cho menu-->
    </div>
 </div>

Tại sao lại 3 và 9. Bạn có thể tùy chỉnh 2 số này cho phù hợp nhưng tổng của nó phải bằng 12 nhé, vì 1 row chứa 12 col như phía trên mình đã nói. Vượt quá con số 12 giao diện của bạn sẽ bị vỡ và tràn xuống dưới.

Hoàn thành các phần còn lại

<div class="container"> <!--phần bao hết-->

  <div class="row"> <!--phần chứa logo và menu-->
    <div class="col-md-3"> <!--phần cho logo-->
    </div>
 
    <div class="col-md-9"> <!--phần cho menu-->
    </div>
  </div>
 
  <div class="row"> <!--phần chứa banner-->
 
  </div>
 
  <div class="col-md-8"> <!--phần chứa content-->
     <div class="col-md-6"> <!--phần chứa các item-->
     </div>
  
     <div class="col-md-12 "> <!--phần chứa phân trang-->
     </div>
 
     <div class="col-md-12"> <!--phần chứa banner quảng cáo-->
     </div>
  </div>
 
  <div class="col-md-4"> <!--phần chứa sidebar-->
  </div>
 
  <div class="row"> <!--phần chứa footer-->
  </div>
 
 </div>

Như vậy là chúng ra đã thiết kế xong bộ “khung xương” cho website rồi đấy. Bây giờ chúng ra sẽ tạo hình ảnh logo và menu nhé.

Tạo logo và Menu Responsive cho website trong bootstraps.

Hãy tạo một thư mục có tên “img” ngan hàng với các thư mục như css, js sau đó hãy tìm một tấm logo đẹp và để vào đây và thêm dòng code vào phần logo như thế này.

 <div class="col-md-3"> <!--phần cho logo-->
    <img src="img/logo.png" width="100%">
 </div>

Lúc này bạn sẽ có được một logo ở góc trái màng hình rồi đấy. Logo này mình để width = 100% là muốn nó luôn full độ rộng của div chứa nó. Nếu trên kích thước màng hình di động mà nó to quá thì bạn thêm class col-sm-3 cho div chứa và căn giữa lại nếu bạn thích.

Tiếp hãy tạo một Menu Responsive bằng đoạn code dưới đây

 <div class="col-md-9"> <!--phần cho menu-->
 
   <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
    </div>

    <div class="collapse navbar-collapse" id="collapse">
       <ul class="nav navbar-nav navbar-left">
         <li class="active"><a href="#">Trang chủ</a></li>
         <li><a href="#">Trang 1</a></li>
         <li><a href="#">Trang 2</a></li>
         <li><a href="#">Trang 3</a></li>
         <li><a href="#">Trang 4</a></li>
       </ul>
    </div>
  </nav>
 
 </div>

Như vậy là mình đã có được Menu Responsive hoàn chỉnh có thể tạo ra một cái menu collapse khi kích thước màng hình nhỏ đi.

Mình chỉ viết đến đây thôi vì bài đã rất dài rồi, và toàn bộ những thông tin trên sẽ giúp bạn có thể tạo ra một trang html chuẩn cho mình để dùng cho việc viết code sau này. Các thông tin khác bạn có thể nghiên cứu trên website http://getbootstrap.com. Hãy theo dõi series lập trình php của mình để có thể áp dụng theme bootstraps tốt hơn nhé.

Tác giả: ĐOÀN CÔNG TUẤN

Với niềm đam mê về khoa học công nghệ thông tin, đặc biệt là lập trình. Tôi đã thành lập blog Tuandc.com để lưu trữ và chia sẻ những kiến thức thực tế có được trong quá trình làm việc. Với kinh nghiệm gần 10 năm làm việc trong lĩnh vực, những kiến thức tôi chia sẻ hy vọng sẽ giúp được phần nào đó.