Tải bản đầy đủ (.pptx) (18 trang)
  1. Trang chủ
    2. >>
  2. Công nghệ thông tin
    3. >>
  3. Hệ thống thông tin

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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.68 MB, 18 trang )

C
S
S

F
R
A
M
E
W
O
R
K
S
G
r
o
u
p

a
n
o
n
y
m
o
u
s
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.+     

•
960 Grid System
•
Bootstrap
•

•

•

•

•

•

 
?
?
?
960 Grid !"#$$%&'())*+" &,-%".
(!((/0 1%&'23)4 (5  &,!
6!!" 7(8" !3
960 Grid 79 &,(:(; <=>".="6!>?"$@"(
((& (A 6&'B3
CD&0 

E:((&,(F('6,%@%"(G H!(I(


JK(%8"

L)<(M 

N( (%" .((N.7:((OP

$23)(A "(('Q

L&R (:(6,I(<(S)

L())((O-%"
T(5 (()

#/7)(URH68#$$

V(W("6!

E:((&, (A 6&'B(O3

XJ(M (-68(<(@ 

V(H((86!YZLX[
#(\W

]$+(;^^ ^

#(_%!6!(/(FZLX[;
<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.  
-
[&Q;V(H"(`a6bcd=>efa^6fJ(!((/(
-
g:W;h@"(@7:((&,!9";
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" 
h!"framework#$$%&'L(DT7!"i('"(-.(":(6! j7k%D
N (6<l%l BI(#$$6!(5 %YZLX[ @ ( 
* 0I( T !#$$. (Im(n' <:(%&'6)*+opq#.
L.V6.r
&%D


Zn'(Hs t6;U! 1*%"  Y(:((&,0\SI(<

L&R (:(@6,()ju(v;6,*(S)0((<.%G!")@B- E(A /(H "H+ (.
6,(w/())"/(-()j

C&':(('6,(&6<xp6!&R @6,(OZLX[y6!#$$9

T !hm%&'i(i(+H(&M 3+.(<(@ !<(&, z().(G(<6,A WI).&R (:(+(8
I(<.(8(((
#(\W 
B n có th t i v Bootstrap t i đây:+     />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 
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 

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay
×