Chọn Menu

Slider

FunFeed

Feed Mới Nhất

‹
›

Cung Hoàng Đạo

CrazyFeed

Slider

Videos

Hướng dẫn cắt : http://adf.ly/sl4rk






Link Download : http://adf.ly/srnBm

File psd : http://adf.ly/srnF3

-

Cắt Header với bootstrap – Part 2: CSS hoàn chỉnh

Xem part 1 tại đây và tải các file chuẩn bị: http://adf.ly/sl4rk

Full code dành cho mọi người tham khảo : http://adf.ly/srnBm

File psd : http://adf.ly/srnF3

Các file img cần thiết trong part 2:
logo

 --> file search_bg dùng làm bg box search và body

Tiếp tục với phần menu : Trong menu có 2 row là menu và box Serach, rất đơn giản chúng ta chỉ việc khai báo cho 2 thành phần này nằm trong 2 row.

Thay thế Menu bằng code :

<div class="row">
                <a class="btn btn-link" id="active" href="" >Specials</a>
                <a class="btn btn-link" href="">Fruits& Vegetable</a>
                <a class="btn btn-link" href="">Food Products</a>
                <a class="btn btn-link" href="">Locate Store</a>
                <a  class="btn btn-link" href="">Fan Club</a>
 </div>
<div class="row text-center" id="box-search">
            <input placeholder="Enter products details" type="text" style="width:400px; display: inline; padding-bottom: 15px;" class="form-control" size="50" /><label><a class="btn btn-danger" href="">Search <i class="fa fa-search"></i></a></label>
 </div>

Giải thích:

Class “btn btn-link” định dạng cho tag a là một button, gán id=”active” để chúng ta sẽ định dạng cho hiệu ứng active khi 1 button được select
Ở div thứ 2 ngoài class row chúng ta thêm class text-center để canh giữa vị trí các input, gán id=”box-search” để định dạng lại theo ý chúng ta muốn.
<i class="fa fa-search"></i>: xem thêm bài viết này để có những icon FAI theo ý bạn thích.
Tiếp tục với phần Sign-up:
Quan sát phần này chúng ta thấy có 2 button nằm trên 2 row sát nhau. Khai báo như sau:
<div class="row" id="sign">
            <a class="btn"  href="">Sign-up</a>
            </div>
            <div class="row" id="reg">
            <a class="btn"  href="">Reg</a>
 </div>

Cuối cùng là định dạng css để có 1 cấu trúc hoàn chỉnh.

