Rất nhiều website sử dụng bootstrap.css

Hướng dẫn tạo giao diện responsive bằng Bootstrap.css, chi tiết bằng hình minh họa

Xin chào các bạn, hiện tại Bootstrap là một trong những thư viện CSS và Javascript được dùng nhiều nhất trên thế giới, trong hầu hết các giao diện thiết kế hiện nay đều sử dụng thư viện này, thậm chí các plugin cũng hỗ trợ vì nó mang lại hàng ngàn ưu điểm như:

  • Chuẩn hiển thị trên mọi màn hình, mọi trình duyệt
  • Tự động điều chỉnh theo kích thước trình duyệt
  • Tốc độ load cao, bản nén khoảng 180kb
  • Hỗ trợ nhiều kiểu hiển thị sẵn, các box, các form đẹp mắt
  • Hỗ trợ LESS và SASS giúp lập trình viên nhanh chóng tích hợp Bootstrap

Sau đây Jam xin giới thiệu vài chức năng cơ bản giúp bạn tự tích hợp Bootstrap vào giao diện, làm cho giao diện hỗ trợ Responsive ngay tức khắc.

Thêm nữa, rất thú vị: Bootstrap hỗ trợ hiển thị dạng lưới, bạn cứ tưởng tượng mọi thứ đều là hàng và cột …

#1, Tích hợp CSS vào website

Các bạn download thư viện tại đây: http://getbootstrap.com/getting-started/#download

Trong trường hợp bạn không sử dụng mã nguồn WordPress, bạn có thể sử dụng CDN một cách nhanh chóng, thêm dòng sau vào trước thẻ </head> của website:

<link rel="stylesheet" href="
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

Đối với WordPress, bạn làm như sau:

Download về, giải nén và copy file bootstrap.min.css vào giao diện, tốt nhất là tạo thư mục CSS trong giao diện và thả chúng vào, chuyển sang file header.php và edit lại, thêm dòng sau vào trước thẻ đóng </head>

<?php wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css') ?>

Cách 1 cũng được, tuy nhiên vì WordPress có thể hỗ trợ bootstrap, giao diện hoặc plugin có thể đã khai báo nên các bạn phải dùng hàm trên, để đảm bảo chúng không bị gọi hai lần 😀 gây chậm trang nha !

Để ăn chắc, bạn load lại trang, xóa cache và Ctr+U để xem mã nguồn, bấm Ctr+F tìm “bootstrap” và click thử vào đường link “.css” tìm được, nếu hiện lên 404 là lỗi, nếu đúng nó sẽ trả về màn hình toàn code CSS thôi, okey tiếp tục nào !

#2, Mobile First ! Please !

Bạn đã chắc giao diện của mình hỗ trợ mobile chưa ? nếu chưa hãy tìm đoạn mã sau trong thẻ <head></head> nha, nếu bạn chưa có thì phải bổ sung ngay, đoạn mã này khai báo hỗ trợ co kéo màn hình theo kích thước một cách tự động, bắt buộc phải có:

<meta name="viewport" content="width=device-width, initial-scale=1">

Tiếp tục, trong giao diện của bạn chắc chắn có tồn tại các lệnh “Width” trong CSS, bạn mở file Style.css nếu là WordPress, mở file CSS bất kì nếu là các CMS khác, các bạn tìm “width:” và thay thế toàn bộ bằng “max-width” để HTML co dãn theo màn hình một cách tự động !

#3, Các lưu ý cơ bản

Mọi thứ trong Bootstrap đều rất đơn giản, các bạn chỉ cần lưu ý khi sử dụng các hàm CSS sau:

Class Container: Padding sang hai bên là 15px, thẻ này sẽ bọc ngoài hầu hết tất cả các thẻ div về sau.

Class Row: Thẻ này sẽ Margin số âm: -15px nếu bạn muốn thẻ nào đó sát vào bên lề hai bên, trái ngược với Container, bạn chỉ cần đặt container bọc ngoài thẻ Row là thẻ trong đó sẽ nằm đúng lề luôn, ví dụ:

Thẻ Container cách đều hai bên 15px nhưng Row thì ngược lại
Thẻ Container cách đều hai bên 15px nhưng Row thì ngược lại

Tiếp theo: Mọi thứ trong Bootstrap được chia làm 12 cột, hàng thì sử dụng thẻ Container như tôi vừa nói, giờ ta thử tưởng tượng như sau:

Trong Bootstrap, mặt phẳng chia làm 12 cột
Trong Bootstrap, mặt phẳng chia làm 12 cột

Mỗi một cột sẽ có Padding là 15px sang hai bên !

Ta khai báo các cột và độ rộng như sau:

  • Col-md-1 : Cột rộng 1 độ với màn hình máy tính trung bình
  • Col-md-6: Cột rộng một nửa màn hình máy tính
  • Col-sm-12: Cột rộng toàn màn hình với màn hình máy tính bảng
  • Col-xm-12: Cột rộng toàn màn hình với màn hình điện thoại.

Có rất nhiều các class khác các bạn tự khám phá, mình chỉ nói những cái cơ bản và hay dùng nhất thôi nha !

#4, Thực hành

Trước tiên, các bạn cần bọc toàn bộ nội dung trong Website bằng thẻ Container, nếu trên WordPress, mở file Header.php và thêm ngay sau thẻ Body hoặc bạn thêm luôn vào class bọc ngoài, thường tôi sẽ nhúng vào luôn thẻ của giao diện, ví dụ:

