apkm-search

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

Bootstrap 3 đã cập nhật giao diện phẳng giúp lập trình viên theo kịp thiết kế hot hiện nay là Flat Design với những tùy chọn mạnh mẽ hơn.

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

BÌNH LUẬN BÀI VIẾT

Leave a Reply

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

Notify of
avatar
Sort by:   newest | oldest
anhthien84 năm gắn bó cùng NQDung.COMLevel 1
anhthien8
2 comments

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ũng4 năm gắn bó cùng NQDung.COMLevel 1
Nguyễn Quốc Dũng
15 comments

Khung gợi ý nào bạn

anhthien84 năm gắn bó cùng NQDung.COMLevel 1
anhthien8
2 comments

Khung mua hostgator ấy ạ

Nguyễn Quốc Dũng4 năm gắn bó cùng NQDung.COMLevel 1
Nguyễn Quốc Dũng
15 comments

Ads In Post đó em

Hoang Phuc4 năm gắn bó cùng NQDung.COMLevel 1
3 comments

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 Blog4 năm gắn bó cùng NQDung.COMLevel 2
118 comments

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

Phạm Tấn Đạt4 năm gắn bó cùng NQDung.COMLevel 1

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 Đạt4 năm gắn bó cùng NQDung.COMLevel 1

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 Blog4 năm gắn bó cùng NQDung.COMLevel 2
118 comments

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

wpDiscuz