Tạo theme Bootstrap P1: Viết HTML cho trang chủ bằng Bootstrap

Ở bài trước mình có giới thiệu qua về Serie Thiết kế giao diện WordPress bằng Bootstrap cũng như những công cụ hỗ trợ, bài này mình sẽ bắt đầu hướng dẫn các bạn viết HTML cho trang chủ, nào chúng ta bắt đầu nhé.

Chuẩn bị

Bước 1: Tạo thư mục chứa giao diện

Tạo một thư mục đặt ở đâu đó tùy ý các bạn vì đây chỉ là nơi để ta lưu trữ các file html và css nên không cần thiết phải tạo trong Localhost (Wamp hay Xampp) ở đây mình tạo ở Desktop với tên thư mục là “bootstrap” mà sau đây mình sẽ gọi là Project.

Bước 2: Download và cài đặt Bootstrap

Các bạn vào http://getbootstrap.com/getting-started/#download và click vào button “Download Bootstrap” để tải bộ Framework tuyệt vời này về máy.

Giải nén toàn bộ và copy các thư mục “css”, “fonts” và “js” trong gói vừa giải nén vào trong Project vừa tạo.

Bước 3: Tạo các file cần thiết

Các bạn mở Sublime Text lên và Thêm Project mới vào bằng cách vào Menu “Project” -> “Add Folder to Project…” và tạo lần lượt các file sau:

  1. index.html
  2. style.less
  3. archive.html
  4. single.html
tao project bootstrap tren sublime text 2

Thêm Project vừa tạo vào Sublime Text 2

Bước 4: Thêm Project vào Prepros

Việc thêm như vậy là để cho phần mềm tự biên dịch file less thành file css theo chuẩn cũng như giúp ta viết CSS nhanh hơn.

Mở phần mềm lên và click vào nút “Add Project” ở góc dưới bên trái phần mềm và chọn đến thư mục của Project.

Thêm Project vào Prepros

Thêm Project vào Prepros

Viết HTML trang chủ (index.html)

Bước 1: Viết sườn html theo chuẩn Bootstrap.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--&#91;if lt IE 9&#93;>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <!&#91;endif&#93;-->
  </head>
  <body>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Bước 2: Viết Header (Đầu trang) cho trang chủ.

Ở phần đầu trang ta có những phần như sau gồm:

  1. Logo
  2. Khung tìm kiếm
  3. Menu chính.

Các bạn thêm đoạn code sau đây vào sau thẻ mở <body> và mình sẽ giải thích bên dưới cho các bạn dễ hình dung:

<header>
  <div class="container">
    <div class="row">
      <div class="logo col-md-6 col-sm-6 col-xs-12"><h1><a href="#">Xuân Thức Theme</a></h1></div>
      <div class="search col-md-6 col-sm-6 col-xs-12 text-right">
        <form method="get" action="#">
          <input type="text" placeholder="Nhập từ khóa tìm kiếm" id="q" name="q" value="">
          <input type="submit" value="Tìm Kiếm">
        </form>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="header-menu">
      <!-- Menu do Bootstrap cung cấp có hỗ trợ menu trên di động -->
      <nav class="navbar navbar-default">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Trang chủ</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#">Giới thiệu</a></li>
            <li><a href="#">Thiết kế web</a></li>
            <li><a href="#">SEO</a></li>
            <li><a href="#">Marketing Online</a></li>
          </ul>
        </div>
      </nav>
      <!-- End Menu Bootstrap -->
    </div>
  </div>
</header>

Mình xin giải thích một số hàm sử dụng bên trên:

  1. <div class=”container”></div>: là dùng để tạo một vùng chứa trang web và tạo ra khoảng trống 2 bên các bạn có thể xem hình bên dưới để hiểu rõ hơn.

    Cấu trúc website Bootstrap - Ảnh: Xuân Thức Blog

    Cấu trúc website Bootstrap – Ảnh: Xuân Thức Blog

  2. <div class=”logo col-md-6 col-sm-6 col-xs-12″>: Bootstrap sẽ chia từng vùng trang web của các bạn thành 12 cột có kích thước bằng nhau trên mọi kích thước màn hình. Dòng lệnh này có nghĩa là chia div logo bằng 6 cột trên máy tính và tablet (máy tính bảng) và 12 cột trên điện thoại. Các bạn có thể xem cụ thể tại đây.

    cau truc bootstrap 2

    Mỗi vùng đều được chia làm 12 cột – Ảnh: Internet

  3. Phần code trong nội dung thẻ <div class=”header-menu”> chính là menu chính của website đoạn code này được Bootstrap cung cấp nên các bạn cứ thế lấy ra mà dùng, các bạn xem thêm tại đây.
  4. <div class=”row”>: div này giúp cho các phần tử bên trong nó được padding rộng ra 15px về 2 bên, vì thẻ <div class=”logo col-md-6 col-sm-6 col-xs-12″> sẽ tạo ra padding 15px nên ta cần phải có thẻ div row, còn nếu bên trong không có thẻ col- thì ta không cần phải có thẻ này.

