Bài 1: Giới thiệu và làm quen với Twitter Bootstrap

Có bao giờ bạn phải viết HTML/CSS rùi ngồi suy nghĩ “ Tại sao mình phải viết đi viết lại những class giống nhau ? ” hay là“ Mình sẽ tìm ra một công cụ thiết kế web nào đấy giúp mình làm HTML/CSS nhanh hơn không? “. Có một cách sẽ giúp bạn không những giải quyết được điều này mà còn làm được nhiều hơn thế!

Hôm nay tôi sẽ giúp các bạn giải quyết được vấn đề trên bằng một framework khá nổi tiếng, được các coder lựa chọn và tin dùng. Đó là Twitter Bootstrap framework.

1. Giới thiệu về Twitter Bootstrap famework

Bootstrap là một CSS Framework phổ biến nhất hiện nay do Twitter phát triển. Vậy CSS Framework là gì?

Hẳn là các bạn đã hiểu ít nhiều về khái niệm Framework, nó là bộ công cụ giúp thực hiện dễ dang hơn trên một nền móng xây dựng sẵn. Vậy ở đây Css Framework cũng là một công cụ nhằm mục đích như vậy, nó giúp design trang web bằng css nhanh hơn. Nghĩa 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 và phải tính toán chia vùng, để style cho trang web của mình, thì bạn chỉ cần nhớ biết các thành phần có trên trang web như col, 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 Bootstrap sẽ giúp bạn giải quyết.

Dù là một Framework nhưng nền tảng bạn cũng phải biết cơ bản về HTML/CSS cộng thêm sụ hỗ trợ đắc lực của Bootstrap tôi tin chắc việc viết giao diện trang web của bạn sẽ dễ dàng và đẹp mắt hơn nhiều, bạn sẽ tiết kiệm được khá nhiều thời gian dành cho việc khác 🙂 .

Những ưu điểm không thể bỏ qua 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 mọi thiết bị đặc biệt là các 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.

Bạn có thể dễ dàng tìm kiếm trên các công cụ tìm kiếm, luôn cập nhật những verson mới nhật, những tính năng tốt hơn.

Việc đầu tiên để có thể sử dụng Bootstrap là download về và sử dụng :). Bạn truy cập vào trang chủ của Bootstrap để down bản mới nhất getting started.

Trong quá trình sử dụng thì trang web http://getbootstrap.com sẽ là công cụ đặc lực để bạn tra cứu .

Tiếp sau đó bạn sẽ nhúng file jquery và css của bootstrap vào phần thẻ head, có 2 cách để thực hiện điều này:

Cách 1: download file jquery ở trang Jquery.com và load trực tiếp vào

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

Cách 2: Sử dụng nguồn từ CDN

Bầy giờ sẽ bắt đầu vào công đoạn quan trọng nhất là sử dụng nó, bạn hãy test với một đoạn code đơn giản như sau

<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>

2. Grid system

Hệ thống grid Bootstrap 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. Vậy chúng ta có thể chia web thành các cột, nó sẽ dễ dàng trong việc chia vùng trang web của bạn.

Vì chia cột theo % nên rất tốt cho việc responsive trang web của bạn.

Chúng ta sẽ bắt đầu với một ví dụ đơn giản để thấy được khả năng của cực kì tuyệt vời của bootstrap nhé:

copy đoạn code này vào và hiển thị trên trình duyệt bạn sẽ thấy được điều kì diệu mà bootstrap có thể làm được

<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>

Kết quả:

Các bạn có thể co dãn tùy ý.

Ở ví dụ trên thì layout được chia thành 3 row được bao trong class=” container” ( nếu dùng class=” container layout” sẽ được co 2 bên màn hình một khoảng, còn nếu dùng class=”container-fluid” độ rộng layout sẽ full màn hình). Vì đồ rộng được chia theo % nên dù cho kích thước màn hình thế nào thì vẫn giữ được tỉ lệ