Sau đây là full Css cà 2 part cho bạn nào tải về nghiên cứu ;)
@import url("bootstrap.min.css");
body{
            margin:auto;
            background-image:url(../image/search_bg.png);
            background-repeat:repeat;
}
#header{
            background-image:url(../image/head_bg.png);
            background-size:cover;
}
#number{
            color:white;
            font-size:18px;
}
#text-dec{
            color:#9BAFC8;
}
#header-top{
            padding-top:2px;
            background-image:url(../image/header_bg1.png);
            background-repeat:repeat-x;
            background-repeat:repeat-x;
            padding-bottom:10px;
           
}
#main a{
            margin-top:30px;
            text-transform:uppercase;
            color:#FFF;
            text-decoration:none;
            font-weight:bold;
}
#main #active{
            border: solid 1px rgba(0, 0, 0, 0.42);
            box-shadow: 100px 10px rgba(0, 0, 0, 0.42) inset;
            border-radius: 5px;
}
#sign a{
            margin-top:0px;
            color:#F00;
}
#sign{
            border-bottom:solid 2px  #259696;
            background-color:#E6F3F3;
            border-top-left-radius:5px;
            border-top-right-radius:5px;
        background: -moz-linear-gradient(bottom, #D5CFCF 30%, #FDFDFD 70%);
        background: -o-linear-gradient(bottom, #D5CFCF 30%, #FDFDFD 70%);
        background: -ms-linear-gradient(bottom, #D5CFCF 30%, #FDFDFD 70%);
       background: -webkit-gradient(linear,left bottom,left top,color-stop(0.1, #D5CFCF),color-stop(0.7, #FDFDFD));
}
#btn-log{
            border:solid 2px #259696;
            width: 100px;
            border-radius: 5px;
            margin-top: 25px;
            margin-left: 0px;
            box-shadow: -1px 2px rgba(10, 10, 10, 0.19);
}
#reg a{
            text-align:center;
            margin-top:0px;
}
#reg{
            background: -webkit-gradient(linear,left bottom,left top,color-stop(0.1, #40B4B4),color-stop(0.7, #84D6D6));
            border-bottom-left-radius:5px;
            border-bottom-right-radius:5px;
}
#main #box-search a{
            margin-top:8px;
}
#box-search{
            margin-top:5px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            padding-top: 5px;
            background-image:url(../image/search_bg.png);
            background-repeat:repeat;
            border-top: solid 1px #1A876D;
            margin-right: 90px;

}

Kích thước Desktop

 Kích thước mobile:


-
Font Awesome Icons(FAI) là bộ font chữ mang phong cách các biểu tượng thường nhật hàng ngày mà bạn hay gặp trên các website.Nhưng với hình dáng và màu sắc ko cầu kì, phức tạp, FAI mang đậm khuynh hướng đơn giản nhưng nổi bật, chắc chắn sẽ làm cho website của bạn trở nên lạ lẫm nhưng không kém phần cá tính. (y)



Để tích hợp vào website, bạn phải thực hiện các bước sau.

Tích hợp online : 

1.Bạn chỉ cần chèn đoạn code sau vào trước giữa cặp thẻ <head> và </head>.
  1. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
     save lại và thư viện FAI đã được tích hợp vào web của bạn. Việc còn lại là bạn chỉ cần gọi các class ra và sử dụng theo mục đích của bạn
  2. Chèn các biểu tượng bằng cặp thẻ <i class="fa fa-[tên icon]"></i>

Tích hợp offline: 

1. Download bộ nguồn tại đây : http://adf.ly/slM8m
2.Giải nén ra và chép vào thư mục website của bạn, việc cuối cùng là bạn chỉ việc chèn file font-awesome.min.css .

Sau đây là 1 vài ví dụ để bạn dễ hình dung :

Để khởi tạo 1 icon bạn phải bắt đầu bằng tag <i class="fa fa-[tên icon]"></i>
Ví dụ :
<i class="fa fa-camera-retro"></i> fa-camera-retro
Kích thước icon:
Để tăng kích thước các icon bạn dùng  fa-lg (tăng lên 33%), fa-2x, fa-3x, fa-4x, hoặc class fa-5x 

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
Sử dụng fa-fw để tạo những icon có độ rộng cố định. Rất hữa ích khi sử dụng làm những thanh nav hay menu, lists hay list groups..
<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>
Dùng fa-ul và fa-li để thay thế các dấu chấm mặc định của tag li ul :
<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
Dùng fa-border và pull-right hoặc pull-left để tạo 1 hình thay thế trong word-wrap:
<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.
Dùng fa-spin đễ có những icon động .Hoạt động tốt với class fa-spinner, fa-refresh, và fa-cog.
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
 Không hỗ trợ IE8 - IE9.
Xoay , lật các icon , dùng fa-rotate-* vàfa-flip-* .
<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

Kết hợp nhiều icons, sử dụng fa-stack ở div cha, fa-stack-1 ,cho kích thước chuẩn và fa-stack-2x cho kích thước lớn hơn. 
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera
Và phần quan trọng nhất, kết hợp với bootstrap :

<a class="btn btn-danger" href="#">
  <i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
  <i class="fa fa-cog"></i> Settings</a>

<a class="btn btn-lg btn-success" href="#">
  <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.2.0</a>

<div class="btn-group">
  <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
  <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
</div>

<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
  <input class="form-control" type="password" placeholder="Password">
</div>

<div class="btn-group open">
  <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="fa fa-caret-down"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
    <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
    <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
  </ul>
</div>
nhin chung việc kết hợp xấu hay đẹp còn phụ thuộc vào code bạn viết như thế nào, sự sáng tạo của bạn kết hợp sẽ mang lại cá tính riêng cho web của bạn .


-

Chuẩn bị :
Dreamwaver cs6
Cấu hình các thứ cần thiết trước khi bắt đầu làm.
File psd cần cắt tải tại đây : http://adf.ly/sl46i
 Nếu ai chưa cắt thì tải về các file hình mình đã cắt tại đây: http://adf.ly/sl4GS

Nhận định giao diện mà chúng ta cần cắt ở đây có 3 phần :

Header: gồm 5 cột.
Main: gồm 2 cột.
Footer: gồm 5 cột.

Đến với header:

 Phần background(bg -> phần hình nền) header bao trùm toàn bộ website giống như là 1 phần của thẻ body trong website, chính vì vậy chúng ta không được khai báo phần header trong class : container .Lý do rất đơn giản , trong bootstrap đã mặc định class container sẽ tự động canh giữa của website, nếu chúng ta đặt vào trong container thì phần bg sẽ nhảy vào trong giữa như hình :

Mình sẽ nói rõ hơn về các class và cấu trúc của bootstrap vào 1 bài chi tiết, ở đây mình chỉ giải thích sơ qua về cấu trúc mà mình sử dụng trong temp này.
Tạo 1 file có tên là index.php trong thư mục website của bạn, nhúng các file cần thiết vào.
Khai báo mặc định trong trang index giữ nguyên, ta được cấu trúc như sau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nhà hàng</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
</head>

<body>
</body>
</html>
Khai báo 3 tag div cần thiết cho 1 trang web:
<div id=”header”></div>
<div id=”main”></div>
<div id=”footer”></div>
Chúng ta được cấu trúc cho phần body như sau :
<div id="header" class="row">
<div id=”main” class="container">
            <div class="col-lg-3">left</div>
             <div class="col-lg-9">right</div>
</div>
<div id=”footer” class=”row”></div>
</body>

Giải thích :

Class row có tác dụng gì trong các tag div này ?
Class row khai báo 1 thuộc tính cho div đó là 1 hàng , nghĩa là tất cả những div con hay tag con trong div chứa class này đều nằm trong một hàng và các thuộc tính còn kế thừa cho các tag khác như float, border .v..v sẽ bị triệt tiêu khi vươt quá ngoài div chứa class này.
Đơn giản nó là khai báo 1 hàng dành cho riêng div này.
Class container : khai báo kích thước cho div và có giá trị mặc định tùy thuộc vào kích thước màn hình bạn sử dụng, và thuộc tính mặc dịnh của các div này sẽ canh giữa website.

Class col-lg-1 à col-lg-12 : khai báo tag div đó chiếm bao nhiêu cột trong 1 row mà  bạn đã khai báo.
Mặc định theo thứ tự để có được 1 kết cấu hoàn hảo là từ container -> row -> col-lg
Ví dụ:
<div class=”container”>
            <div class=”row”>
                        <div class=”col-lg-6”></div>
                        <div class=”col-lg-6”></div>
            </div>
</div>

Quay lại phần header, chúng ta có 5 phần cần hiển thị trong header, khai báo cho các thành phần này là 1 tag div có class như sau

<div id="header" class="row">
<div id="header-top" class="row">
                        <div class="col-lg-2">1-888-123-4567</div>
                        <div class="col-lg-4">Free Ground Shipping for Products over $100</div>
                        <div class="col-lg-2">Social</div>
                        <div class="col-lg-2">My account</div>
                        <div id="btn-cart" class="col-lg-2 btn btn-default">
                                     <a href="" class="btn" >Shop</a>
                                    <a href="" class="btn" >0.00$</a>
                        </div>
            </div>
</div

Tại sao chúng ta phải khai báo thêm 1 div có id là “header-top” nhìn vào hình bạn sẽ thấy phần header có 2 thành phần là header-top và header.

Bạn cứ tưởng tượng phần header-top chiếm ¼ chiều cao header nằm chồng lên phần header do đó chúng ta sẽ thấy được phần nền của header còn dư ra.



Giải thích:
Class btn : khai báo div là 1 button.
Class btn-default : khai báo cho 1  tag có thuộc tính là button có đường viền mặc định, nếu bạn muốn khai báo là 1 button thì trước đó bạn phải khai báo thêm class btn . ví dụ :
 <a href=”” class=”btn btn-default”>
Sau khi code như trên,test thử bạn sẽ thấy phần header chữ luôn canh lề trái, mặc dù cho bạn có khai báo bất cứ thuộc tính nào ghi đè lên vẫn không có tác dụng.
Lúc này bạn phải sử dụng đến class container : code như sau
<div id="header" class="row">
<div id="header-top" class="row">
       <div class="container">
                        <div class="col-lg-2">1-888-123-4567</div>
                        <div class="col-lg-4">Free Ground Shipping for Products over $100</div>
                        <div class="col-lg-2">Social</div>
                        <div class="col-lg-2">My account</div>
                        <div id="btn-cart" class="col-lg-2 btn btn-default">
                                     <a href="" class="btn" >Shop</a>
                                    <a href="" class="btn" >0.00$</a>
                        </div>
                     </div>
            </div>
</div

Giải thích: 

do class container bao toàn bộ các thành phần text trong header nên chỉ các thành phần này bị ảnh hưởng của class container à canh giữa được các thành phần này;


Đến đây thì đã gần hoàn tất phần header.
Các button mạng xã hội các bạn có thể tham khảo các image trên mạng hoặc sử dụng font http://fontawesome.io/ như mình đang sử dụng. Sẽ có 1 bài viết hướng dẫn các bạn sữ dụng các font này.

Khai báo css cho các thuộc tính này như sau:
Trong file style.css các bạn nhúng vào index.php các bạn code như sau:

@import url("bootstrap.min.css");
body{
            margin:auto;
}
#header{
            background-image:url(../image/head_bg.png); /* Đường dẫn hình nền của header */
            background-size:cover; /* tự co giãn kích thước phù hợp */
}
#header-top{
            padding-top:2px;
            background-image:url(../image/header_bg.png);
            background-size:cover;
            background-repeat:no-repeat;
            padding-bottom:10px;
}
Trong phần header phía dưới tag header-top chúng ta khai báo như sau :
<div id="main" class="container">
                    <div class="col-lg-2"><img src="image/logo.png" width="116" height="117" /></div>
        <div class="col-lg-8">Menu </div>
                     <div class="col-lg-2">Sign-up</div>
    </div>

Cuối cùng chúng ta được 1 cấu trúc hoàn chỉnh như file sau:

 http://adf.ly/sl4IN

Còn phần định dạng cho giống hoàn toàn với file mẫu thì bạn vui lòng tự css để nâng cao tay nghề nhé.


Đón xem hướng dẫn cắt layout từ psd với bootstrap phần 2 : Full Header CSS

Full code dành cho mọi người tham khảo : http://adf.ly/srnBm

File psd : http://adf.ly/srnF3

-
Subscribe to: Posts (Atom)

Copyright © 2014, CoiGì.info | Distributed By Blogger Templates | Designed By Uong Jowo