Tạo danh sách Sản phẩm bằng Bootstrap ( Code trang sản phẩm, Code chi tiết sản phẩm HTML )

Bootstrap là một khung HTML, CSS và JavaScript miễn phí phổ biến để phát triển các trang web đáp ứng, ưu tiên thiết bị di động. Khung bao gồm các mẫu HTML và CSS đáp ứng phù hợp với các nút, bảng, điều hướng, chế độ xem xoay hình ảnh và các phần tử khác mà bạn có thể sử dụng trên các trang web.

Nó cung cấp một số plug-in JavaScript tùy chọn, cho phép các nhà phát triển chỉ có kiến ​​thức mã hóa cơ bản có thể phát triển các trang web xuất sắc nhanh chóng và đáp ứng. Với Dreamweaver, bạn có thể tạo tài liệu Bootstrap và chỉnh sửa các trang web hiện có được tạo bằng Bootstrap.

Cho dù đó là tệp Bootstrap được thiết kế tốt hay tệp vẫn đang được thiết kế, bạn có thể chỉnh sửa chúng trong Dreamweaver và bạn không chỉ có thể chỉnh sửa mã mà còn có thể sử dụng chỉnh sửa chế độ xem theo thời gian thực, Trình thiết kế CSS trực quan, truy vấn phương tiện trực quan và Trích xuất. Thực hiện các thay đổi thiết kế tùy thuộc vào chức năng chỉnh sửa.

Bạn có thể chọn một trong các tùy chọn sau trong hộp thoại “Tài liệu Mới” để bắt đầu thiết kế trang web Bootstrap của mình, bằng cách:

  • Bootstrap Starter Template (“Starter Template”> “Bootstrap Template”). Sử dụng tùy chọn này nếu bạn muốn bắt đầu nhanh chóng mà không gặp rắc rối khi sắp xếp trang lại từ đầu. Chỉ cần chỉnh sửa văn bản và thay thế tài nguyên khi cần thiết để tạo một trang web đáp ứng.
  • Tạo tài liệu HTML dựa trên khuôn khổ Bootstrap (“Tài liệu mới”> “HTML”> “Bootstrap”) – Nếu bạn muốn xây dựng trang web của mình từng bước với các thành phần CSS và Bootstrap trong Dreamweaver, bạn có thể sử dụng tùy chọn này.

Với các mẫu khởi động Bootstrap, bạn có thể nhanh chóng tạo các trang web với các chủ đề phổ biến. Tất cả các tệp phụ thuộc trong khuôn khổ sẽ được lưu tự động.

  • Nhấp vào “Tệp”> “Mới”.
  • Trong hộp thoại “Tài liệu Mới” xuất hiện, nhấp vào “Mẫu dành cho người mới bắt đầu”, rồi chọn mẫu mong muốn từ danh sách mẫu Bootstrap.
  • Nhấp vào “Tạo”. Điều này tạo ra một trang HTML dựa trên mẫu đã chọn. Bây giờ bạn có thể sửa đổi trang theo nhu cầu của mình bằng cách thêm hoặc xóa các thành phần, chỉnh sửa văn bản hoặc tài nguyên.

Bạn có thể bắt đầu xây dựng trang web đáp ứng của mình bằng cách tạo các tài liệu HTML dựa trên khung Bootstrap. Bạn có thể chọn tạo một tập hợp các tệp khung Bootstrap hoặc sử dụng các tệp hiện có. Khi tài liệu được tạo, bạn có thể sử dụng bảng “Chèn” trong Dreamweaver để thêm các thành phần Bootstrap, chẳng hạn như các phần tử accordion và các dạng xem xoay. Hoặc, nếu bạn có Photoshop composite, bạn có thể sử dụng Extract để nhập hình ảnh, phông chữ, kiểu, văn bản, v.v. vào tài liệu Bootstrap của mình. Bằng cách sau:

  • Nhấp vào “Tệp”> “Mới”.
  • Trong hộp thoại “Tài liệu Mới”, nhấp vào “Tài liệu Mới”> “HTML”, sau đó nhấp vào tab “Bootstrap”.
  • Để tạo tệp bootstrap.css mới (và các tệp bootstrap khác): Chỉ định xem bạn muốn tạo một CSS Bootstrap mới hay sử dụng một CSS hiện có.

+ Nếu bạn chọn tạo CSS mới, thư mục “css” sẽ được tạo trong thư mục gốc của trang web và tệp bootstrap.css sẽ được sao chép vào thư mục mới.

+ Nếu bạn chọn sử dụng CSS hiện có, vui lòng chỉ định đường dẫn hoặc duyệt đến vị trí của CSS.