Mẹo thiết kế bố cục trong Bootstrap cho lập trình giao diện

Bootstrap sẽ giúp bạn thiết kế bố cục thật đẹp. Tuy nhiên, để làm được việc đó dễ dàng, bạn cần nắm được những mẹo dưới đây.

Thiết kế giao diện nghe có vẻ đơn giản nhưng không hề dễ với lập trình viên phải đảm nhận cả công việc này. Thế nhưng, bạn không cần quá lo lắng, trong trường hợp này, bạn chỉ cần áp dụng những mẹo dưới đây.

Xác định mục đích của website

Trước tiên, bạn cần biết web đang làm về lĩnh vực gì, mục đích mà nó hướng tới. Dùng các kết hợp màu đơn giản, ưu tiên màu trắng cho những trang web thiên về thông tin như bách khoa online, web trường học, thư viện trực tuyến…

Thứ hai, bạn cần xác địch khán giả hay người dùng mục tiêu của trang web. Ví dụ, nếu khán giả chủ yếu là học sinh, bạn có thể cho họ một cột tìm kiếm nâng cao. Sắp xếp các nút bấm và liên kết theo cách dễ truy cập và dễ hiểu mà không làm giảm sự chú ý vào nội dung chính bằng cách đặt quảng cáo hoặc hiệu ứng flash ở xa chúng.

Thử bố cục 3 cột đơn giản

Đối với các trang chứa nhiều mô đun và mục thông tin, bạn có thể muốn một bố cục có banner đơn giản ở phía trên cùng, một thanh điều hướng cho các mô đun khác nhau của web. Sau đó, nội dung trang của bạn có thể bao gồm 3 cột:

• Liên kết tới trang chi tiết mô đun cụ thể.
• Nội dung chính
• Cột link bổ sung, với một thanh tìm kiếm (tới mô đun liên quan hoặc trang ngoài).

Trong Bootstrap, toàn bộ việc bạn cần làm là dùng hệ thống grid của framework. Chọn kết hợp màu tươi sáng cho các trang thông tin nhằm giúp người xem dễ nắm bắt được nội dung.

Để tạo sidebar, bạn có thể làm theo code sau:

<div class="sidebar left">
<div class="sidebar-nav-fixed">
<p>Left Sidebar Content</p>
</div>
</div>
<div class="sidebar right">
<div class="sidebar-nav-fixed">
<p>Right Sidebar Content</p>
</div> </div>

Bố cục dạng lưới hình vuông

Bố cục này thường được dùng trên các web dành cho doanh nghiệp bởi chúng luôn có rất nhiều nội dung mà họ muốn hiện ở ngay trên trang chủ. Các ô chứa snippet và thumbnail của nội dung có thể tìm thấy ở trang khác. Bạn có thể có banner lớn hơn một chút cho nội dung kèm ảnh của ấn bản hoặc trang quảng cáo.

Để làm được việc này, bạn có thể tận dụng hệ thống cột và lưới trong Bootstrap. Đây là một mẫu code tạo cột trong một container grid:

<div class="container">
<div class="row">
<div class ="span4">
/* Content */
</div>
</div>
</div>

Dùng ảnh với kích thước phù hợp

Xem xét ảnh và hiệu ứng mà bạn đang sử dụng. Đảm bảo kích thước ảnh bạn đang dùng khớp với kích thước của container đặt chúng. Điều này tránh ảnh bị kéo giãn quá mức. Ngoài ra, đừng hiện ảnh quá lớn ngay lập tức bởi nó là nguyên nhân chính khiến trang tải chậm. Thay vào đó, bạn chỉ cần hiển thị chúng dưới dạng thumbnail và liên kết chúng tới ảnh đầy đủ kích thước.

Dùng font và kết hợp màu phù hợp

Lựa chọn font dễ đọc trên mọi màn hình là điều kiện cần phải có đầu tiên, chẳng hạn như Serif cho header và San Serif cho phần thân. Ngoài ra, đảm bảo bạn chỉ dùng một hoặc hai biến cho mỗi trang bởi chúng cũng là một phần trong thời gian tải trang. Dưới đây là một mẫu CSS để thiết lập fonts:

@font-face{
font-family: 'MS Sans Serif';
font-style: normal;
font-weight: 300;
src:url(file://link-to-ms-sans-serif-font) format('woff');
}

Trên đây là một số mẹo khiến thiết kế trang web không còn là một điều quá khủng khiếp. Miễn là bạn có thể trình bày dữ liệu gọn gàng và hiệu quả, người xem đều sẽ hài lòng.