Hướng dẫn thiết kế Website bằng Bootstrap Responsive

(Thao Marky's Productions) Ở phần 1 Thao Marky đã giới thiệu về Bootstrap Responsive, cách tải về và đặt trong đúng thư mục để có thể thiết kế website bằng Bootstrap Responsive.

Bài này Thao Marky sẽ hướng dẫn các bạn làm 1 trang Web đơn giản có đầy đủ chức năng Menu, slider, 3 cột content, footer.

Thao Marky sử dụng Template demo như hinh dưới

Ảnh Demo - Hướng dẫn thiết kế Website bằng Bootstrap Responsive​

Công đoạn đầu tiên là phân tích bố cục Website. Theo như ảnh Demo thì mình chia làm 6 phần (tương ứng với 6 thẻ Div lớn)

• Top
• Menu
• Slider
• Main
• Footer
• Copyright

Bao quanh 6 Div trên là Div class="container". Div này có tác dụng để xác định độ rộng Website. Cách xác định độ rộng Website thì ta căn cứ vào chiều rộng của ảnh lớn nhất (ở đây là Slider), như bài này là 960px.

1. Div Top

Div này đơn giản nhất, bạn chỉ cần sử dụng thẻ <img src="link ảnh" /> để trỏ đến file Logo của bạn. Vì logo luôn có link trỏ về trang chủ nên ta thêm thẻ <a></a> bên ngoài nó.

Code Logo - Hướng dẫn thiết kế Website bằng Bootstrap Responsive​

Code đầy đủ như sau

2. Div Menu

Trong phần này chúng ta sử dụng phần Navbar có sẵn của Bootstrap (vào trang http://getbootstrap.com/components/#navbar) và loại bỏ bớt những thứ mình không cần thiết

Giải thích:

class="navbar-brand": Khi Website thu nhỏ theo từng trình duyệt thì Menu sẽ hiển thị Class này và 1 Group (nhóm) các menu khác bên tay phải.
class="collapse navbar-collapse": Nghĩa đen là Sụp đổ, ta có thể hiểu là khi Menu bị co lại ứng với màn hình của trình duyệt Mobile.

Code Menu - Hướng dẫn thiết kế Website bằng Bootstrap Responsive​

Code đầy đủ như sau

Kết quả Menu như sau

Kết quả Menu - Hướng dẫn thiết kế Website bằng Bootstrap Responsive​

Các bạn lưu lại và mở file index.html lên xem thành quả. Logo và đoạn Menu của mình đã xuất hiện, bạn thử thu nhỏ trình duyệt và kéo to/nhỏ để xem sự thay đổi nhé.

Để làm đẹp Menu giống như file Template mẫu, chúng ta sử dụng CSS. Các bạn lưu ý là chúng ta sử dụng FireBug để xác định Class của nó và tạo Class tương ứng trong file Style.css để ghi đè lên file Bootstrap.css (nguyên tắc kế thừa trong CSS)

CSS Menu - Hướng dẫn thiết kế Website bằng Bootstrap Responsive​

Code đầy đủ phần Css cho Menu như sau

Vậy là đã xong phần Logo và Menu. Bạn hãy pha 1 tách trà hoặc Coffee thư giãn trước khi bước vào phần tiếp theo nhé

3. Div Slider

Phần này mình sử dụng ứng dụng Javascript Carousel của Bootstrap (link http://getbootstrap.com/javascript/#carousel)

Code đầy đủ như sau

Code Slider - Hướng dẫn thiết kế Website bằng Bootstrap Responsive
​

Giải thích:

Class="item": mỗi class này ứng với 1 slide của bạn. Có bao nhiêu slide thì bạn tạo số lượng class tương ứng.
Bên trong có 2 dòng: dòng trên là link ảnh, dòng dưới class="carousel-caption":Mô tả Slide (dòng hiển thị dưới slider)

Kết quả như sau

Kết quả Slider - Hướng dẫn thiết kế Website bằng Bootstrap Responsive​

4. Div Main

Phần này ta ứng dụng Grid (lưới, cột) của Bootstrap Twiter. Bootstrap chia thành 12 Grids cho toàn bộ Website. Tùy vào số lượng cột của trang mà ta lấy Grid tương ứng.
Ở đây ta có 3 cột ứng với 12 : 3 = 4. Như vậy ta có class="col-md-4".

Giải thích tên gọi của các cột
md: Medium devices ứng với màn hình Desktops (≥992px)
lg: ứng với màn hình Large devices Desktops (≥1200px)
sm: ứng với màn hình Small devices Tablets (≥768px)
xs: ứng với màn hình Extra small devices Phones (<768px)

Trong mỗi cột ta tạo 1 class="inner" để lát nữa chúng ta căn chỉnh từng cột cho phù hợp

Bên trong ta tạo thẻ <h3></h3> ứng với tên của từng cột, 1 đoạn text đặt trong thẻ <p></p> và ảnh đặt trong thẻ <img src=" " />

Làm tương tự như vậy ta đã có 3 cột hoàn chỉnh.

Code Main - Hướng dẫn thiết kế Website bằng Bootstrap Responsive​

Code đầy đủ như sau

Nào, cùng ra trình duyệt để xem kết quả. Đã hiển thị rồi đúng không các bạn? Nhưng để đẹp hơn thì ta cần làm CSS cho phần này.

Code CSS phần Main của Thao Marky

5. Div Footer

Phần này ta cũng sử dụng Grids để chia làm 4 tương ứng với col-md-3 (3x4=12)
Trong mỗi cột ta cũng tạo ra thẻ <h3></h3> để làm tên của cột, các thẻ <ul></ul> <li></li> để hiển thị ra list bên dưới.

Lưu ý là ở phần Footer, có 2 cột bên trái có mũi tên còn 2 cột bên phải không có nên ta cần tạo class cho thẻ <li class="arrow"></li> để phân biệt. Cột bên phải ta có mỗi dòng là 1 ảnh khác nhau nên mỗi thẻ <li></li> bên phải ta cần tạo class riêng sau đó để background (ảnh nền)

Code Footer - Hướng dẫn thiết kế Website bằng Bootstrap Responsive​

Code đầy đủ phần Footer như sau

Cũng như phần Main, ở đây ta cũng cần tạo CSS cho Footer để hiển thị đúng như bản Design.

Code đầy đủ phần CSS cho footer của Thao Marky như sau

6. Div Copyright

Vậy là Wesbsite thiết kế bằng Bootstrap Responsive của chúng ta đã sắp hoàn thiện, chỉ còn phần Copyright (bản quyền).
Phần này chúng ta chỉ cần tạo 1 thẻ <span></span> là đủ. Ta có thể thêm thẻ <a href=""></a> trong phần Coder/ Designer để link sang trang của mình.

Code đầy đủ như sau
<div id="copyright"> <span>©2014 Complexity HTML Theme - Web Design by <a href="http://www.thaomarky.com" title="Thao Marky">Thao Marky</a>'s Productions</span> </div>
Đoạn CSS cho phần Copyright

Vậy là đã xong phần thiết kế Website sử dụng Bootstrap Responsive. Mình cùng ra trình duyệt để xem kết quả nào.

Bổ sung: vì giao diện này của chúng ta độ rộng chỉ có 960px trong khi thẻ .container độ rộng mặc định là 1170px. Do vậy ta cần tạo 1 Query nếu màn hình lớn hơn 960px thì sẽ hiển thị website của chúng ta với kích thước 960px.

Code phần Query như sau

Xem bài trước: Hướng dẫn thiết kế Website ứng dụng công nghệ Bootstrap Responsive (Phần 1)
Hướng dẫn thiết kế Website bằng Bootstrap Responsive (Phần 2)
Xem Demo kết quả hoàn thiện tại đây

Công nghệ này giờ được sử dụng khá thông dụng trong lĩnh vực thiết kế web, tương lại sẽ rất phát triển