Bootstrap, một khung HTML, CSS và JavaScript phổ biến, là một công cụ tốt để bố trí các trang chi tiết sản phẩm thương mại điện tử đáp ứng

Khung Bootstrap giúp dễ dàng bố trí các trang chi tiết sản phẩm thương mại điện tử đáp ứng. Các chủ doanh nghiệp nhỏ và thậm chí cả những nhà thiết kế trang web mới làm quen có thể sử dụng Bootstrap để xây dựng một trang có giao diện chuyên nghiệp

Bootstrap là một trong những khung HTML, CSS và JavaScript phổ biến nhất để phát triển các trang web đáp ứng. Hàng ngàn trang web sử dụng Bootstrap. Nó cũng có thể được sử dụng kết hợp với hầu hết các nền tảng thương mại điện tử, do đó, các chủ đề Shopify, thiết kế LemonStand và mẫu WooC Commerce, chẳng hạn, có thể được tạo bằng Bootstrap

Trong “Xây dựng điều hướng cố định, đáp ứng với Bootstrap,” tôi đã giải thích cách sử dụng Bootstrap để tạo tiêu đề điều hướng cố định trên màn hình di động, nhỏ hơn. Trong bài viết này, tôi sẽ mô tả cách bạn có thể sử dụng Bootstrap để bố trí trang chi tiết sản phẩm thương mại điện tử. Tôi sẽ giới thiệu hệ thống lưới Bootstrap, giải quyết một số lớp tích hợp sẵn của Bootstrap, làm việc với điều hướng theo thẻ của Bootstrap và cung cấp các ví dụ về cách trộn CSS của riêng bạn với Bootstrap

Bạn có thể thêm Bootstrap vào dự án của mình theo một số cách. Trong ví dụ này, tôi đã đặt một liên kết tới Bootstrap trong phần đầu của tài liệu HTML

Tôi cũng đã tham khảo tệp JavaScript của jQuery và Bootstrap qua mạng phân phối nội dung. Các tập lệnh này được đưa vào ngay trước thẻ nội dung đóng của trang

Bắt đầu với Bố cục dựa trên lưới của Bootstrap

Dễ sử dụng là một trong những thế mạnh lớn nhất của Bootstrap. Nó bao gồm mọi thứ mà hầu hết các nhà thiết kế web sẽ muốn cho bất kỳ dự án nào. Ít nhất trong số này là hệ thống lưới ưu tiên thiết bị di động, đáp ứng nhanh của Bootstrap

Lưới này cho phép bạn bố trí trang chi tiết sản phẩm của mình mà không cần viết nhiều CSS tùy chỉnh. Các mục lưới sẽ có tối đa 12 cột khi kích thước của thiết bị tăng lên

Mỗi lưới Bootstrap được bao bọc trong một phần tử HTML với lớp “container” hoặc lớp “container-fluid”. Cái sau sẽ tạo bố cục có chiều rộng đầy đủ, trong khi cái trước sẽ có chiều rộng cố định

 ...

Trong mỗi bộ chứa lưới Bootstrap, bạn đặt các hàng hoặc cụ thể hơn là các phần tử HTML có lớp “hàng”. Thông thường, đây sẽ là các phần tử div hoặc phần

 

    …
 

Tiếp theo, các hàng phải bao gồm một hoặc nhiều phần tử với các lớp liên quan đến cột. Bootstrap có bốn tùy chọn liên quan đến lưới. cực nhỏ, nhỏ, vừa và lớn. Các tùy chọn này chỉ định điểm dừng cho hệ thống lưới. Trong ví dụ này, tôi sẽ sử dụng lưới trung bình (md)

 

   

    …
   
 

Mỗi tùy chọn lưới Bootstrap có các đặc điểm cụ thể hữu ích để bố trí trang cho từng thiết bị

Hãy nhớ rằng, Bootstrap là thiết bị di động đầu tiên. Thiết lập mặc định của nó là nhằm vào điện thoại thông minh. Truy vấn phương tiện được sử dụng để giải quyết các bố cục cụ thể cho kích thước màn hình hoặc thiết bị lớn hơn

Áp dụng Lưới Bootstrap cho Trang chi tiết sản phẩm của bạn

Phần sản phẩm được tạo thành từ hai nửa, mỗi nửa kéo dài sáu trong số 12 cột có sẵn

Trang chi tiết sản phẩm tôi đang xây dựng được chia đôi. Nó sử dụng hai phần tử div rộng sáu cột, được bao quanh bởi một hàng và một vùng chứa

  

   

    … [this is the product image]
   
   

    …[this is the product information]
   
  
 

