Bootstrap 3 RC1 hướng tới phong cách thiết kế phẳng

Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !

Đầu tháng 8 vừa rồi, Twitter đã cho ra mắt phiên bản Bootstrap 3 RC1 với phong cách phẳng (flat desgin). Bài viết xin giới thiệu với các bạn những thay đổi cũng như tính năng mới của Bootstrap 3.

Mobile first

Không giống như bản 2 được viết để thân thiện với mobile ở Bootstrap 3 thì được viết lại phần core dành cho di động trước.Để tương thích và có thể phóng to thu nhỏ trên di động thì bạn cần thêm vào thẻ <head> đoạn sau :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Responsive images

Hình ảnh trong Bootstrap 3 có thể responsive bằng cách thêm class .img-responsive khi thêm vào thì hình ảnh sẽ có width: 100% ; height: auto. Cách sử dụng như sau:

<img src="..." class="img-responsive" alt="Reponsive image">

Glyphicons

Nếu ở bản 2 thì các icon phải dùng đến hình ảnh thì ở bản 3 này đã được tách riêng ra và dùng Font icon giống như Font Awesome sắp tới mình sẽ giới thiệu đến các bạn

Grid system

Nói đến một css thì Grid system là thứ quan trọng nhất.Grid ổn định dể dùng thì framework đó mới thành công được. Ở phiên bản 2 Grid được sử dụng bằng cách dùng các class span nhưng qua bản 3 thì thay đổi nhiều và tốt hơn.

<!-- Trên desktop sẽ hiện là 8-4 còn trên di động thì 12-6 -->
<div class="row">
  <div class="col-12 col-lg-8">8</div>
  <div class="col-6 col-lg-4">4</div>
</div>
 
<!-- Trên máy tính thì sẽ hiện width 33.3% còn trên di động là 50% -->
<div class="row">
  <div class="col-6 col-lg-4">4</div>
  <div class="col-6 col-lg-4">4</div>
  <div class="col-6 col-lg-4">4</div>
</div>
 
<!-- Luôn là 50% cả trên di dộng lẩn desktop -->
<div class="row">
  <div class="col-6 col-lg-6">6</div>
  <div class="col-6 col-lg-6">6</div>
</div>

Qua ví dụ chúng ta thấy cách sử dụng của Grid System đã linh hoạt hơn…

Trên đây là một số thay đổi của bootstrap 3 so với bootstrap 2. Do đây là phiên bản RC nên có thể phiên bản chính thức có khác đôi chút. Bạn có thể vào link sau để tìm hiểu thêm Bootstrap 3

Nguồn: http://nqdung.com