Tạo theme Bootstrap P1: Viết HTML cho trang chủ bằng Bootstrap BLOG
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:
- index.html
- style.less
- archive.html
- single.html
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
Viết
HTML trang chủ (index.html)
Bước
1: Viết sườn html theo chuẩn Bootstrap.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!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:// -->
<!--[if lt IE 9]>
<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>
<![endif]-->
</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:
- Logo
- Khung tìm kiếm
- 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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<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:
- <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
- <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.
Mỗi vùng đều được
chia làm 12 cột – Ảnh: Internet
- 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.
- <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>:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<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
|
1
2
3
4
5
6
7
8
|
<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.
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 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.
No comments
Post a Comment