Ở hàng thứ nhất gồm một thành phần sẽ được chia thành 12 cột
Hàng thứ 2 tôi chia thành 2 thành phần, thành phần 1 gồm 8 cột, thành phần 2 gồm 4 cột nên bạn sẽ thấy rõ thành phần 1 có kích thước gấp đôi thành phần 2.
Còn ở hàng thứ 3 được chia theo tỉ lệ 6-6 có nghĩa là thành phần 1= thành phần 2 = 6 cột.

Như vậy chắc mọi người đã hiểu rõ cách chia grid và cách thứ hoạt động của bootstrap rùi, ở đây tôi dùng col-md ( medium devices ) đây là kích thứ thiết bị laptop. Ngoài ra còn nhiều kích thứ khác mà bootstrap đã thiết lập sẵn. Cách thứ sử dụng thì tương tự như col-md tôi không nói thêm nữa.

Rõ ràng ở ví dụ trên bạn dùng col-md nên nó chỉ reponsive được ở thiết bị Medium như laptop, còn nếu bạn co lại thì chúng sẽ nằm trên cùng một cột. Để khắc phục được điều này thì bạn phải thêm các class thích hợp ( bạn xem ở bảng trên ), để phù hợp cho từng thiết bị nhé!$ là số cột cần chia.

3. Offset

Nếu như bạn chia cột cho layout nhưng muốn để trống một số cột nào đấy. Bình thường các bạn sẽ tạo ra một div rùi để trống chúng. Làm thế thì cũng được nhưng tôi nghĩ nó sẽ thừa div này, vì có những không sử dụng. Để giải quyết được vấn đề này trong bootstrap có một thuộc tính đấy là offset.

Offset được dùng tương tự như các col khác nhưng offset sẽ bỏ trống đúng bằng số cột mà ta gọi.

Ví dụ:

<div class="row">
      <div class="col-md-6 col-md-offset-3">ví dụ về offset</div>
</div>

Ở ví dụ trên thì vùng bỏ trống sẽ là 3 cột đầu ( vì bạn thêm class=”col-md-offset-3″ ), và vùng thứ 2 có số cột là 6, còn lại là 3 cột thì các bạn không cần chia thêm div nào nữa. Bởi vì offset có xu hướng bỏ trống phần bên trái.

4. Column 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ớp col-md-push-$ và col-md-pull-$. Ví dụ:

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

và kết quả

ở ví dụ trên thì bạn thấy rõ thứ tự đã bị đổi.

Vậy sự khác nhau giữa push và offset là gì:

Offset căn lề bằng cách sử dụng margin-left còn push căn lề sử dụng left.
Và khi sử dụng offset cá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.

5. Media queries

Để website của mình responsive tốt với mọi thiết bị thì chúng ta cần sử dụng thêm media queries có thể tùy chình css cho từng kích cỡ. Ai đã dùng responsive thì ai cũng biết rùi. Ở bootstrap có các media queries tương ứng với các kích thước sau:

Sử dụng với min-width:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Sử dụng với max-width:

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Như vậy tôi đã giúp các bạn tìm hiểu và làm quen với Twitter Bootstrap Framework. Bài tiếp theo tôi sẽ giới thiệu cho các bạn về các component của bootstrap. Các bạn đừng bỏ lỡ nhé!

1. Giới thiệu về Twitter Bootstrap famework

2. Grid system

3. Offset

4. Column ordering

5. Media queries

Các bài trong series

Các bài viết liên quan

10+ Plugin wordpress miễn phí trang trí giáng sinh cho trang website của bạn

Sử dụng plugin để cắt lại kích thước ảnh trong WordPress

Hiển thị SlideShare trên trang WordPress

Vì sao website WordPress của bạn có tốc độ load chậm?

Những plugin tốt nhất dùng để backup dữ liệu cho WordPress

Những plugin WordPress về SEO và Social tốt nhất

Hướng dẫn tạo Mega Menu WordPress bằng plugin

Cách khắc phục và bảo mật website của bạn trong năm 2015