Trong bài viết hôm nay, DK Tech sẽ tổng hợp và chia sẻ cho bạn những kiến thức về Bootstrap, thiết kế website với Bootstrap để bạn có thể hiểu rõ hơn về công cụ thiết kế website hữu ích được các lập trình viên ưa chuộng.
Mục Lục
Thiết kế website với Bootstrap
Bootstrap là gì?
Bootstrap về cơ bản là khung phần mềm HTML, CSS và JavaScript phổ biến nhất để phát triển trang web di động.
Bootstrap có thể được xếp thành ba tệp chính.
- css – khung CSS
- js – khung JavaScript/jQuery
- glyphicons – phông chữ
Lưu ý: Thiết kế website với Bootstrap không phải là sự lựa chọn tốt nhất cho người mới bắt đầu. Học trước một số HTML và CSS sẽ giúp bạn rất nhiều. Ngoài ra, bạn có thể sử dụng trình tạo trang web chẳng hạn như WordPress để thiết kế trước và tự làm quen với bố cục trang web của mình.
Tại sao Bootstrap là ứng dụng thu hút nhiều lập trình viên sử dụng nhất?
Hệ thống lưới
Sẽ không mất nhiều thời gian để mã hóa lưới Bootstrap đi kèm với hệ thống dựng sẵn của riêng bạn. Sau đó, chỉ cần thực hiện một số mã hóa tay đơn giản.
Cho phép bạn nhanh chóng và dễ dàng xác định các điểm dừng tùy chỉnh cho mỗi cột với các điểm dừng mức khoảng thời gian mong muốn từ nhỏ đến lớn. Ngoài ra, bạn có thể để mặc định vì chúng có thể đã đáp ứng nhu cầu của trang web của bạn.
Hình ảnh
Thiết kế website với Bootstrap đi kèm với mã riêng tự động thay đổi kích thước hình ảnh thành kích thước màn hình hiện tại. Chỉ cần thêm phần mở rộng .img đáp ứng vào hình ảnh bạn muốn tùy chỉnh và nó sẽ được xử lý theo các quy tắc CSS được xác định trước.
Bạn cũng có thể thay đổi hình dạng của hình ảnh bằng cách thêm phần mở rộng như .img-circle hoặc .img-round mà không cần phải chuyển đổi giữa mã và phần mềm thiết kế.
Các thành phần Bootstrap
Bootstrap đi kèm với nhiều thành phần giúp việc thiết kế và chỉnh sửa trang web bằng Bootstrap trở nên dễ dàng hơn bao giờ hết.
- Thanh điều hướng
- Thanh kéo và thả
- Chỉ báo tiến độ
- Hình ảnh thu nhỏ
- …
Bạn không chỉ có thể dễ dàng thêm các yếu tố thiết kế bắt mắt vào trang web của mình mà còn có thể yên tâm rằng tất cả các yếu tố của bạn sẽ trông tuyệt vời cho dù bạn đang sử dụng kích thước màn hình hay thiết bị nào.
Bootstrap JavaScript
Bootstrap cơ bản cũng cho phép các nhà phát triển sử dụng hơn một tá plugin JQuery tùy chỉnh. Với JQuery, bạn có nhiều điều kiện hơn để trải nghiệm khả năng tương tác của Bootstrap và bạn có thể dễ dàng sửa đổi các cửa sổ, chuyển tiếp, băng chuyền hình ảnh,…
Tài liệu Bootstrap
Bootstrap cung cấp tài liệu tốt nhất mà các lập trình viên đánh giá cao. Mỗi đoạn mã được viết rõ ràng và giải thích đầy đủ trên trang web. Chỉ cần chọn một yếu tố, sao chép và dán mã vào trang web của bạn rồi chỉnh sửa từ đó.
Khả năng tùy biến
Một trong những nhược điểm của các khung như Bootstrap là kích thước và trọng lượng mà chúng sử dụng, điều này có thể làm chậm ứng dụng của bạn trong lần tải đầu tiên. Ví dụ: phiên bản hiện tại của các tệp Bootstrap CSS là một con số khổng lồ 119 KB. Điều này có vẻ không lớn so với tệp hình ảnh hoặc video, nhưng nó rất lớn đối với tệp CSS!
Tuy nhiên, những gì Bootstrap làm là tùy chỉnh các tính năng mà nó tải xuống. Vui lòng truy cập trang tùy chỉnh để tiến hành tải xuống. Bạn có thể kiểm tra chức năng, giảm trọng lượng tệp và tiết kiệm thời gian tải cho người dùng của mình.
Nguồn mẫu đa dạng
Khi việc sử dụng Bootstrap để thiết kế trang web ngày càng phổ biến, nhiều người đã tạo các mẫu dựa trên Bootstrap để tăng tốc độ phát triển web hơn nữa. Có nhiều trang web dành riêng cho việc chia sẻ và mua các mẫu dựa trên Bootstrap tùy chỉnh.
Xem thêm: Thiết kế website theo yêu cầu tại TPHCM chuyên nghiệp, uy tín
Hướng dẫn cách sử dụng Bootstrap, thiết kế website với Bootstrap
Thêm Bootstrap cho dự án
Sau khi cài đặt thành công, trang web của bạn sẽ chứa các thư mục sau:
- Nội dung: Bao gồm bootstrap.css
- Yêu cầu: Chứa bootstrap.js và jquery.js. JQuery được cài đặt vì bootstrap.js phụ thuộc vào thư viện JQuery.
- Font chữ
Phân loại Bootstrap
Thiết kế website với Bootstrap phân loại các thiết bị khác nhau dựa trên 4 kích thước, với mỗi danh mục được biểu thị bằng một ký hiệu cụ thể:
- Tất cả các thiết bị có chiều rộng <768px nằm trong danh mục các thiết bị cực nhỏ như thiết bị di động. Bootstrap cung cấp “xs” để đại diện cho các thiết bị này.
- Tất cả các thiết bị có chiều rộng >= 768px và <992px đều thuộc danh mục thiết bị nhỏ như thiết bị máy tính bảng. Bootstrap cung cấp “sm” để đại diện cho các thiết bị này.
- Tất cả các thiết bị có chiều rộng >= 992px và <1200px đều thuộc danh mục thiết bị trung bình như thiết bị máy tính xách tay. Bootstrap cung cấp “md” để đại diện cho các thiết bị này.
- Tất cả các thiết bị có chiều rộng >= 1200px đều thuộc danh mục thiết bị lớn, chẳng hạn như thiết bị máy tính để bàn lớn. Bootstrap cung cấp biểu tượng “lg” để đại diện cho các thiết bị này.
Cấu trúc bố trí lưới 12 cột
Thiết kế website với Bootstrap cung cấp cấu trúc bố cục dạng lưới gồm 12 cột. Bootstrap về cơ bản chia toàn bộ chiều rộng của thiết bị thành 12 cột. Số được chỉ định trong lớp đại diện cho phần tử chứa lớp đó chiếm số khoảng cách cột tương ứng được chỉ định trong tổng số 12 cột.
Ví dụ: Nếu tôi định nghĩa lớp “.col-sm-6” trên phần tử có nghĩa là phần tử này tương ứng với 6 trong số 12 cột trên các thiết bị nhỏ.
Tạo bố cục cơ bản
- Thêm một trang HTML Home.html
- Thêm tham chiếu của bootstrap.css trên đầu trang
- Thêm tham chiếu của jQuery-1.9.1.js và bootstrap.js ở dưới cùng của thẻ body.
Lưu ý: mã user-scalable = no định nghĩa rằng người dùng không được phép phóng to trang web trên thiết bị di động và phần chứa chính. Thêm lớp .container trên các phần tử đầu trang, chân trang và các phần khác.
Nếu bạn không muốn sử dụng 12 cột độc lập, bạn có thể nhóm các cột lại với nhau để tạo nên những cột rộng hơn. Dưới đây là một ví dụ trang web được chia với tỉ lệ 3:6:3 như sau:
Phần bên trong thêm một với lớp .row. Bên trong lớp .row thêm 3 lớp cột để cho Nav, nội dung chính và cho các nội dung liên quan khác. Xác định lớp .col-md-3, col-md-6, col-md-3 tương ứng. Các lớp này sẽ chia tổng cấu trúc 12 cột theo tỷ lệ 3:6:3.
Nghĩa là, điều hướng bên trái sẽ lấy 3 cột đầu tiên, khu vực nội dung chính sẽ lấy 6 cột tiếp theo và các nội dung liên quan khác sẽ chiếm 3 cột cuối cùng.
Xem thêm: Chi Phí Thiết Kế Website Là Bao Nhiêu?
Thêm mục điều hướng
Thiết kế website với Bootstrap cung cấp thành phần thanh điều hướng để hiển thị các mục điều hướng. Các thanh điều hướng Bootstrap có các nút chuyển đổi hiển thị và ẩn các thành phần điều hướng dựa trên trang.
Thành phần Bootstrap Navbar bao gồm hai phần chính:
- Phần tử .navbar có tiêu đề xuất hiện trên thiết bị di động và chứa các nút chuyển đổi cũng như logo và tên thương hiệu.
- Phần tử sử dụng .navbar-collapse chứa liên kết và điều khiển biểu mẫu cho chức năng tìm kiếm.
Lớp .navbar-fixed-top dùng để cố định vị trí thanh điều hướng lên đầu trang khi cuộn trang. Tương tự, có một lớp .navbar-fixed-bottom cố định thanh điều hướng ở cuối trang.
Thêm Glyphicon
Glyphicon là một thư viện hiển thị các biểu tượng sử dụng các ký tự Unicode. Glyphicon cung cấp các lớp khác nhau đại diện cho các biểu tượng khác nhau. Tên lớp bắt đầu bằng .glyphicon-*. Không phải tất cả các biểu tượng Glyphicon đều miễn phí nhưng nếu bạn sử dụng Bootstrap để thiết kế trang web của mình thì vẫn có một số biểu tượng miễn phí mà bạn có thể sử dụng.
Để tạo một biểu tượng, chỉ cần thêm một phần tử và cung cấp hai lớp. Một là .glyphicon và một là lớp biểu tượng đặc biệt .glyphicon-*.
Thêm Panel
Bảng điều khiển là các phần tử chứa và được sử dụng để chứa nội dung khác. Bảng điều khiển bao gồm 3 tiểu mục.
- Tiêu đề bảng: Nhập tiêu đề bảng.
- Bảng điều khiển: Chứa nội dung chính.
- Bàn chân: Xác định chân trang của bảng.
Để tạo bảng điều khiển, chúng ta cần thêm lớp .panel. Bạn có thể sử dụng các lớp ngữ cảnh khác như thế này: Tạo các loại bảng điều khiển khác nhau với lớp .panel bằng cách sử dụng .panel-default, .panel-success, .panel-error, .panel-information, .panel-alert.
- Sử dụng lớp .panle-header để tạo tiêu đề bảng và lớp .panel-title để tạo tiêu đề bảng.
- Tạo thân bảng điều khiển bằng lớp .panel-body.
- Tạo chân trang của bảng điều khiển bằng cách sử dụng lớp .panle-footer.
Thêm Jumbotron
Jumbotrons được sử dụng để hiển thị văn bản trên cùng của trang web. Jumbotrons có thể được sử dụng để làm nổi bật một số thông tin trên trang. Thiết kế website với Bootstrap cung cấp một lớp .jumbotron tạo thành phần hiển thị nội dung chính của trang.
Thêm hình ảnh
Thiết kế website với Bootstrap cung cấp lớp .img-responsive để tạo hình ảnh phản hồi. Lớp này hiển thị hình ảnh dưới dạng thành phần khối để phù hợp với các kích thước thiết bị khác nhau.
Bootstrap cơ bản cũng cung cấp các lớp khác cho hình ảnh.
- .img-rounded: tạo một hình ảnh với các góc tròn
- .img-thumbnail: tạo hình thu nhỏ
- .img-circle: cắt ảnh thành hình tròn
Thêm table
Bảng được sử dụng để biểu diễn dữ liệu có cấu trúc ở dạng hàng và cột. Bootstrap cung cấp một lớp .table để tạo bảng trả lời. Lớp .table xác định bố cục của bảng và đặt đường viền của bảng. Thêm lớp .table-responsive để tạo bảng đáp ứng.
Bootstrap cũng cung cấp nhiều lớp bảng khác nhau:
- .table-striped: Tạo các hàng xen kẽ các màu khác nhau để các hàng của bảng trông giống như các dải ruy băng.
- .table-condensed: Giảm chiều cao hàng của bảng và sửa bảng.
- .table-hover: Cung cấp một hiệu ứng trên chuyển động của chuột.
Nhúng video
Bạn có thể sử dụng các thẻ trong việc thiết kế website với Bootstrap.
Bootstrap cung cấp các lớp đáp ứng .embed và các tỷ lệ khác nhau cho các tỷ lệ khung hình khác nhau.
- .embed-responsive-16by9: Hiển thị tỷ lệ nhúng hoặc video cho chiều rộng và chiều cao 16:9.
- .embed-responsive-4by3: Hiển thị nhúng hoặc video với tỷ lệ chiều rộng trên chiều cao 4:3.
Thiết kế website với Bootstrap cho phép các nhà phát triển tập trung vào những gì quan trọng và xây dựng mọi thứ họ cần mà không tốn quá nhiều thời gian.
