Bootstrap là một framework front-end cực kỳ mạnh và phổ biến nên mình không cần phải giải thích về nó nhiều nữa. Hôm nay mình xin hướng dẫn cách sử dụng Grid System trong Bootstrap để phân chia cột ( Column ) cho bố cục của website mà không cần phải css gì thêm.

1 Bootstrap Grid System

Bootstrap Grid System cho phép bạn tạo được tối 12 cột đều nhau trên một trang hoặc chia theo từng khối riêng:

Bootstrap Grid System sẽ tự thay đổi theo kích thước trình duyệt (Responsive)

2 Grid Classes

Grid Classes là những class dùng để gán css theo mỗi kích thước trình duyệt khác nhau:
- xs (điện thoại)
- sm (tablets)
- md (desktops)
- lg (lớn hơn desktops)

3 Cấu trúc cơ bản của Bootstrap Grid:

<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>

- Chia 2 cột đồng đều:

<div class="row">
  <div class="col-sm-6">.col-sm-6</div>
  <div class="col-sm-6">.col-sm-6</div>
</div>

- Chia 2 cột không đồng đều:

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-9">.col-sm-9</div>
</div>

- Chia 3 cột đều:

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

.... bạn có thể tự vận dụng để chia cột theo ý mình nhé.

4 Chia cột responsive:

Bạn có thể sử dụng grid class để phân chia theo từng giao diện riêng. Ví dụ:

  <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"> Your content 1 </div>
  <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"> Your content 2 </div>
  <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"> Your content 3 </div>
  <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"> ... </div>

Trong ví dụ trên, khi giao diện mobile thì tự động sẻ thành 1 cột lớn (col-xs-12), giao diện tablet thì tự động chuyển thành 2 cột đều (col-sm-6), giao diện desktop => 3 cột đều (col-md-4) và khi giao diện màn hình lớn => tự động chia thành 6 cột đều nhau (col-lg-2)

Rất dễ dàng phải không nào? Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Tạo menu dropdowns nhanh trong Bootstrap  
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Các ví dụ về cách dùng Bootstrap Pagination
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin

Bootstrap Pagination là một thành phần có sẵn trong Bootstrap dùng để tạo phần đếm trang (Pager) dễ dàng cho website.

Sau đây là các ví dụ đơn giản về cách dùng Bootstrap Pagination:

1 - Kiểu cơ bản: Chỉ đơn giản bạn sử dụng class pagination với cấu trúc như sau

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Demo:

• 1
• 2
• 3
• 4
• 5

2 - Kiểu Active: Dùng với class active để định vị trang đang truy cập

 <ul class="pagination">
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Demo:

• 1
• 2
• 3
• 4
• 5

3 - Kiểu Disabled: Dùng để đặt một trang bất kì ở trạng thái bị khóa, dùng với class disabled

 <ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="disabled"><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Demo:

• 1
• 2
• 3
• 4
• 5

4 - Điều chỉnh kích thước: pagination-lg là kích thước lớn, pagination-sm là kích thước nhỏ

 <ul class="pagination pagination-lg">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

<ul class="pagination pagination-sm">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Demo:

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Tạo menu dropdowns nhanh trong Bootstrap  
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin

Bootstrap Modal Plugin là thành phần sẵn có trong Bootstrap, ta chỉ cần gọi nó ra và sử dụng.

Cách gọi như sau: Đặt đoạn code sau vào trong thẻ <body>

<!-- Button dùng để gọi popup -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Click để mở popup</button>

<!-- popup -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Popup Header</h4>
      </div>
      <div class="modal-body">
        <p>Nội dung popup.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Giải thích: 

Nút gọi popup:
-  data-target="#myModal" là dùng để xác định popup nào được gọi (nếu có nhiều popup trên cùng trang), trong ví dụ trên là popup có id là #myModal
- data-toggle="modal" là lệnh mở một Modal Popup trong Bootstrap

- Bạn có thể sử dụng button hoặc thẻ <a> để gọi popup nhưng phải luôn có 2 thuộc tính ở trên.

Popup:
- Thẻ <div> cha chứa  id="myModal" dùng để xác định popup nào được gọi khi click button, class .modal xác định nội dung nào là của popup
- Class fade là hiệu ứng transition với fade in và fade out.
- Thuộc tính role="dialog" hiển thị popup dạng dialog
- Class modal-dialog dùng để set width và margin cho popup, bạn có thể thêm class modal-sm hoặc
modal-lg để set độ lớn nhỏ của pupup