Vì tôi đang sử dụng tùy chọn lưới trung bình, trên màn hình hẹp hơn 992 pixel, hai phần này — hình ảnh sản phẩm và thông tin sản phẩm — sẽ có chiều rộng đầy đủ. Nhưng trên màn hình có ít nhất 992 pixel, hai phần này sẽ phân chia không gian có sẵn

Đây là mã được sử dụng cho hình ảnh sản phẩm. Hãy nhớ rằng đây là bên trong một hàng, do đó, nằm bên trong một thùng chứa

Lớp “phản hồi hình ảnh” là một tính năng của Bootstrap. Nó sẽ thêm chiều rộng tối đa, bằng với chiều rộng của phần tử gốc của hình ảnh. Điều này có nghĩa là hình ảnh sẽ điều chỉnh theo kích thước màn hình với phần còn lại của bố cục

Lưới làm tổ

Lưới của Bootstrap có thể được lồng vào nhau, nghĩa là bạn có thể đặt lưới trong lưới. Đây là cách mình sẽ quản lý phần thông tin sản phẩm của trang. Để sử dụng lưới lồng nhau, tôi bao gồm một phần tử hàng bổ sung

Ví dụ, đây là mã được sử dụng cho tiêu đề sản phẩm

 

  

   
Kodak 'Brownie' Flash B Camera
 

Phần tử div đầu tiên đại diện cho sáu cột trong hàng mà nó chia sẻ với hình ảnh. Trong sáu cột này, tôi đang thêm một hàng mới, có một tập hợp mới gồm 12 cột hẹp hơn một chút

Lưới Bootstrap có thể được lồng vào nhau. Trong trường hợp này, phần thông tin sản phẩm, bao gồm tên sản phẩm, sử dụng lưới lồng nhau

Bên trong hàng, chúng ta có một phần tử div được đặt để chiếm tất cả 12 cột lưới có sẵn. Bên trong cột này, chúng tôi có một phần tử h1 cho tên sản phẩm thực tế

 
Kodak 'Brownie' Flash B Camera

Phần tiếp theo của thông tin sản phẩm bao gồm nhãn có từ “Cổ điển” và số đơn vị lưu kho (SKU) của sản phẩm. Để trình bày điều này, tôi sử dụng một hàng Bootstrap mới, giống như tôi đã làm với tên sản phẩm

Các lớp “nhãn” và “nhãn-chính” được tích hợp sẵn trong Bootstrap. Tất cả những gì tôi cần làm để lấy nhãn là chỉ định các lớp này

Lớp "đơn cách" là một ví dụ về việc kết hợp Bootstrap và CSS của riêng tôi dễ dàng như thế nào. Trong trường hợp này, tên lớp chỉ định phông chữ, Ubuntu Mono

Để sử dụng phông chữ này, có sẵn qua Google Fonts, hãy thêm liên kết vào phần đầu của tài liệu HTML

Tiếp theo, tạo lớp sẽ áp dụng phông chữ. Điều này có thể được thêm vào một biểu định kiểu bên ngoài hoặc thậm chí bên trong

Di chuyển xuống và qua thông tin sản phẩm, phần tiếp theo, bao gồm mô tả ngắn gọn, cũng là một hàng lồng nhau

Phần đánh giá của trang sử dụng hai tính năng của Bootstrap. glyphicons và khả năng nhắm mục tiêu trình đọc màn hình

Đầu tiên, hãy chú ý đến phần tử span với lớp “sr-only”. Văn bản này, mô tả xếp hạng của sản phẩm, sẽ được đọc trên trình đọc màn hình để hỗ trợ khả năng truy cập, nhưng không được hiển thị trực quan trên trang

Năm phần tử span tiếp theo, mỗi phần tử đại diện cho một glyphicon Bootstrap. Hình ảnh biểu tượng này sẽ được sử dụng để hiển thị xếp hạng sản phẩm, nhưng bị ẩn khỏi trình đọc màn hình

Các ngôi sao trong xếp hạng đánh giá là Bootstrap glyphicons

Bootstrap có 295 glyphicons để lựa chọn. Các biểu tượng này có thể được sử dụng ở bất cứ đâu trong dự án của bạn

Điểm mấu chốt ở đây là mỗi phần này là một phần của lưới Bootstrap lồng nhau. Lưới lồng nhau này trình bày toàn bộ phần thông tin sản phẩm

Đây là mã đặt mọi thứ từ giá sản phẩm đến thông tin cho đơn đặt hàng qua điện thoại

 ...