Bước 3: Viết Wrapper (Phần thân) cho trang chủ.

Tạo sườn cho Wrapper của trang web bằng việc thêm đoạn code sau vào dưới thẻ đóng </header>:

<div id="wrapper">
  <div class="container">
    <div class="row">
      <div class="content col-md-9 col-sm-9 col-xs-12">

      </div>
      <div class="sidebar col-md-3 col-sm-3 col-xs-12">

      </div>
    </div>
  </div>
</div>

Viết phần Content như đoạn code bên dưới:

<div class="content col-md-9 col-sm-9 col-xs-12">
  <div class="slider"><img src="http://placehold.it/850x250"></div>
  <div class="box-index">
<h2>Thiết kế web</h2>
    <div class="row">
      <div class="item col-md-3 col-sm-3 col-xs-6">
        <span><a href="#" class="thumbnail"><img src="http://placehold.it/200x200"></a></span>
        <h3><a href="#">Tiêu đề bài viết</a></h3>
      </div>
      <div class="item col-md-3 col-sm-3 col-xs-6">
        <span><a href="#" class="thumbnail"><img src="http://placehold.it/200x200"></a></span>
        <h3><a href="#">Tiêu đề bài viết</a></h3>
      </div>
      <div class="item col-md-3 col-sm-3 col-xs-6">
        <span><a href="#" class="thumbnail"><img src="http://placehold.it/200x200"></a></span>
        <h3><a href="#">Tiêu đề bài viết</a></h3>
      </div>
      <div class="item col-md-3 col-sm-3 col-xs-6">
        <span><a href="#" class="thumbnail"><img src="http://placehold.it/200x200"></a></span>
        <h3><a href="#">Tiêu đề bài viết</a></h3>
      </div>
      <div class="item col-md-3 col-sm-3 col-xs-6">
        <span><a href="#" class="thumbnail"><img src="http://placehold.it/200x200"></a></span>
        <h3><a href="#">Tiêu đề bài viết</a></h3>
      </div>
      <div class="item col-md-3 col-sm-3 col-xs-6">
        <span><a href="#" class="thumbnail"><img src="http://placehold.it/200x200"></a></span>
        <h3><a href="#">Tiêu đề bài viết</a></h3>
      </div>
      <div class="item col-md-3 col-sm-3 col-xs-6">
        <span><a href="#" class="thumbnail"><img src="http://placehold.it/200x200"></a></span>
        <h3><a href="#">Tiêu đề bài viết</a></h3>
      </div>
      <div class="item col-md-3 col-sm-3 col-xs-6">
        <span><a href="#" class="thumbnail"><img src="http://placehold.it/200x200"></a></span>
        <h3><a href="#">Tiêu đề bài viết</a></h3>
      </div>
    </div>
  </div>
</div>

Phần slider chúng ta sẽ thêm vào sau khi đưa website sang wordpress lúc đó dùng plugin của wordpress chèn vào cho tiện, mình sẽ hướng dẫn khi làm đến phần này.

Thẻ <div class=”item”> dùng để hiển thị các bài viết ra trang chủ.

Viết phần Sidebar như đoạn code sau:

<div class="sidebar col-md-3 col-sm-3 col-xs-12">
  <div class="sidebar-item">
    <h4 class="widget-title">Tiêu đề sidebar</h4>
    <div class="textwidget">
      <img src="http://placehold.it/280x280">
    </div>
  </div>
  <div class="sidebar-item">
    <h4 class="widget-title">Tiêu đề sidebar</h4>
    <div class="textwidget">
      <img src="http://placehold.it/280x280">
    </div>
  </div>
</div>

Bước 4: Viết Footer (Chân trang) cho trang chủ

Thêm đoạn code sau vào dưới thẻ đóng wrapper, ngay trên phần <!– jQuery (necessary for Bootstrap’s JavaScript plugins) –> của file index.html

<footer>
  <div class="container">
    <div class="footer-info text-center">
      XuanThuc Blog Copyright© 2013 - Chuyên trang chia sẻ kiến thức về Thiết Kế Web và Lập Trình Ứng Dụng<br>
      (Nếu copy bất kỳ bài viết nào trên XuanThuc Blog vui lòng để lại nguồn để tôn trọng tác giả)
    </div>
  </div>
</footer>

Thẻ text-center trong bootstrap dùng để canh giữa các phần tử bên trong nó, tương tự đối với text-left và text-right.

Kết luận

Như thế là chúng ta đã xong phần sườn HTML cho trang chủ các bạn có thể click đúp chuột vào file index.html để xem thành quá, nhìn nó hơi xấu tí vì chúng ta chưa viết CSS cho nó cũng như là chưa thay hình ảnh cho bắt mắt.

html-bootstrap

Các bạn có thể download code của bài này tại đây
Ở bài tiếp theo mình sẽ hướng dẫn các bạn cách viết CSS để trang trí cho trang chủ của mình. Hẹn gặp lại các bạn.

Bài Viết Cùng Series:

GỬI BÌNH LUẬN