1. Hiện tại có một số member mạo danh BQT để giao dịch trên diễn đàn và đã LỪA ĐẢO khá nhiều tại chuyên mục Adwords... Mọi người cảnh giác và đọc bài: Giới thiệu giao dịch đảm bảo bởi @Admin

Hướng dẫn thiết kế Website bằng Bootstrap Responsive

Thảo luận trong 'Hỗ trợ về mã nguồn, code' bắt đầu bởi thaomarky, 18/7/14.

Lượt xem: 3,628
  1. thaomarky

    thaomarky Seo Newbie

    Gia nhập:
    27/2/14
    Bài viết:
    4
    Đã được thích:
    0
    Nơi ở:
    Ha Noi City
    Web:
    (Thao Marky's Productions) Ở phần 1 Thao Marky đã giới thiệu về Bootstrap Responsive, cách tải về và đặt trong đúng thư mục để có thể thiết kế website bằng Bootstrap Responsive.

    Bài này Thao Marky sẽ hướng dẫn các bạn làm 1 trang Web đơn giản có đầy đủ chức năng Menu, slider, 3 cột content, footer.

    Thao Marky sử dụng Template demo như hinh dưới

    [​IMG]
    Ảnh Demo - Hướng dẫn thiết kế Website bằng Bootstrap Responsive​

    Công đoạn đầu tiên là phân tích bố cục Website. Theo như ảnh Demo thì mình chia làm 6 phần (tương ứng với 6 thẻ Div lớn)

    • Top
    • Menu
    • Slider
    • Main
    • Footer
    • Copyright

    Bao quanh 6 Div trên là Div class="container". Div này có tác dụng để xác định độ rộng Website. Cách xác định độ rộng Website thì ta căn cứ vào chiều rộng của ảnh lớn nhất (ở đây là Slider), như bài này là 960px.

    1. Div Top

    Div này đơn giản nhất, bạn chỉ cần sử dụng thẻ <img src="link ảnh" /> để trỏ đến file Logo của bạn. Vì logo luôn có link trỏ về trang chủ nên ta thêm thẻ <a></a> bên ngoài nó.

    [​IMG]
    Code Logo - Hướng dẫn thiết kế Website bằng Bootstrap Responsive​

    Code đầy đủ như sau

    2. Div Menu

    Trong phần này chúng ta sử dụng phần Navbar có sẵn của Bootstrap (vào trang http://getbootstrap.com/components/#navbar) và loại bỏ bớt những thứ mình không cần thiết

    Giải thích:

    class="navbar-brand": Khi Website thu nhỏ theo từng trình duyệt thì Menu sẽ hiển thị Class này và 1 Group (nhóm) các menu khác bên tay phải.
    class="collapse navbar-collapse": Nghĩa đen là Sụp đổ, ta có thể hiểu là khi Menu bị co lại ứng với màn hình của trình duyệt Mobile.

    [​IMG]
    Code Menu - Hướng dẫn thiết kế Website bằng Bootstrap Responsive​

    Code đầy đủ như sau

    Kết quả Menu như sau
    [​IMG]
    Kết quả Menu - Hướng dẫn thiết kế Website bằng Bootstrap Responsive​

    Các bạn lưu lại và mở file index.html lên xem thành quả. Logo và đoạn Menu của mình đã xuất hiện, bạn thử thu nhỏ trình duyệt và kéo to/nhỏ để xem sự thay đổi nhé. :D

    Để làm đẹp Menu giống như file Template mẫu, chúng ta sử dụng CSS. Các bạn lưu ý là chúng ta sử dụng FireBug để xác định Class của nó và tạo Class tương ứng trong file Style.css để ghi đè lên file Bootstrap.css (nguyên tắc kế thừa trong CSS)

    [​IMG]
    CSS Menu - Hướng dẫn thiết kế Website bằng Bootstrap Responsive​


    Code đầy đủ phần Css cho Menu như sau

    Vậy là đã xong phần Logo và Menu. Bạn hãy pha 1 tách trà hoặc Coffee thư giãn trước khi bước vào phần tiếp theo nhé :D

    3. Div Slider

    Phần này mình sử dụng ứng dụng Javascript Carousel của Bootstrap (link http://getbootstrap.com/javascript/#carousel)

    Code đầy đủ như sau

    [​IMG]
    Code Slider - Hướng dẫn thiết kế Website bằng Bootstrap Responsive
    Giải thích:

    Class="item": mỗi class này ứng với 1 slide của bạn. Có bao nhiêu slide thì bạn tạo số lượng class tương ứng.
    Bên trong có 2 dòng: dòng trên là link ảnh, dòng dưới class="carousel-caption":Mô tả Slide (dòng hiển thị dưới slider)

    Kết quả như sau

    [​IMG]
    Kết quả Slider - Hướng dẫn thiết kế Website bằng Bootstrap Responsive​

    4. Div Main

    Phần này ta ứng dụng Grid (lưới, cột) của Bootstrap Twiter. Bootstrap chia thành 12 Grids cho toàn bộ Website. Tùy vào số lượng cột của trang mà ta lấy Grid tương ứng.
    Ở đây ta có 3 cột ứng với 12 : 3 = 4. Như vậy ta có class="col-md-4".

    Giải thích tên gọi của các cột
    md
    : Medium devices ứng với màn hình Desktops (≥992px)
    lg: ứng với màn hình Large devices Desktops (≥1200px)
    sm: ứng với màn hình Small devices Tablets (≥768px)
    xs: ứng với màn hình Extra small devices Phones (<768px)

    Trong mỗi cột ta tạo 1 class="inner" để lát nữa chúng ta căn chỉnh từng cột cho phù hợp

    Bên trong ta tạo thẻ <h3></h3> ứng với tên của từng cột, 1 đoạn text đặt trong thẻ <p></p> và ảnh đặt trong thẻ <img src=" " />

    Làm tương tự như vậy ta đã có 3 cột hoàn chỉnh.

    [​IMG]
    Code Main - Hướng dẫn thiết kế Website bằng Bootstrap Responsive​

    Code đầy đủ như sau

    Nào, cùng ra trình duyệt để xem kết quả. Đã hiển thị rồi đúng không các bạn? Nhưng để đẹp hơn thì ta cần làm CSS cho phần này.

    Code CSS phần Main của Thao Marky
    5. Div Footer

    Phần này ta cũng sử dụng Grids để chia làm 4 tương ứng với col-md-3 (3x4=12)
    Trong mỗi cột ta cũng tạo ra thẻ <h3></h3> để làm tên của cột, các thẻ <ul></ul> <li></li> để hiển thị ra list bên dưới.

    Lưu ý là ở phần Footer, có 2 cột bên trái có mũi tên còn 2 cột bên phải không có nên ta cần tạo class cho thẻ <li class="arrow"></li> để phân biệt. Cột bên phải ta có mỗi dòng là 1 ảnh khác nhau nên mỗi thẻ <li></li> bên phải ta cần tạo class riêng sau đó để background (ảnh nền)

    [​IMG]
    Code Footer - Hướng dẫn thiết kế Website bằng Bootstrap Responsive​

    Code đầy đủ phần Footer như sau
    Cũng như phần Main, ở đây ta cũng cần tạo CSS cho Footer để hiển thị đúng như bản Design.

    Code đầy đủ phần CSS cho footer của Thao Marky như sau
    6. Div Copyright

    Vậy là Wesbsite thiết kế bằng Bootstrap Responsive của chúng ta đã sắp hoàn thiện, chỉ còn phần Copyright (bản quyền).
    Phần này chúng ta chỉ cần tạo 1 thẻ <span></span> là đủ. Ta có thể thêm thẻ <a href=""></a> trong phần Coder/ Designer để link sang trang của mình.

    Code đầy đủ như sau
    <div id="copyright"> <span>©2014 Complexity HTML Theme - Web Design by <a href="http://www.thaomarky.com" title="Thao Marky">Thao Marky</a>'s Productions</span> </div>
    Đoạn CSS cho phần Copyright
    Vậy là đã xong phần thiết kế Website sử dụng Bootstrap Responsive. Mình cùng ra trình duyệt để xem kết quả nào.

    Bổ sung: vì giao diện này của chúng ta độ rộng chỉ có 960px trong khi thẻ .container độ rộng mặc định là 1170px. Do vậy ta cần tạo 1 Query nếu màn hình lớn hơn 960px thì sẽ hiển thị website của chúng ta với kích thước 960px.

    Code phần Query như sau
    Xem bài trước: Hướng dẫn thiết kế Website ứng dụng công nghệ Bootstrap Responsive (Phần 1)
    Hướng dẫn thiết kế Website bằng Bootstrap Responsive (Phần 2)
    Xem Demo kết quả hoàn thiện tại đây

    Last edited: 28/8/14
  2. congay2015

    congay2015 Seo Newbie

    Gia nhập:
    23/10/14
    Bài viết:
    8
    Đã được thích:
    0
    Công nghệ này giờ được sử dụng khá thông dụng trong lĩnh vực thiết kế web, tương lại sẽ rất phát triển

Nội quy khi thảo luận:

Dù bạn có cố tình spam bằng cách nào khi BQT diễn đàn phát hiện sẽ lập tức banned nick và xoá toàn bộ bài viết của bạn. Ngoài ra khi phát hiện ra Spam hãy gửi thông báo cho BQT diễn đàn. Hãy suy nghĩ trước khi hành động..!
✓ Khi muốn trả lời ai đó, bạn gõ @ cộng thêm nick diễn đàn của người đó phía sau @, giống như tag tên trên Facebook.
✓ Yêu cầu khi bình luận, bạn phải gõ chữ rõ ràng, không viết tắt, gõ tiếng Việt đầy đủ dấu câu.
✓ Nên dùng font chữ mặc định của diễn đàn, không tô màu lòe loẹt hay dùng size chữ quá lớn khi bình luận.
✓ Bài viết, comment... không được phép quảng cáo dịch vụ, rao vặt, pr... Loại trừ ở chuyên mục Rao vặt đã cho phép.
✓ Nghiêm cấm các chủ đề dạng: Cứu em với, help me, giật tít, câu view... dưới mọi hình thức.
✓ Tất cả các thành viên tham gia diễn đàn cần đọc kỹ Nội quy chung và nghiêm túc tuân thủ.


Chia sẻ trang này

Đang tải...