Hôm nay mình sẽ giới thiệu cho các bạn cách để giải quyết vấn đề trên.Đó là sử dụng Twitter Bootstrap.
A- Giới thiệu về Twitter Bootstrap
Twitter Bootstrap bao gồm các mã CSS + HTML cơ bản cho typography,
forms, buttons, tables, grids, navigation, và nhiều thành phần khác của
website.Twitter Bootstrap cung cấp lưới cố định (fixed) rộng 940px và 12 cột. Tất nhiên là cũng có giải pháp cho việc dùng layout dạng động (fluid).
Style của các phần tử HTML trong Twitter Bootstrap khá đơn giản và thanh lịch. Ví dụ như phần đổ bóng trong input, highlight của bảng biểu, các mã CSS hiển thị cảnh báo, tabs, phân trang…
B- Tại sao lại sử dụng Twitter Bootstrap
Như mình đã giới thiệu ở trên , Twitter Bootstrap giúp chúng ta giảm
thiểu thời gian thiết kết html và css.Twitter Bootstrap định nghĩa sẳn
các class css công việc của chúng ta chỉ là sử dụng các class đó vào mục
đích của mình.Twitter Bootstrap còn hổ trợ Responsive design một cách
làm giao diện đa thiết bị rất được ưu chuộng trong thời gian gần đây
C- Cách sử dụng Twitter Bootstrap
Như mình đã giới thiệu ở trên , Twitter Bootstrap giúp chúng ta giảm
thiểu thời gian thiết kết html và css.Twitter Bootstrap định nghĩa sẳn
các class css công việc của chúng ta chỉ là sử dụng các class đó vào mục
đích của mình.Bạn có thể tải về Bootstrap tại đây: http://twitter.github.io/bootstrap/
Sau khi tải về, bạn sẽ có một file Zip. Tiến hành giải nén ta có một thư mục có tên bootstrap, bên trong có 3 thư mục : css, img, js.
Bước 1: Chúng ta tạo 1 file html có tên là index.html ở trong thư mục bootstrap vừa giải nén phía trên.
Vậy là xong phần head. Giờ chúng ta viết tiếp phần body với 2 textbox và 2 button như sau:
Vậy là xong. Ví dụ chỉ đơn giản vậy thôi.Bạn sẽ thắc mắc là sao chạy nút submit và reset lại không nằm xuống phía dưới???
Bạn hãy thu nhỏ trình duyệt và bạn sẽ thấy điều kỳ diệu, đó chính là phần mình muốn cho các bạn thấy để dễ hình dung hơn.
Còn nhiều điều thú vị nữa đang chờ bạn khám phá đấy. Chúc các bạn luôn thành công trong cuộc sống.Bootstrap là một CSS Framework phổ biến nhất hiện nay do Twitter phát triển. Vậy trước hết CSS Framework là gì? Hiểu theo từ framework thì nó là bộ công cụ giúp design trang web bằng css nhanh hơn. Nghĩa là là nó được trừu tượng hóa lên một mức cao hơn. Thay vì bạn phải hiểu rõ về các bộ chọn, các thuộc tính và giá trị trong CSS để style cho trang web của mình, thì bạn chỉ cần biết các thành phần có trên trang web như form, navbar, tooltip, dropdown-menu, modal, button,….. và add nó vào trang html của mình một cách thích hợp. Công việc còn lại là của Bootstrap.
Với kiến thức về HTML và sự hỗ trợ của Bootstrap như vậy một trang web đẹp mắt hoàn toàn nằm trong tầm tay dù bạn chưa học qua về CSS.
Ưu điểm của bootstrap:
- Hỗ trợ khả năng Responsive: tức là trang web sẽ tự động co giãn theo kích thước của cửa sổ trình duyệt.
- Tương thích tốt với thiết bị cỡ nhỏ: với sự phổ biến của smartphone hiện nay, đây là một yếu tố quan trọng. Không cần phải design một bản riêng cho mobile, với bootstrap bạn chỉ cần thiết kế một lần cho mọi thiết bị.
- Được tích hợp với thư viện jQuery và tương tác tốt với chuẩn HTML5 và CSS3.
Như vậy là bạn đã hiểu qua về Boostrap, để bắt đầu các bạn cần download nó tại http://getbootstrap.com/getting-started/#download sau đó add nó vào project của bạn. Phiên bản mới nhất thời điểm này là 3.1.1.
Trang http://getbootstrap.com/ cũng là nơi tra cứu tài liệu liên quan tới bootstrap.
Sau đó hãy load file jquery và css của bootstrap vào trang web của bạn. Hoặc có thể sử dụng nguồn từ CDN như sau:
1
2
3
4
5
| <!-- Bootstrap CSS --><link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /><!-- bootstrap JavaScript --><script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> |
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
| <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Cùng học Bootstrap</title><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"></head><body><h1>Hello, world! I am bootstrap 3</h1><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="js/bootstrap.min.js"></script></body> |
Grid System
Grid system là khái niệm bắt nguồn từ kỹ thuật in ấn, thiết kế các poster, bìa sách, tạp chí,…. Đó là một hệ thống các đường kẻ ngang, dọc chia không gian trang thành nhiều ô để bạn đặt bố cục cho các phần của trang.Được ứng dụng sang lĩnh vực thiết kế web, hệ thống grid chia layout web của bạn thành các hàng (row) và các cột (column). Cụ thể trong Bootstrap, layout sẽ được chia thành 12 cột, mỗi cột sẽ chiếm tỷ lệ % nhất định và bằng nhau trên layout.
Từ đây, đơn vị cơ sở để tính độ rộng cho các element mà bạn bố trí trên layout sẽ là cột. Tức là bạn sẽ chỉ định độ rộng của phần tử đó là 1, 2, 3 hay 6 cột chứ không phải là bao nhiêu pixel. Dù trang web bị co dãn thì tỷ lệ giữa các element này vẫn không thay đổi, điều này lý giải cho khả năng Responsive của Bootstrap.
Ví dụ minh họa:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <div class="container"> <div class="row"> <div class="col-md-12"> <h2>Hàng 12 cột cho medium device</h2></div> </div> <div class="row"> <div class="col-md-8"> <h3>Nội dung<h3> <P>Bạn đang học bootstrap 3</p> </div> <div class="col-md-4"> <p>Đây là slidebar</p> </div> </div> <div class="row"> <div class="col-md-6"> <h4>Hàng 6 cột cho medium device</h4> </div> <div class="col-md-6"> <h4>Hàng 6 cột cho medium device</h4> </div> </div></div> |
Ở ví dụ trên, layout của chúng ta có 3 hàng. Hàng thứ nhất có 12 cột, chính là lớp
.col-md-12. Hàng thứ 2 gồm 2 thành phần. Phần nội dung có 3 cột .col-md-8 còn phần slidebar có 4 cột – .col-md-4.Hàng còn lại gồm 2 thành phần, mỗi thành phần được bao trong 6 cột, là .
col-md-6.Nhìn như vậy chắc các bạn cũng đã hiểu rõ cách hoạt động của nó, để chia làm 4 cột ta dùng đặt tên class là
.col-md-4. Tương tự với 1 cột, 2 cột sẽ là .col-md-1, col-md-2,…..md (medium devices) chính là kích thước đại diện cho thiết bị desktop, ngoài ra còn có các loại kích thước khác mà bootstrap định nghĩa như sau:| Ký hiệu lớp | Thiết bị | Độ rộng lớp container | Chú thích |
.col-xs-$ |
Extra small | Auto | Dùng cho điện thoại kích thước nhỏ hơn 768px |
.col-sm-$ |
Small devices | 750px | Dùng cho tablets kích thước >= 768px |
.col-md-$ |
Medium devices | 970px | Dùng cho desktop ( >=992px) |
.col-lg-$ |
Large devices | 1170px | Dùng cho desktops >=1200px |
Chú ý:
- Bootstrap quy định các hàng (
.row) phải nằm trong lớp.containerhoặc lớpcontainer-fluid - Nếu bạn bao các hàng bằng lớp
containerthì chiều rộng của lớpcontainercủa các thiết bị khác nhau được cho ở bảng trên. Còn nếu dùngcontainer-fluidthì chiều rộng của nó sẽ full-width.
col-sm-$ hay col-xs-$ vào cùng với các lớp col-md-$.Ví dụ:
1
2
3
4
| <div class="row"> <div class="col-md-8 col-xs-6">Đây là slidebar</div> <div class="col-md-4 col-xs-6">Đây là slidebar</div></div> |
Offset
Giả sử bạn có một hàng 6 cột như sau:
1
2
3
| <div class="row"> <div class="col-md-6 col-md-offset-3">ví dụ về offset</div></div> |
.col-md-offset-$. Với $ là một số từ 0 đến 12 , chỉ số cột được căn lề trái margin-left ( chính là số cột dịch sang phải). Nếu $ lớn hơn 12 coi như là 0. Xem kết quả tại đây: http://www.bootply.com/129286Column ordering
Bạn có thể thay đổi thứ tự các thành phần trong hệ thống cột bằng cách đẩy nó sang phải( push) hoặc kéo nó sang trái( pull) bằng cách sử dụng các lớpcol-md-push-$ và col-md-pull-$. Ví dụ:
1
2
3
| <div class="row"><div class="col-md-3 col-md-push-3">I am bootstrap 3</div></div> |
Xem minh họa ở đây: http://www.bootply.com/129291
Chú ý
Nhiều bạn sẽ thắc mắc việc sử dụng
push và offset ở mục bên trên cho kết quả giống nhau. Tuy nhiên giữa chúng có sự khác biệt:- Offset căn lề bằng cách sử dụng
margin-leftcòn push căn lề sử dụngleft. - Và khi sử dụng
offsetcác cột được offset sẽ đẩy dồn các cột bên phải nó còn nếu dùng push và pull thì các cột này sẽ chồng chéo lên các cột khác kề phía mà nó dịch chuyển.
Như vậy là mình đã đi qua những khái niệm cơ bản ban đầu về Bootstrap. Hy vọng bài viết sẽ có ích cho những bạn đang muốn làm quen với bootstrap 3. Bài tiếp theo mình sẽ nói nhiều hơn về css, javascript và các components trong bootstrap. Hẹn gặp lại các bạn.