Khi bạn kiểm tra mã, hãy lưu ý rằng tôi tiếp tục có các phần tử hàng lồng nhau. Tôi cũng đang tiếp tục pha trộn hoặc kết hợp các lớp Bootstrap với CSS tùy chỉnh khi tôi cần chúng. Ví dụ: xem xét mã cho biểu tượng dấu cộng trong phần số lượng sản phẩm

 ...

Các lớp “btn,” “btn-default,” và “btn-lg” đều là một phần của Bootstrap. Chúng sẽ làm cho phần tử trông giống như một cái nút, đặt màu của nó (mặc định trong trường hợp này) và làm cho nút lớn tương ứng. Lớp “btn-qty” là CSS tùy chỉnh dành riêng cho dự án này. Nó có nhiệm vụ duy nhất là làm cho cả ba nút số lượng, nếu bạn muốn, có cùng kích thước

 ...

Bootstrap đặt các góc bo tròn trên các nút, do đó, một khai báo CSS riêng bằng cách sử dụng lớp “thêm vào giỏ hàng” kết hợp với lớp “btn” của Bootstrap sẽ loại bỏ các góc này

 ...

Cũng lưu ý một số lớp Bootstrap hữu ích hơn trong hàng có thông báo “Còn hàng” và liên kết “Thêm vào danh sách mua sắm”

 ...

Đầu tiên, lớp “text-center” thực hiện chính xác những gì bạn mong đợi. Bootstrap cũng cung cấp “text-left”, “text-right”, “text-justify” và “text-nowrap” — mỗi cái thực hiện đúng như tên gọi của nó

Đối với phần Thêm vào danh sách mua sắm, lưu ý rằng có một lớp bù trừ. Chức năng này định vị lại phần tử lưới này sang một cột bên phải. Điều này được thực hiện để sắp xếp liên kết Thêm vào danh sách mua sắm với nút Thêm vào giỏ hàng phía trên nó trên màn hình tương đối lớn hơn

Làm việc với các Tab Điều hướng của Bootstrap

Sử dụng CSS và JavaScript, Bootstrap cung cấp giải pháp điều hướng theo tab dễ triển khai. Đây là những gì tôi sẽ sử dụng để sắp xếp các phần theo thẻ —mô tả, tính năng, ghi chú và đánh giá  — ở cuối khu vực thông tin sản phẩm

Đối với trang chi tiết sản phẩm ví dụ, các tab điều hướng Bootstrap được sử dụng để đưa nhiều thông tin vào không gian tương đối nhỏ trên trang

Đánh dấu cho điều hướng tab có hai phần. Đầu tiên đại diện cho các tab thực tế

 ...

Lưu ý rằng tôi bắt đầu, trong trường hợp này, với một danh sách không có thứ tự, gán cho nó các lớp “nav” và “nav-tabs. ” Nó cũng có vai trò “tablist”

 ...

Mỗi tab riêng lẻ là một mục danh sách có liên kết bên trong. Tab đang hoạt động là tab sẽ hiển thị khi tải trang. Thuộc tính href trong mỗi liên kết trỏ đến thuộc tính id của ngăn tab đích, mà tôi sẽ xem xét tiếp theo

Nửa sau của điều hướng tab đại diện cho các ngăn tab. Đây là mã ngăn tab với nội dung thực tế đã bị xóa để bạn có thể xem cấu trúc ngăn

 ...

Mỗi ngăn trong tab điều hướng có thể bao gồm bất kỳ loại nội dung nào, kể cả văn bản hoặc thậm chí là đa phương tiện

Mỗi ngăn có một vai trò, lớp và id. Id là những gì tương ứng với liên kết trong phần tab. Mỗi ngăn có thể chứa bất kỳ loại nội dung nào bạn muốn. Ví dụ, đây là nội dung cụ thể từ ngăn mô tả

 ...

Đây là tất cả những gì bạn cần làm. Với JavaScript của jQuery và Bootstrap đang chạy trên trang, các tab này sẽ hoạt động

Tổng hợp

Trong bài viết này, tôi đã mô tả cách bạn có thể sử dụng Bootstrap để bố trí trang chi tiết sản phẩm. Tôi đã thảo luận về hệ thống lưới Bootstrap, chỉ cho bạn một số lớp của Bootstrap và thiết lập điều hướng theo thẻ

Hãy nhớ rằng bố cục Bootstrap có thể được sử dụng với hầu hết các nền tảng thương mại điện tử

Xem phần tiếp theo trong loạt bài của Armando Roggio về cách sử dụng Bootstrap, tại “Tạo chân trang thương mại điện tử ấn tượng trong Bootstrap. ”