[HTML/CSS] Bootstrap 3 RC1 – Phẳng hóa giao diện Web

Lần trước mình đã giới thiệu Flatstrap – Thiết kế phẳng cho Bootstrap đến các bạn thì hôm nay mình xin giới thiệu đến các bạn Bootstrap 3 RC1 với phong cách phẳng.Nếu các bạn chưa rõ về thiết kế phẳng là gì thì có thể đọc lại bài viết trên.Ở bài viết này mình xin giới thiệu đến các bạn những thay đổi cũng như những tính năng mới của Bootstrap 3.

bootstrap 3

Tính năng mới của Bootstrap

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 :

 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:

 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ì FW đó 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.

bootstrap 3 grid

 

 

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.Các bạn cùng thảo luận nào !

Bạn có thể vào link sau để tìm hiểu thêm Bootstrap 3

10
Leave a Reply

avatar
5 Comment threads
5 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
Nguyễn Quốc Dũnganhthien8Nguyễn Quốc DũngHoang PhucQuốc Dũng Blog Recent comment authors
  Subscribe  
newest oldest
Notify of
anhthien8
anhthien8

Anh ơi, cho em xin cái plugin ở chỗ khung gợi ý đi anh. Em không biết plugin đó tên là gì cả ?

Nguyễn Quốc Dũng
Nguyễn Quốc Dũng

Khung gợi ý nào bạn

anhthien8
anhthien8

Khung mua hostgator ấy ạ

Nguyễn Quốc Dũng
Nguyễn Quốc Dũng

Ads In Post đó em

Hoang Phuc

Bootstrap 3 với Bootstrap 2 có thay đổi gì về JavaScript không nhỉ, bản 3 nhìn đẹp thiệt nhưng còn là RC nên sợ lỗi :byebye:

Quốc Dũng Blog

Bạn pm qua yahoo của mình nhé

Phạm Tấn Đạt

Dù đã xem nhưng có nhiều cái em ko làm được ! Anh có rãnh ko ? Nếu rãnh thì em chuyển tài khoản để anh làm giúp nhé ! ( Tiếc là giờ ko có tiền xài cái host free nhạt nhẽo quá !)

Phạm Tấn Đạt

Anh Dũng ơi ! Em đưa cho anh user và password của em để anh tùy chỉnh khung bình luận giống của anh được không ạ ! Em làm theo mà ko được !

Quốc Dũng Blog

Trong bài viết hướng dẩn làm theme bằng Bootstrap mình đã share rồi mà bạn xem lại nha