tìm hiểu về các loại css framework

960 Grid là một CSS Framework được thiết kế dựa trên một mạng lưới tọa độ, các thành phần của trang web sẽ được sắp xếp nằm trong những mạng lưới này và toàn bộ trang web có chiều r

CSS FRAMEWORKS

Group anonymous

CSS Framework

CSS FrameWork là các đo n mã css đạ ược vi t s n theo các id và class c đ nh giúp khi thi t k b n làm vi c nhanh h n, không ph i căn ế ẵ ố ị ế ế ạ ệ ơ ả

ch nh l i nhi u và không s b l i. ỉ ạ ề ợ ị ỗ

các loại css framework

• 960 Grid System

• Bootstrap

• Workless

• Foundation

• Gumby

• blueprint

960 grid system

???

960 Grid là một CSS Framework được thiết kế dựa trên một mạng lưới tọa độ,

các thành phần của trang web sẽ được sắp xếp nằm trong những mạng lưới này

và toàn bộ trang web có chiều rộng là 960px.

960 Grid có 3 mạng lưới chính: giao diện 12 cột, 16 cột và 24 cột Số cột khác

nhau nhưng không vượt quá 960px.

Điểm ưu của 960 grid

 Kích thước phù hợp với đa số độ phân giải màn hình.

 960 Grid rất dễ chia đều các cột.

 Tiết kiệm thời gian.

 Giúp cho trang web sinh động, thu hút, có tính thẩm mỹ.

 Sắp xếp thông tin một cách hợp lý.

 Tương thích với các trình duyệt phổ biến.

 Thiết kế theo chuẩn tọa độ.

Những hạn chế

 Cần có kiến thức cơ bản về CSS

 Phụ thuộc vào Framework

 Kích thước trang web không vượt quá chuẩn 960px

 Mất thời gian học về hệ thống Framework

 Phải them nhiều class vào mã HTML

Cách sử dụng

 Download 960 Grid System trên http://960.gs/.

 Chèn đoạn code này vào phần head cùa HTML:

< head >

     < meta charset = 'UTF-8' />

     < title > </ title >

     < link rel = 'stylesheet' href = 'css/reset.css' />

     < link rel = 'stylesheet' href = 'css/960.css' />

     < link rel = 'stylesheet' href = 'css/style.css' />

</ head >

<div class="container_12">

<div class="grid_3“ style="background:#666;">3 Cột</div> </div>

Container & Grid

- Container đ phân bi t s c t cho các thành ph n bên trong nh 12, 16, 24ể ệ ố ộ ầ ư

- Grid xác đ nh s c t.ị ố ộ

- Lưu ý: Phải tạo một thẻ <div class=“container_12”></div> bao lấy các thành phần khác

- Ví dụ: Bạn muốn tạo một khối có kích thước là 3 cột:

Hay nhi u c t:ê ộ

<div class="container_12">

<div class="grid_3 push_1" style="background:blue;">3 Cột</div>

<div class="grid_5" style="background:red;">5 Cột</div>

<div class="grid_4 pull_2" style="background:green;">4 Cột</div> </div>

Push & pull

- Đ y kh i qua trái - ph i tính theo c tẩ ố ả ộ

VD: ta đ y 2 kh i xanh dẩ ố ương qua ph i 1 ô và kh i xanh lá qua trái 2 ôả ố

<div class="container_12">

<div class="grid_3 push_1" style="background:blue;">3 Cột</div> <div class="grid_5" style="background:red;">5 Cột</div> <div class="grid_4 pull_2" style="background:green;">4 Cột</div>

</div>

Suffix & prefix

- Tăng padding ph i - trái, tính theo c t.ả ộ

VD: Ta mu n tăng padding-right kh i xanh dố ố ương 1 c t vào padding-left kh i xanh lá 1 c tộ ố ộ

<div class="container_12">

<div class="grid_3 suffix_1" style="background:blue;">3 Cột3 Cột3 Cột3 Cột3 Cột3 Cột3 Cột3 Cột3 Cột3 Cột3 Cột3 Cột3 Cột3 Cột3 Cột 3</div> <div class="grid_5 prefix_1" style="background:red;">5Cột</div>

<div class="grid_4" style="background:green;">4 Cột</div>

</div>

Tăng padding nên đ r ng các kh i cũng tăng theo Tuy nhiên n i dung c a kh i xanh dộ ộ ố ộ ủ ố ương v n không tràn qua c t th 4 mà v n chi m 3 c t.ẫ ộ ứ ẫ ế ộ

Alpha & omega

- Xóa margin trái - ph i kh i class GRIDả ố

<div class="container_12">

<div class="grid_12">

<div class="grid_3"style="background:blue;">3 Cột</div>

<div class="grid_5" style="background:red;">5 Cột</div>

<div class="grid_4" style="background:green;">4 Cột</div>

</div>

</div>

<div class="container_12"> <div class="grid_12">

<div class="grid_3 alpha" style="background:blue;">3 Cột</div>

<div class="grid_5" style="background:red;">5 Cột</div>

<div class="grid_4 omega" style="background:green;">4 Cột</div>

</div>

</div>

T i sao kh i xanh d ạ ố ươ ng l i d ch qua ph i 10px mà ko n m đúng v trí? Nguyên nhân là nó đang n m trong 1 kh i Grid khác Và thu c tính margin c a nó khi n nó ph i d ch qua ph i 10px Ta kh c ph c b ng ạ ị ả ằ ị ằ ố ộ ủ ế ả ị ả ắ ụ ằ cách s d ng class "alpha" và "omega" ử ụ

Bootstrap là một framework CSS được Twitter phát triển Nó là một tập hợp các bộ chọn, thuộc tính và giá trị có sẵn để

giúp web designer tránh việc lặp đi lặp lại trong quá trình tạo ra các class CSS và những đoạn mã HTML giống nhau trong

dự án web của mình Ngoài CSS ra, thì bootstrap còn hỗ trợ các function tiện ích được viết dựa trên JQuery(Carousel,

Tooltip, Popovers , )

ưu điểm

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

 Ngoài ra Bootstrap còn được cập nhật phiên bản thường xuyên, hệ thống tài liệu hướng dẫn chi tiết, thân thiện với các công cụ tìm kiếm, tương thích trên nhiều trình duyệt, nhiều theme khác nhau

Cách sử dụng twitter bootstrap

B n có th t i v Bootstrap t i đây: ạ ể ả ê ạ http://twitter.github.io/bootstrap/

Sau khi t i v , b n s có m t file Zip Ti n hành gi i nén ta có m t th m c có tên bootstrap, bên trong có 3 th m c : css, img, js.ả ê ạ ẽ ộ ế ả ộ ư ụ ư ụ

Chúng ta t o 1 file html có tên là index.html trong th m c bootstrap v a gi i nén ạ ở ư ụ ừ ả

K t qu làế ả

Các b n s th c m c t i sao button submit và reset l i ạ ẽ ắ ắ ạ ạ

không n m phía dằ ươi ???

Thu nh trình duy t và b n s th y đi u kỳ di u, đây chính là ph n nhóm mình mu n cho các b n th y đ d hình dung h n.ỏ ệ ạ ẽ ấ ê ệ ầ ố ạ ấ ể ễ ơ

Group Anonymous:

Vũ Th Thu Th y_K124061038ị u

H Th Phô ị ương Thúy_K124061040

Lê Th Trang_K124061052ị

Quách Th Hoài Vân_K124061069ị

Lê Phươc Hoàng Khang_K124062291

Tr n Th Thúy Nga_K124062301â ị