XtGem Forum catalog

CuDemVN.Wap.Sh

- GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam
- AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam
- HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ
* Trang chủ >> WapMaster
Tìm Kiếm Thảo Luận
↓↓

Hướng dẫn tạo giao diện Web 2 cột giống TienThinhPro.Com với gói giao diện bootstrap

Admin* RoSino18k *
* 17-03-2016

Thời gian qua có 1 số anh em xin giao diện này của mình để tích hợp vào Xtgem hoặc 1 số loại mã nguồn khác . Vậy nên hôm nay mình sẽ hướng dẫn các bạn tạo giao diện web 2 cột bằng bootstrap...


→demo: *http://tienthinhpro.com

Một vài hình ảnh về gói giao diện này, đầu tiên là giao diện web 2 cột khi duyệt bằng máy tính hoặc máy tính bảng.

Hướng dẫn tạo giao diện Web 2 cột giống TienThinhPro.Com với gói giao diện bootstrap
[Tải ảnh]


Khi vào bằng điện thoại hoặc thu nhỏ cửa sổ trình duyệt trên máy tính sẽ có giao diện 1 cột.

Hướng dẫn tạo giao diện Web 2 cột giống TienThinhPro.Com với gói giao diện bootstrap
[Tải ảnh]


Khi nhấn vào nút trên đầu web sẽ tự giàn trải ra các link trên đầu web...

Hướng dẫn tạo giao diện Web 2 cột giống TienThinhPro.Com với gói giao diện bootstrap
[Tải ảnh]


Vậy chúng ta hiểu gói giao diện này chủ yếu để tự động tạo giao diện 2 cột, 3 cột khi màn hình rộng và tự thu về 1 cột khi màn hình hẹp, xem demo để hiểu hơn. Và sau đây là cách làm...

Hướng dẫn tạo giao diện Web 2 cột với bootstrap
- Bước 1: Tải gói giao diện *bootstrap-web-2-cot.zip bên dưới về giải nén và up tất cả lên host hoặc Xtgem ngang hàng với file index.

- Bước 2: Thêm thẻ khai báo code CSS này vào phần đầu web site, tốt nhất là trong cặp thẻ head.. Thay domain.com thành tên web bạn.
<link href="http://domain.com/bootstrap/style.css" rel="stylesheet" type="text/css"/>
<link href="http://domain.com/bootstrap/bootstrap.css" rel="stylesheet" type="text/css"/>

- Bước 3: Thêm code javascript này vào cuối web site... Thay domain.com thành tên web bạn.
<script src="http://domain.com/bootstrap/jquery.min.js"></script>
<script src="http://domain.com/bootstrap/bootstrap.min.js"></script>

- Bước 4: Thêm code HTML này để tạo phần đầu web và nút ấn...
<div id="wrapper">
<div id="header">
<nav class="navbar navbar-default topmenu">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand"><a href="/" title="Tiêu đề trang web"><img src="Link logo" alt="miêu tả logo"></a></span>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="Link trang chủ" title="Trang chủ">Trang Chủ</a></li>
<li><a href="Link số 1" title="Tiêu đề link số 1">Tên link số 1</a></li>
<li><a href="Link số 2" title="Tiêu đề link số 2">Tên link số 2</a></li>
<li><a href="Link số 3" title="Tiêu đề link số 3">Tên link số 3</a></li>
<li><a href="Link số 4" title="Tiêu đề link số 4">Tên link số 4</a></li>
</ul>
</div>
</div>
</nav>
</div>

Thêm code sau vào đầu nơi muốn cột lớn bên trái
<div class="container">
<div class="row">
<div class="main col-xs-12 col-md-8">

Dùng code sau để kết thúc phần cột lớn bên trái và tạo cột nhỏ bên phải.
</div>
<div class="sidebar col-xs-12 col-md-4">

Dùng các thẻ div kết thúc sau để kết thúc cả 2 cột và tạo 1 khoảng trống xuống cuối footer cho đẹp.
</div></div></div><p></p>

Dùng code sau để tạo phần copyright cuối web.
<div class="footer" align="center">
<a href="link trang chủ">Trang chủ</a><br/>Creat by <a href="Link">Tên bạn</a>™<br/>
</div>

Như vậy là xong, tuy nhiên có 1 số chú ý sau:
1. Trước hết các bạn phải kiểm tra xem CSS mình đang dùng có trùng class nào với css trong bootstrap không để tránh xung đột...
2. Trong gói giao diện này vẫn giữ màu sắc vốn có của web bạn, nếu bạn muốn phần đầu và cuối có màu theo ý bạn thì vào sửa lại file style.css...
3. Gói giao diện này thực tế có thể tạo web tới 4 cột, 5 cột... tuy nhiên nếu các bạn chưa thạo bố cục thì không nên dùng code chia quá nhiều cột như vậy nhìn sẽ rất chuối...

Như vậy mình đã hướng dẫn full phần tạo giao diện 2 cột rồi, tuy nhiên các màu sắc ở các class web mình khác web bạn nên mình không cho CSS web mình vào gói giao diện này vì dễ xung đột với CSS web bạn, thứ 2 là thêm nặng.

Mình không thích đụng hàng với ai nên không mong ai copy y hệt CSS web mình, mong rằng các bạn sẽ tự tạo ra phong cách riêng cho mình
Chúc các bạn thành công!

Nguồn: Đặng Tiến Thịnh - Forum.TienThinhPro.Com
↓ Tập tin Đính kèm ↓
↑↑ Lượt xem: 409
score
Đánh giá: 4.5/ 5, 409 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-409]