Thành phần Hình ảnh đại diện cho một hình ảnh, hình minh họa hoặc ảnh chụp trong thiết kế của bạn. Nó có thể trỏ tới hình ảnh mà bạn đã nhập trong thiết kế của mình hoặc tới những hình ảnh được lưu trữ bên ngoài
Khái niệm cơ bản
Kéo và thả một thành phần Hình ảnh từ bảng Thành phần vào vùng hiển thị. Nó sẽ xuất hiện trống vì nó sẽ không trỏ đến bất kỳ tệp hình ảnh nào. Nhấp đúp vào hình ảnh sẽ mở Trình duyệt hình ảnh, nơi bạn có thể duyệt tất cả các hình ảnh đã nhập trong thiết kế của mình
Chọn một trong các hình ảnh bằng cách nhấp đúp vào nó [hoặc bằng cách nhấp một lần và chọn Lưu]. Điều này sẽ hiển thị nó trên trang
Tùy chọn hình ảnh
Khi một thành phần Hình ảnh được chọn, bảng Tùy chọn sẽ hiển thị một số điều khiển hữu ích để tùy chỉnh hình ảnh của bạn
Dưới đây là mô tả nhanh về cài đặt
- URL nguồn - Chứa URL của hình ảnh mà thành phần đang hiển thị. Bạn có thể sử dụng nó để trỏ đến hình ảnh từ xa
- Chiều rộng & Chiều cao - Đặt các thuộc tính tương ứng trên hình ảnh, xác định kích thước của nó. Tốt hơn là sử dụng CSS thay vì hai tùy chọn này
- Alt - Đây là phần mô tả hình ảnh của bạn chứa gì. Nó được hiển thị khi không thể tải hình ảnh và được đọc bởi trình đọc màn hình
- Lazy Loading - Tùy chọn này kiểm soát thuộc tính tải [mở cửa sổ mới], có thể khiến trình duyệt chỉ tải hình ảnh khi chúng hiển thị
- Style - Cho phép bạn nhanh chóng xác định hình dạng cơ bản của hình ảnh
- Responsive - Tùy chọn này đảm bảo rằng hình ảnh chia tỷ lệ với cha của nó và không bao giờ vượt quá chiều rộng của nó. Bằng cách này, bố cục của bạn trông tuyệt vời trên mọi kích thước màn hình
Để biến một hình ảnh thành một liên kết, sao cho việc nhấp vào nó dẫn người dùng đến một trang/trang web khác, bạn cần thả hình ảnh vào trong một thành phần Link
. bước
- Tìm thành phần
Link
trong bảng Thành phần và thả nó vào trang - Xóa văn bản của liên kết, để nó trống
- Thả một hình ảnh bên trong liên kết. Bạn sẽ cần thực hiện việc này từ bảng Tổng quan, vì khi liên kết trống, liên kết không có chiều cao và bạn sẽ không thể thả hình ảnh bên trong liên kết đó từ Giai đoạn
Giờ đây, bạn có thể kiểm soát URL mà hình ảnh dẫn đến khi nhấp vào, bằng cách chọn thành phần Link
và thay đổi cài đặt URL
của nó trong bảng Tùy chọn
hình ảnh từ xa
Thay vì nhập tệp hình ảnh, bạn có thể trỏ thành phần Hình ảnh tới một URL. Chỉ cần dán URL của bạn vào trường Source URL
. Bằng cách này, bạn không cần nhập hình ảnh trong Bootstrap Studio và máy chủ của bạn kiểm soát hình ảnh nào sẽ trả về máy khách
Ghi chú
Không liên kết đến hình ảnh được lưu trữ trên trang web của người khác. Điều này được gọi là hotlinking và được coi là một thực tiễn xấu. Chủ sở hữu trang web có thể xóa hoặc thay đổi hình ảnh bất cứ lúc nào, phá vỡ các trang web của bạn
Bootstrap cung cấp các lớp khác nhau cho hình ảnh để làm cho chúng trông đẹp hơn và cũng để làm cho chúng phản hồi nhanh. Tạo một hình ảnh phản hồi có nghĩa là hình ảnh đó phải chia tỷ lệ theo phần tử gốc của nó. Nghĩa là, kích thước của hình ảnh không được vượt qua cha mẹ của nó và sẽ tăng và thu nhỏ theo sự thay đổi về kích thước của cha mẹ mà không làm mất tỷ lệ khung hình của nó
Bootstrap là một khung CSS nguồn mở, chủ yếu để xây dựng các trang web đáp ứng và các ứng dụng ưu tiên thiết bị di động. Khung có các cài đặt CSS toàn cầu; . g. , băng chuyền, biểu mẫu và thanh điều hướng;
Bạn có thể tạo các thành phần bằng cách thêm các lớp Bootstrap vào các thành phần. Các lớp đó cũng tạo kiểu cho hình ảnh và tối ưu hóa chúng cho hành vi phản hồi, tôi. e. , chia tỷ lệ cùng với vùng chứa hình ảnh khi cửa sổ trình duyệt được thay đổi kích thước
Thiết kế web đáp ứng [RWD] chứa các trang web và ứng dụng phát hiện kích thước và hướng màn hình của khách truy cập để trình duyệt có thể tự động điều chỉnh màn hình cho phù hợp. Cách tiếp cận ưu tiên thiết bị di động giả định rằng máy tính bảng, ứng dụng dành cho thiết bị di động dành riêng cho nhiệm vụ và điện thoại thông minh là những công cụ chính để hoàn thành công việc, giải quyết các yêu cầu của chúng trong thiết kế
Hình ảnh phản hồi là gì?
Là một thành phần quan trọng của bố cục linh hoạt, hình ảnh đáp ứng điều chỉnh kích thước, hướng và độ phân giải của hình ảnh dựa trên thiết bị của người dùng cuối, cho phép các trang web phát hiện và phản hồi các điều kiện màn hình của khách truy cập
Theo quy định, hình ảnh phản hồi cung cấp nhiều tùy chọn cho một hình ảnh. Tùy thuộc vào kích thước màn hình, trang web sẽ gửi phiên bản nhỏ hơn hoặc lớn hơn của hình ảnh sắc nét trực quan để trình duyệt có thể tải xuống phiên bản có kích thước phù hợp. Quá trình hình ảnh phản hồi xảy ra trước khi hình ảnh đến trình duyệt
Để biết thêm chi tiết, hãy xem Thực tiễn tốt nhất cho thiết kế web đáp ứng.
Bài viết này giải quyết các chủ đề sau
Hiểu các điều kiện tiên quyết cho Bootstrap Responsive Images
Trước khi thiết lập hình ảnh phản hồi cho trang của bạn, hãy chuẩn bị sẵn các gói Bootstrap CSS và JavaScript bằng cách tải xuống các tệp được biên dịch mới nhất của chúng
Ngoài ra, hãy thêm các tập lệnh Bootstrap cần thiết vào các trang của bạn bằng mạng phân phối nội dung JSDeliver [CDN] miễn phí. Không cần tải xuống. Làm theo các bước dưới đây