[MUSIC]
Bây giờ chúng ta hãy cố gắng hiểu một số cơ chế để cho phép chúng tôi
hiển thị thông tin cho người dùng chồng lên nội dung của trang web của bạn.
Vì vậy, ở đây chúng ta sẽ xem xét ba cấu trúc khác nhau có sẵn trong Bootstrap
gọi là tooltips, povers, và modals.
Vì vậy, chú giải công cụ, pover và phương thức là gì và chúng hữu ích như thế nào?
Chúng ta sẽ xem xét một số ý tưởng cơ bản trước, và sau đó chúng ta sẽ tiếp tục xem xét một số ví dụ.
Trong bài tập sau đây, chúng tôi sẽ sử dụng chú giải công cụ và
phương thức trong trang web của chúng tôi, và chúng tôi sẽ xem xét một ví dụ về popover.
Vì vậy, như tôi đã đề cập, chú giải công cụ, pover, và phương thức là một cách
để tiết lộ nội dung cho người dùng, khi người dùng tương tác với một số yếu tố trên trang web của bạn.
Nói ví dụ khi chuột của người dùng
nhấp chuột vào nút, hoặc di chuột qua nút, hoặc nhấp vào liên kết
hoặc đạt đến một điểm nhất định trên trang web của bạn.
Vì vậy, tất cả những điều này sẽ kích hoạt thông tin được hiển thị cho người dùng.
Vì vậy, trong trường hợp này,
thông tin được hiển thị dưới dạng một lớp phủ trên đầu trang web của bạn.
Vì vậy, nội dung cơ bản của trang web vẫn còn đó, nhưng
điều này được đặt ra trên đầu trang của nội dung cơ bản.
Vì vậy, về tính linh hoạt, chú giải công cụ là đơn giản nhất để thực hiện, nhưng
đồng thời có sự linh hoạt hạn chế trong cách chúng có thể hiển thị thông tin.
Popovers linh hoạt hơn so với các chú giải công cụ, nhưng chúng cũng có những hạn chế riêng của chúng.
Phương thức cung cấp cho bạn sự hỗ trợ rộng rãi nhất để
hiển thị nội dung theo nhiều cách khác nhau.
Ví dụ, chúng ta hãy đi đến trang web của chúng tôi mà chúng tôi đã làm việc trên.
Bạn thấy rằng khi chúng tôi di chuột con trỏ chuột của chúng tôi vào nút này.
Bạn thấy thông báo này xuất hiện trên màn hình ở đây,
với một số thông tin bổ sung.
Đây là một ví dụ về chú giải công cụ.
Điều này cho phép bạn hiển thị số lượng thông tin nhỏ hơn cho người dùng.
Vì vậy, ví dụ nếu bạn đang cố gắng hướng dẫn người dùng thông qua trang web của bạn và
muốn họ biết điều gì sẽ xảy ra khi bạn nhấp vào các vị trí khác nhau bất kỳ trang web nào,
đây có thể là một cách tốt để nhắc nhở họ về những gì được mong đợi.
Vì vậy, bạn có thể dễ dàng thiết kế ví dụ, hướng
dẫn của trang web của bạn bằng cách sử dụng các chú thích công cụ này để chỉ cho người dùng.
Nếu bạn muốn một chút thông tin chi tiết hơn,
sau đó pover sẽ hữu ích hơn.
Ví dụ tương tự, thực hiện và sử dụng một popover sẽ trông như thế này.
Bây giờ trong trường hợp này,
bạn sẽ phải nhấp vào nút một cách rõ ràng để hiển thị popover.
Vì vậy, trong trường hợp đó, popover được hiển thị với một số thông tin tiêu đề, và
sau đó là nội dung thực tế ở dưới cùng trong popover đó.
Bây giờ, loại bỏ các popover sẽ yêu cầu bạn một lần nữa để nhấp vào dưới cùng ở đó.
Vì vậy, đây là hành vi của một popover.
Trong một số trường hợp, pover hữu ích hơn so với các chú giải công cụ.
Loại lớp phủ dữ liệu thứ ba của chúng tôi là phương thức.
Một phương thức cho phép bạn trình bày
thông tin chi tiết hơn cho người dùng hơn là một chú giải công cụ và popover.
Nội dung của phương thức chính nó được chia thành một tiêu đề, thân và chân trang.
Và phương thức chính nó có thể chứa rất nhiều thông tin chi tiết hơn.
Và bạn có thể sử dụng toàn bộ lưới Bootstrap,
bên trong cơ thể modal, để tổ chức nội dung thực tế.
Chúng tôi nhìn vào một vài ví dụ về việc sử dụng các phương thức tiếp theo.
Đi đến trang web của chúng tôi, bạn sẽ thấy rằng ở phía bên phải,
ở đây chúng tôi có một liên kết ở đây gọi là Đăng nhập.
Vì vậy, khi bạn nhấp vào liên kết đó, bạn sẽ nhận thấy rằng phương thức này
với hình thức đăng nhập của họ được bật lên trên màn hình.
Vì vậy, đây là hành vi điển hình của một phương thức.
Và do đó ở đây bạn có thể nhập thông tin, và
sau đó nhấp vào nút Đăng nhập để đăng nhập vào trang web của bạn.
Đi đến trang Coursera của bạn, đây là một ví dụ thực tế về việc sử dụng một phương thức.
Ví dụ, nếu bạn nhấp vào nút Đăng nhập ở đây,
bạn có thể thấy rằng trên Coursera, một biểu mẫu bật lên trên màn hình.
Vì vậy, đây là một cách sử dụng của một phương thức trong trang web của bạn.
Bây giờ bạn đã thấy ví dụ về chú giải công cụ, pover và phương thức, chúng
ta hãy đi đến bài tập tiếp theo, nơi chúng ta sẽ tạo một chú giải công cụ trên trang index.html của chúng tôi.
Chúng tôi cũng sẽ tạo ra một phương thức cho phép người dùng nhập thông tin để
đăng nhập vào trang web của chúng tôi.
[ NHẠC]