Phần Modal content
Nơi chứa nội dung chính mà bạn muốn hiển thị trong popup. Ở phần này có thể tùy chỉnh hoặc giữ nguyên mặc định nếu muốn.

Lưu lại và chạy thử trên trình duyệt, click button "Click để mở popup" để xem kết quả.

Hoặc bạn có thể download file demo dưới đây:

http://www.mediafire.com/download/sab04xcm7skk837/Popup+Bootstrap+Example+-2.htm

Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Tạo menu dropdowns nhanh trong Bootstrap  
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Các ví dụ về cách dùng Bootstrap Pagination
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin

Trong Bootstrap hỗ trợ nhiều dạng button khác nhau nhằm làm cho phù hợp hơn cho mỗi trường hợp được dùng. Sau đây là các dạng button chính:

Class	Demo	Ý nghĩa
.btn		Cơ bản
.btn-default		Mặc định
.btn-primary		Nhấn mạnh
.btn-success		Thành công hoặc việc gì đó tích cực
.btn-info		Thông tin
.btn-warning		Cảnh báo
.btn-danger		Nhấn mạnh hoặc cảnh báo
.btn-link		Đường dẫn
.btn-lg		Lớn
.btn-sm		Nhỏ
.btn-xs		Rất nhỏ
.btn-block		Button nằm trong khối, chiều dài bằng với thành phần cha
.active		Đang hoạt động
.disabled		Đã bị vô hiệu hóa

Cách dùng cơ bản:

<button type="button" class="btn btn-default" disabled="disabled">Disabled default button</button>

Lưu ý: Bạn có thể sử dụng những style này với các thành phần khác như <a>,<button>, hoặc <input>

Chúc các bạn thực hiện tốt!

Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Tạo menu dropdowns nhanh trong Bootstrap  
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Các ví dụ về cách dùng Bootstrap Pagination
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin

Dropdown menu là thành phần có sẵn trong Bootstrap, rất nhanh chóng và tiện lợi khi tạo một menu dropdown.

Sau đây là cách sử dụng:

Tạo một file html cơ bản như sau:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdowns menu </h2>
  <p>Menu dropdown này có header ngăn cách các cụm menu khác nhau:</p>
  <div class="dropdown">
    <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-header">header 1</li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">header 2</li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

</body>
</html>

Trong code html trên, từ thẻ <div class="dropdown"> là ta đã bắt đầu khởi tạo menu dropdown.

- Thẻ <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> dùng để tạo button khi ta click thì menu đổ xuống. Thành phần này bạn có thể dùng một thành phần html khác như div, a, span nhưng phải có class là dropdown-toggle  và data-toggle="dropdown"
-  Ta sử dụng menu dạng list với thành phần con là <li>, với những <li> có class là dropdown-header  thì nó sẻ là phần header ngân cách với các cụm menu khác.

Bây giờ, bạn lưu lại và chạy thử trên trình duyệt để xem kết quả nhé :)

Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Các ví dụ về cách dùng Bootstrap Pagination
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin

Tạo nhanh một slider trong Bootstrap bằng cách sử dụng Bootstrap Carousel Plugin có sẵn.

Bước 1: Chép đoạn code bên dưới đặt vào vị trí slide bạn muốn đặt trong thẻ <body>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="">
      <div class="carousel-caption">
        <h3>Tiêu đề ảnh 1</h3>
        <p>Description ảnh 1</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="">
      <div class="carousel-caption">
        <h3>Tiêu đề ảnh 2</h3>
        <p>Description ảnh 2</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="">
      <div class="carousel-caption">
        <h3>Tiêu đề ảnh 3</h3>
        <p>Description ảnh 3</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="">
      <div class="carousel-caption">
        <h3>Tiêu đề ảnh 4</h3>
        <p>Description ảnh 4</p>
      </div>
    </div>   </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

 Bước 2: Thay đổi đường dẫn hình ảnh, thông tin... ( phần được bôi đỏ trong đoạn code)

Chú ý: tại vị trí <!-- Indicators --> mỗi dòng <li> tương ứng 1 với 1 ảnh, nếu bạn thêm ảnh thứ năm hay tạo thêm một dòng <li> mới với data-slide-to="4".
Tương tự, bạn phải thêm một ảnh mới dưới phần <!-- Wrapper for slides -->

 Chúc các bạn thành công!


Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Tạo menu dropdowns nhanh trong Bootstrap  
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Các ví dụ về cách dùng Bootstrap Pagination
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Các kiểu styles button trong Bootstrap