<body>
<div class="container">

Sau đó mở file Footer.php để đóng nó, tạo cho cả website nằm trong thẻ Container sẽ cách đều hai bên là 15px.

Tiếp theo, các bạn vào Style.css để chỉnh kích thước maximum của màn hình, thông thường website sẽ rộng nhất là 1200px hoặc 980px, ít khi để kín màn hình.

body {max-width:1200px; margin:0 auto}

Các bạn lưu ý không bao giờ dùng Width mà phải dùng Max-Width nhé !

Content và sidebar của Jam
Content và sidebar của Jam

Như trên hình, Website của Jam là rộng 1200px maximum, trong Content chính Jam để class là Col-md-8 với ý là độ rộng 8 phần / 12 phần, còn sidebar dùng class Col-md-4 để rộng 4 phần / 12 phần, tổng thể của chúng phải luôn là 12 phần.

Tiếp tục nào, các bạn co màn hình vào khoảng 780px độ rộng, đó là nơi dành cho màn hình trung bình của máy tính bảng, ta sẽ làm việc với class COL-SM-XXX !

Màn hình máy tính bảng
Màn hình máy tính bảng

Các bạn làm như sau:

Tại thẻ bọc content vừa nãy ta dùng class là Col-md-8 đó, các bạn thêm Col-xm-12 vào, xong, làm tương tự với sidebar cũng cho thêm col-sm-12 vào, như vậy khi người dùng sử dụng màn hình máy tính bảng thì Content và Sidebar đều dãn hết cỡ dãn, vừa vặn với màn hình luôn !

Nếu không có gì đặc biệt thì ta sẽ kệ nó như vậy trong màn hình điện thoại, nó cũng sẽ tràn màn hình hai bên, rất tiện lợi, nếu không bạn sẽ phải làm việc với màn hình điện thoại bằng cách sử dụng Col-xs-12 hoặc muốn chia đôi màn hình điện thoại thì Col-xs-6 cho cả content và sidebar !

#5, File mẫu để thực hành

Các bạn nếu cảm thấy khó hiểu thì có thể tham khảo file mẫu sau đây:

Tải về bootstrap !

Sau đó edit lại bằng Notepad++ chẳng hạn, ngoài ra hãy mở trình duyệt lên và co duỗi chúng tùy bạn thích, mọi thứ đều đơn giản với Bootstrap !

Bất cứ khó khăn nào hãy comment để Jam trợ giúp nha !

Chúc các bạn thành công !

 

TÁC GIẢ:

Tôi là Jam, thâm niên 7 năm thiết kế website và làm SEO. Hãy theo dõi blog của tôi để nhận được nhiều chia sẻ thú vị xung quanh chủ đề công nghệ.

Có 2 bình luận !

  1. Nhận code thêm giao diện điện thoại, máy tính bảng cho website – thiết kế giao diện responsive cho tất cả các website mã nguồn wordpress, Joomla, open card, code PHP… giá rẻ
    Tại sao cần làm giao diện Responsive (giao diện di động, máy tính bảng)?
    1. Ngày nay smartphone, điện thoại di động ngày càng nhiều , và giá thành rẻ khiến cho số lượng người sử dụng Smartphone và điện thoại di động thay vì dùng desktop/laptop để truy cập web ngày càng tăng . Thêm vào đó sử dụng điện thoại để lướt web rất tiện với những người hay phải di chuyển thường xuyên.
    2. Google kết hợp tính năng “mobile-friendliness” của một trang web trong thuật toán xếp hạng kể từ 21 Tháng Tư, năm 2015, Nghĩa là các websie có giao diện Responsive được đánh giá và xếp hàng cao hơn so với các website đối thủ chưa có tính năng này

    Làm cho tất cả khách hàng trên toàn quốc
    Giá: 1.5 T
    Liên hệ: 0933 430 108
    Ngoài ra chúng tôi nhận thiết kế website, chỉnh sửa giao diện website theo yêu cầu

  2. Nhận code thêm giao diện điện thoại, máy tính bảng cho website – thiết kế giao diện responsive cho tất cả các website mã nguồn wordpress, Joomla, open card, code PHP… giá rẻ
    Làm cho tất cả khách hàng trên toàn quốc
    Giá: 1.5 T
    Liên hệ: 0933 430 108
    Ngoài ra chúng tôi nhận thiết kế website, chỉnh sửa giao diện website theo yêu cầu

    Tại sao cần làm giao diện Responsive (giao diện di động, máy tính bảng)?
    1. Ngày nay smartphone, điện thoại di động ngày càng nhiều , và giá thành rẻ khiến cho số lượng người sử dụng Smartphone và điện thoại di động thay vì dùng desktop/laptop để truy cập web ngày càng tăng . Thêm vào đó sử dụng điện thoại để lướt web rất tiện với những người hay phải di chuyển thường xuyên.
    2. Google kết hợp tính năng “mobile-friendliness” của một trang web trong thuật toán xếp hạng kể từ 21 Tháng Tư, năm 2015, Nghĩa là các websie có giao diện Responsive được đánh giá và xếp hàng cao hơn so với các website đối thủ chưa có tính năng này
    3. Website có tích hợp giao diện di động sẽ có thứ hạng tốt hơn những website cùng lĩnh vực không tích hợp giao diện responsive
    PS: Thật thật xin lỗi nếu thông tin này gây phiền hà cho các bạn

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *