Trong bài giảng trước đây, chúng tôi đã thấy một số cách để tiết lộ nội dung cho người dùng.
Vì vậy, đây sẽ là một lớp phủ trên đầu
trang web của bạn để hiển thị thông tin cho người dùng.
Vì vậy, chúng ta sẽ xem xét hai trong số những phương pháp này,
chú giải công cụ và phương thức trong bài tập này.
Trước tiên, chúng ta sẽ thêm một chú giải công cụ vào trang này.
Vì vậy, đi đến index.html và trong Jumbotron,
chúng ta thấy nút này trong Jumbotron ở đó.
Để nút này, tôi sẽ thêm vào một chú giải công cụ.
Vì vậy, đi vào nút này,
những gì tôi sẽ làm bây giờ chỉ đơn giản là đi vào dòng tiếp theo
để nó rõ ràng hơn một chút để viết mã ở đó và vào nút này,
tôi sẽ giới thiệu các tooltip ở đây.
Vì vậy, sau khi cảnh báo nút, tôi sẽ nói,
data-toggle tooltip, vì vậy bạn có thể thấy rằng
các thành phần javascript đi vào sử dụng ở đây và sau đó dữ liệu html-true.
Vì vậy, nếu chúng ta áp dụng dữ liệu này HTML thuộc tính và gửi nó đến true, điều
đó có nghĩa là nội dung chú giải công cụ có thể được tạo kiểu bằng cách sử dụng
HTML và sau đó họ sẽ nói dòng tiếp theo,
tôi sẽ cung cấp cho các thuộc tính của tiêu đề.
Vì vậy, đây là nơi các nội dung của chú giải công cụ sẽ được kèm theo.
Vì vậy, chúng tôi sẽ nói “hoặc gọi cho chúng tôi tại”.
Vì vậy, bạn có thể thấy rằng tôi đang sử dụng HTML để
định dạng nội dung của chú giải công cụ ở đó.
Vì vậy, với điều đó, chú giải công cụ được giới thiệu vào nút ở đó và cũng là thuộc tính cuối cùng
tôi sẽ cung cấp cho là vị trí dữ liệu mà tôi sẽ cung cấp cho dưới đây.
Vì vậy, có nghĩa là chú giải công cụ này sẽ được hiển thị ở dưới cùng của nút này ở đây.
Sau khi thêm vào nút này,
bây giờ chúng ta sẽ đi và thêm
một số mã JavaScript vào cuối trang này để kích hoạt chú giải công cụ này.
Đi đến cuối trang,
hãy để tôi giới thiệu kịch bản ở đó bằng cách thêm vào các thẻ cho kịch bản.
Bên trong này, chúng tôi sẽ xác định mã JavaScript thực tế ở đây.
Vì vậy, chúng tôi sẽ nói các tài liệu đồng đô la.
Vì vậy, kịch bản này là trong việc sử dụng cú pháp jQuery ở đây.
Vì vậy, điều này xác định khi tài liệu đã sẵn sàng,
khi tài liệu HTML cụ thể này đã sẵn sàng
cho render và xác định gọi chức năng cụ thể này ở đây.
Vì vậy, chúng tôi cung cấp các chức năng JavaScript để được
gọi tại thời điểm đó, vì vậy chúng tôi sẽ chỉ định chức năng của chúng tôi và sau đó chúng tôi sẽ nói
trong ngoặc dữ liệu chuyển đổi tooltip và tooltip.
Vì vậy, đó là mã mà chúng ta sẽ giới thiệu vào trang này ở đây.
Đây là cú pháp jQuery và chúng tôi sẽ bao gồm jQuery nhiều hơn một chút trong mô-đun tiếp theo.
Cho thời điểm này, điều này là xác định rằng bất cứ nơi nào có một thuộc tính của
loại này cho thẻ HTML cụ thể đó,
hãy bật chú giải công cụ.
Vì vậy, nhưng thay đổi này sẽ lưu các thay đổi và
sau đó đi và có một cái nhìn vào cách chú thích công cụ trông như thế nào trên trang web.
Đi đến trang web,
bây giờ khi chúng tôi giữ con trỏ chuột của chúng tôi vào mô hình ở đây,
bạn có thể thấy rằng chú giải công cụ đang được hiển thị ở dưới cùng ở đây.
Vì vậy, bạn có thể nhận thấy rằng nội dung của chú giải công cụ này
chính xác là những gì chúng tôi đã đưa ra như là thuộc tính tiêu đề cho phía dưới đó ở đó.
Vì vậy, đây là cách chúng ta có thể thêm chú giải công cụ vào trang của chúng tôi.
Chú giải công cụ là một cách tốt đẹp để cung cấp một số thông tin bổ sung cho
người dùng khi người dùng điều hướng đến các vị trí khác nhau trên trang.
Tiếp tục với bài tập, trong bước tiếp theo,
chúng ta sẽ tạo ra một phương thức trong trang web của chúng tôi.
Phương thức này sẽ lưu trữ biểu mẫu đăng nhập và sẽ được hiển thị bằng cách sử dụng một liên kết trong navbar của họ.
Vì vậy, để bắt đầu,
bootstrap khuyên rằng tất cả các mã liên quan đến phương thức được đặt ở đầu trang của bạn.
Vì vậy, tôi sẽ đi vào và viết bên dưới navbar ở đây,
tôi sẽ đặt trong mã cho phương thức ở đó.
Vì vậy, để tạo ra một phương thức,
tôi sẽ bắt đầu bằng cách nói div ID đăng nhập modal.
Vì vậy, chúng tôi cung cấp cho một ID để phương thức này để nó có thể được kích hoạt từ
liên kết navbar và sau đó lớp như “modal fade”.
Vì vậy, bạn thấy rằng lớp học là modal và fade có nghĩa
là khi modal được đưa lên màn hình,
nó sẽ mờ dần lên màn hình và vai trò là như một hộp thoại.
Vì vậy, có nghĩa là nó được hiển thị trên đầu trang.
Hãy đóng lại div của phần này.
Vì vậy, bên trong đây, chúng ta sẽ tạo ra các phương thức.
Vì vậy, trong đó, tôi sẽ tạo ra div thứ hai với lớp như modal-dialog và sau đó
bên trong đây chúng ta sẽ xác định nội dung của
các modal thực tế ở đây và đóng div.
Và như vậy, đây là để được nội dung phương thức sẽ được cấu trúc ở đây.
Vì vậy, bên trong hộp thoại phương thức này, chúng tôi sẽ tạo ra một div với
nội dung phương thức lớp và
đóng div và một phương thức điển hình sẽ chứa một phương thức tiêu đề.
Vì vậy, đó là nơi div tiếp theo sẽ lưu trữ.
Và sau đó là một cơ thể phương thức
mà sẽ chứa nhiều nội dung liên quan đến phương thức.
Tất cả các phần này của phương thức là tùy chọn,
nhưng ít nhất bạn nên có một phần như vậy trong phương thức của bạn
nếu không nó không có ý nghĩa để tạo ra phương thức ở đó.
Vì vậy, với điều này, cấu trúc của phương thức bây giờ đã sẵn sàng.
Vì vậy, chúng ta sẽ đi vào và điền vào nội dung vào phương thức này.
Vì vậy, bây giờ, chúng ta cần phải xác định những gì đi vào phương thức.
Bây giờ, trong tiêu đề chúng ta sẽ đặt trong một nút,
một nút chéo trong phương thức mà khi nhấp vào sẽ bỏ qua các modal.
Đó là cách thông thường các phương thức được thiết kế.
Và cơ thể modal sẽ tự chứa hình thức.
Bây giờ, một phương thức có thể chứa bất cứ điều gì bạn muốn, ví dụ,
nếu bạn nhấp vào một hình ảnh trong
một thư viện hình ảnh và bạn muốn hiển thị kích thước lớn hơn của hình ảnh,
thậm chí ở đó bạn có thể sử dụng một phương thức để hiển thị thông tin.
Bây giờ trong bài tập này,
chúng ta sẽ sử dụng phương thức để lưu trữ một hình thức được hiển thị cho người dùng.
Được rồi, bây giờ, trong tiêu đề modal,
chúng tôi sẽ giới thiệu một
nút với nút gõ và lớp đóng.
Vì vậy, bạn thấy rằng đây là một nút được sử dụng để đóng phương thức và sau đó bạn sẽ nói,
data dismiss và sau đó modal.
Vì vậy, điều này có nghĩa là nút đặc biệt này
khi nhấp sẽ bỏ qua các phương thức từ màn hình.
Và nút này, tôi sẽ sử dụng thời gian,
sẽ hiển thị dưới dạng chữ thập trong các phương thức ở đây.
Vì vậy, tôi sẽ nói lần ở đây.
Trước khi nút này, chúng tôi sẽ giới thiệu
một tiêu đề mà chúng tôi sẽ hiển thị trong tiêu đề của modal vì vậy tôi
sẽ bắt đầu với một h4 với tiêu đề modal lớp.
Và sau đó bên trong h4 này,
tôi sẽ bao gồm tiêu đề của phương thức,
đó là đăng nhập bởi vì điều này sẽ hiển thị các hình thức đăng nhập.
Bây giờ chúng ta đã đặt trong một số chi tiết vào phương thức này, chúng
ta hãy thêm vào liên kết vào navbar của chúng tôi mà sẽ
kích hoạt phương thức này và sau đó chúng tôi sẽ có
một cái nhìn nhanh chóng về cách thức trông như thế nào trên màn hình.
Đi đến navbar,
ngay sau khi UL ở đây,
tôi sẽ bao gồm trong
một liên kết có thể được sử dụng để kích hoạt hiển thị và ẩn của modal.
Vì vậy, để làm điều đó, tôi sẽ đi vào và sử dụng một khoảng với lớp navbar-text.
Đây là những gì cho phép tôi bao gồm một liên kết vào navbar và hiển thị nó dưới dạng văn bản.
Vì vậy, bên trong khoảng,
tôi sẽ sử dụng một A với chuyển đổi dữ liệu,
vì vậy bạn có thể thấy chuyển đổi dữ liệu JavaScript đến và
chuyển đổi dữ liệu là cho một phương thức và sau đó dữ liệu mục tiêu.
Bạn nhớ lại rằng chúng tôi đã cung cấp ID như là phương thức đăng nhập để của chúng tôi-
Modal mà chúng tôi bao gồm.
Vì vậy, tôi sẽ sử dụng điều đó như mục tiêu dữ liệu của tôi với băm ở phía trước của điều đó.
Và bên trong đây, tôi sẽ đi vào và sử dụng
một biểu tượng phông chữ tuyệt vời cho một đăng nhập.
Vì vậy, đây là một phông chữ tuyệt vời “fa- đăng nhập”
biểu tượng và nói đăng nhập và đóng e-tech.
Vì vậy, với điều đó, chúng ta hãy lưu các thay đổi và xem trang web.
Đi đến trang web của chúng tôi trong trình duyệt,
bây giờ bạn thấy rằng ở cạnh bên phải,
bạn thấy thông tin đăng nhập này với biểu tượng này được tạo ra ở đó.
Vì vậy, đây là liên kết sẽ kích hoạt việc hiển thị các phương thức.
Vì vậy, nếu tôi nhấp vào liên kết này,
sau đó modal sẽ hiển thị trên màn hình.
Vì vậy, lưu ý rằng khi chúng tôi tạo ra phương thức này, chúng tôi đã nói,
tiêu đề trong đó có đăng nhập và sau đó cũng nút này và sau đó cơ thể
, hiện trống rỗng, chúng tôi sẽ giới thiệu thêm mã trong đó.
Bây giờ nếu bạn nhấp vào nút này, phương thức sẽ biến mất.
Nhấp vào đó một lần nữa, phương thức được hiển thị.
Ngay cả khi bạn nhấp vào bên ngoài phương thức, phương thức sẽ biến mất.
Vì vậy, đây là hành vi của phương thức mà chúng ta đã mong đợi.
Bây giờ, trong bước tiếp theo, tôi sẽ đi vào và giới thiệu các hình thức ở đây.
Tôi sẽ không giải thích chi tiết của biểu mẫu bởi vì bạn
đã nghiên cứu các biểu mẫu trong một trong những bài học trước đó.
Vì vậy, tôi chỉ cần đi vào và dán mã hình thức và
sau đó chúng ta sẽ có một cái nhìn vào hình thức trong phương thức ở đây.
Trở lại với mã,
bây giờ bạn có thể thấy rằng trong cơ thể modal,
tôi đã điền vào một hình thức.
Và sau đó tôi có hai nhóm hình thức ở đây với một đầu vào với loại email
và nhập mật khẩu và sau đó tôi có một hộp kiểm ở đây mà tôi có.
Vì vậy, điều này sẽ được dễ dàng cho bạn để giải mã những gì hình thức này là cấu trúc mã EE,
từ sự hiểu biết của bạn về cách thức Bootstrap form được thiết kế.
Tôi đã đặt trong hai nút.
Một là một nút gửi và một nút khác là một nút hủy.
Nút hủy có nút đầu tiên.
Nút hủy ở đây có mô hình bỏ dữ liệu.
Vì vậy, điều đó có nghĩa là khi bạn nhấp vào nút hủy, mô hình sẽ bị bác bỏ.
Và một trong những khác là một nút gửi được sử dụng để gửi biểu mẫu.
Vì vậy, với những thay đổi này,
chúng ta hãy lưu các thay đổi và sau đó đi và có một cái nhìn tại trang Web của chúng tôi.
Quay lại trang web,
bây giờ bạn nhấp vào đăng nhập sau đó bạn sẽ thấy một biểu mẫu cho người dùng đăng nhập.
Vì vậy, bạn sẽ thấy rằng bạn có hai hộp ở đây.
Nhập hộp vào đây để nhập email và mật khẩu,
và sau đó một hộp kiểm cho nói Nhớ tôi.
Và sau đó bạn có một đăng nhập và hủy bỏ.
Vì vậy, nếu bạn nhấp vào hủy bỏ các modal sẽ biến mất.
Cũng giống như khi bạn nhấp vào thập tự giá ở đó.
Và sau đó nếu bạn điền thông tin này và tiếp tục nhấp vào đăng nhập,
quá trình đăng nhập sẽ được bắt đầu.
Tại thời điểm này chúng tôi không có một máy chủ để làm việc này,
nhưng tôi chỉ cho bạn thấy trong Bootstrap làm thế nào bạn sẽ tạo ra một hình thức như thế này.
Tôi chắc chắn rằng bạn đã nhìn thấy những điều như thế này trên
nhiều trang web mà khi bạn nhấp vào một nút đăng nhập một
cái gì đó như thế này với biểu mẫu bật lên trên màn hình
và hy vọng bạn gõ vào thông tin.
Vì vậy, bây giờ bạn sẽ thấy cách bạn có thể tận dụng các mô hình để hiển thị
thông tin chồng lên trang web của bạn.
Với điều này, chúng tôi hoàn thành bài tập này.
Trong bài tập này, chúng ta đã thấy việc sử dụng các chú giải công cụ
và chúng ta đã thấy việc sử dụng các mô hình để hiển thị nội dung.
Đây là thời điểm tốt để bạn thực hiện một git-commint với các mẹo và mô hình công cụ tin nhắn.