Hướng dẫn thiết kế Website bằng Bootstrap Responsive (Phần 2)
(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.
Công cụ cần thiết:
- Trình duyệt FireFox
- Addon FireBug
- Bộ công cụ Bootstrap Twitter
- Phần mềm Notepad++
Các bạn đã sẵn sàng chưa?? Chúng ta bắt tay vào thiết kế Website nào….
Ở đây 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
<!– Begin Logo –> <div id=”top”> <a href=”index.html” title=”Home”><img src=”images/logo.png” alt=”” /></a> </div> <!– end logo –>
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
<!– Begin Menu –> <div id=”menu”> <nav class=”navbar navbar-default” role=”navigation”> <!– Brand and toggle get grouped for better mobile display –> <div class=”navbar-header”> <button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″> <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=”#”>HOME</a> </div> <!– Collect the nav links, forms, and other content for toggling –> <div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″> <ul class=”nav navbar-nav”> <li class=”active”><a href=”#”>SERVICE</a></li> <li><a href=”#”>EMPLOYEES</a></li> <li><a href=”#”>ABOUT</a></li> <li><a href=”#”>CONTACT</a></li> </ul> <form class=”navbar-form navbar-right” role=”search”> <div class=”form-group”> <input type=”text” class=”form-control”> </div> </form> </div><!– /.navbar-collapse –> </nav> </div> <!– End Menu–>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
body{margin:0px; padding:0px; width:100%; background: none repeat scroll 0 0 #1E2329;} ul {list-style: none outside none; margin:0; padding:0;} ul li {display: inline-block;} h1, h2, h3, h4, h5, h6{} a {text-decoration: none;} .navbar-default{background: #31363C;} .nav.navbar-nav a { color: #999999 !important; font-size: 15px; font-weight: bold; } .navbar { border: medium none; margin-bottom: 0; } .navbar-nav > li { border-right: 1px solid #454950; float: left; }
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
<!– Begin Manin–> <div id=”main”> <div class=”row”> <div class=”col-md-4″> <div class=”main_inner”> <h3>Built for WordPress 3.</h3> <p>Embrace change. WordPress 3 is here and a revolution has begun. Take advantage of the power of WordPress 3 with the all new Complexity Premium WordPress theme.</p> <img src=”images/product1.png” alt=”” /> </div> </div> <div class=”col-md-4″> <div class=”main_inner”> <h3>It couldn’t be more simple.</h3> <p>Complexity is everything it’s name isn’t – simple. This premium WordPress theme will have your website up and running on the Internet before you know it.</p> <img src=”images/product2.png” alt=”” /> </div> </div> <div class=”col-md-4″> <div class=”main_inner”> <h3>A true premium 8 in 1.</h3> <p>Complexity comes with eight unique styles, each handcrafted with an immense amount of detail. Flip between each style with ease through your WP admin panel.</p> <img src=”images/product3.png” alt=”” /> </div> </div> </div> </div> <!– End Main–>
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
#main { background: none repeat scroll 0 0 #fff; display: inline-block; width: 100%; } .row { margin-left: 0; margin-right: 0; } .main_inner { padding: 0 10px; } .main_inner h3 { color: #474747; font-size: 17px; font-weight: bold; } .main_inner > p { color: #474747; float: left; font-size: 13px; line-height: 25px; width: 100%; } .main_inner img { border: 1px solid #c7c7c7; border-radius: 5px; display: inline-block; padding: 5px; width: 100%; }
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 (3×4=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
<!– Begin Footer–> <div id=”footer”> <div class=”row”> <div class=”col-md-3″> <h3>From the Blog</h3> <ul> <li class=”arrow”>Lorem ipsum dolor sit amet</li> <li class=”arrow”>Lorem ipsum dolor sit amet</li> <li class=”arrow”>Lorem ipsum dolor sit amet</li> <li class=”arrow”>Lorem ipsum dolor sit amet</li> <li class=”arrow”>Lorem ipsum dolor sit amet</li> </ul> </div> <div class=”col-md-3″> <h3>From the Portfolio</h3> <ul> <li class=”arrow”>Lorem ipsum dolor sit amet</li> <li class=”arrow”>Lorem ipsum dolor sit amet</li> <li class=”arrow”>Lorem ipsum dolor sit amet</li> <li class=”arrow”>Lorem ipsum dolor sit amet</li> <li class=”arrow”>Lorem ipsum dolor sit amet</li> </ul> </div> <div class=”col-md-3″> <h3>From Twitter</h3> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</li> <li>2 days ago</li> <li><a href=”#” title=”Follow Us!”>Follow Us!</a></li> </ul> </div> <div class=”col-md-3″> <h3>Get in Touch</h3> <ul> <li class=”phone”>1-800-555-5555</li> <li class=”mail”>you@yoursite.com</li> <li class=”contact”>Contact Form</li> <li class=”skype”>YourSkypeUserID</li> <li class=”link”> <ul> <li><img src=”images/rss.png” alt=”rss” /></li> <li><img src=”images/twitter.png” alt=”twitter” /></li> <li><img src=”images/facebook.png” alt=”facebook” /></li> <li><img src=”images/myspace.png” alt=”myspace” /></li> <li><img src=”images/flick.png” alt=”flick” /></li> <li><img src=”images/linkin.png” alt=”linkin” /></li> </ul> </li> </ul> </div> </div> </div> <!– End footer–>
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
#footer { background: url(“../images/footer-col-bg.png”) repeat-x scroll 0 0 #191c21; } #footer h3 { color: #a7a7a7; font-size: 15px; font-weight: bold; } .form-control { background: url(“../images/search.png”) no-repeat scroll right center rgba(0, 0, 0, 0); border: 1px solid #080d13; width: 250px !important; } .arrow { background: url(“../images/arrow.png”) no-repeat scroll left center rgba(0, 0, 0, 0); color: #a7a7a7; padding-left: 10px; width: 100%; } #footer li { color: #a7a7a7; margin: 5px 0 0; width: 100%; } #footer li a{color: #fff;} .phone { background: url(“../images/phone.png”) no-repeat scroll left center rgba(0, 0, 0, 0); padding-left: 20px; } .mail { background: url(“../images/mail.png”) no-repeat scroll left center rgba(0, 0, 0, 0); padding-left: 20px; } .contact { background: url(“../images/contact.png”) no-repeat scroll left center rgba(0, 0, 0, 0); padding-left: 20px; } .skype { background: url(“../images/skype.png”) no-repeat scroll left center rgba(0, 0, 0, 0); padding-left: 20px; } .link { background: url(“../images/link.png”) no-repeat scroll left center rgba(0, 0, 0, 0); padding-left: 20px; } .link li { display: inline; padding: 0 2px; }
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=”https://www.thaomarky.com” title=”Thao Marky”>Thao Marky</a>’s Productions</span> </div>
Đoạn CSS cho phần Copyright
#copyright { background: url(“../images/footer-bg.png”) repeat scroll 0 0 rgba(0, 0, 0, 0); display: inline-block; height: 55px; padding: 15px 0; text-align: center; width: 100%; } #copyright span { color: #969696; }
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
@media only screen and (min-width:961px){ .container{width:960px; padding: 0;} }
Tìm kiếm trên Google
- Thiết kế Web
- Thiết Kế Web chuẩn SEO
- Thiết kế Web sử dụng Bootstrap
- Thiết kế Web sử dụng Responsive
- Hướng dẫn thiết kế Web bằng Responsive
- Hướng dẫn thiết kế Web sử dụng Responsive
- Hướng dẫn thiết kế Web bằng Bootstrap
- Lập trình Web
- Thiết kế web giao diện Mobile
- Bootstrap
- Bootstrap là gì?
- Bootstrap Twitter
- Bootstrap Twitter là gì?
- Responsive là gì?
- Hướng dẫn sử dụng Bootstrap Twitter
- Hướng dẫn thiết kế website sử dụng Responsive
- Thiết kế web theo mọi trình duyệt di động
