[MUSIC]
Trong bài tập này, chúng ta sẽ xem xét sự hỗ trợ của Bootstrap cho các nút và biểu mẫu.
Vì vậy, chúng tôi sẽ bao gồm một vài nút và nhóm nút trong trang web của chúng tôi.
Và chúng ta cũng xem xét việc thiết kế các form và tạo kiểu cho form bằng cách sử dụng các class Bootstrap.
Để bắt đầu, hãy truy cập trang hướng dẫn và
tải xuống tệp contactus.html.zip mà chúng tôi đã cung cấp ở đó.
Vì vậy, nhấp chuột phải vào đó, và
sau đó lưu liên kết này vào thư mục Confect của bạn.
Như,
contactus.html.zip tập tin.
Và sau đó một khi tệp zip được tải xuống, giải nén tệp để lấy trang contactus.html.
Sau đó, bạn có thể xóa tệp zip.
Một khi bạn đã giải nén các tập tin và nhận được trang contactus.html,
bạn sẽ nhận thấy rằng khi bạn tải trang này trong
trình duyệt của bạn bằng cách sử dụng localhost:3000/ contactus.html,
sau đó bạn sẽ thấy rằng trang này đã được định hình trước với một số nội dung.
Vì vậy, bạn có thể nhận thấy rằng bạn đã có thanh điều hướng ở đó.
Chúng tôi có jumbotron đã được định dạng cho chúng tôi.
Và bạn sẽ nhận thấy rằng tôi có breadcrumbs và
liên hệ với chúng tôi hướng đến đây định dạng.
Sau đó, bạn sẽ thấy một số thông tin bổ sung, địa chỉ ở đây.
Và cũng có thể, bạn sẽ nhận thấy rằng chân trang đã được hình thành.
Nhưng bạn sẽ nhận thấy hai điều ở đây,
bạn sẽ nhận thấy rằng có một dòng ở đây nói rằng các nhóm nút đi ở đây và
sau đó một dòng nữa ở đây nói hình thức đi ở đây.
Vì vậy, chúng tôi sẽ thay thế hai với một nhóm nút và một hình thức.
Và trên đường đi, tìm hiểu sự hỗ trợ của Bootstrap cho các nút và biểu mẫu.
Trước khi chúng tôi tiến hành chuyển tiếp, bây giờ chúng tôi có ba trang trong trang web của chúng tôi,
nó là một ý tưởng tốt cho chúng tôi để liên kết chúng với nhau,
cả trong thanh điều hướng và trong các liên kết ở chân trang.
Hãy sửa đổi hai trang này để chúng ta có thể điều hướng giữa ba trang này một cách dễ dàng.
Vì vậy, đi đến trang contactus.html, bạn sẽ nhận thấy rằng trong thanh điều hướng,
tôi đã có các liên kết đến index.html được thiết lập một cách chính xác.
Và bạn sẽ nhận thấy rằng ở phía dưới
đây bạn có liên kết liên lạc ở đây.
Nhưng liên kết tương ứng với about chưa được cấu hình đúng.
Vì vậy, đi đến liên kết này ở đây và sau đó cập nhật mà
aboutus.html.
Liên kết liên hệ với chúng tôi có thể được để lại một mình như vậy.
Và sau đó lưu các thay đổi.
Bây giờ tương tự, đi đến chân trang của trang này.
Và bạn sẽ nhận thấy rằng ở chân trang chúng tôi có ba liên kết ở đây.
Và đây có thể là một điểm tốt để thay thế các liên kết
với các liên kết đến các trang tương ứng.
Vì vậy, tôi sẽ nói, index.html, aboutus.html,
và, contactus.html.
Và lưu lại những thay đổi.
Tương tự như vậy, đi đến index.html, và sau đó trong index.html cũng,
liên kết liên hệ với chúng tôi đã không được thiết lập.
Vì vậy, chúng ta hãy cập nhật điều đó để contactus.html.
Và sau đó tương tự, cập nhật các liên kết trong chân trang.
Cũng đi đến aboutus.html và sau đó sửa chữa các liên kết ngay cả ở đó.
Vì vậy, trong aboutus.html cũng, trong tiêu đề tôi sẽ sửa chữa các liên kết.
Và cũng ở chân trang của aboutus.html.
Vì vậy, bây giờ khi bạn truy cập trang web của
bạn, bạn sẽ có thể điều hướng trở lại trang chủ của bạn, đến trang về của bạn.
Và từ trang giới thiệu, bạn thậm chí có thể quay lại trang liên hệ.
Vì vậy, tất cả các liên kết giữa ba trang trong các tiêu đề tương ứng, và
cũng là chân trang, ở đây nên được thiết lập.
Vì vậy, nếu bạn nhấp vào bất kỳ một trong số này sẽ đưa bạn đến trang thích hợp.
Bây giờ là thời gian để bắt đầu làm việc trên các nút mà chúng tôi sẽ
bao gồm trong trang contactus.html của chúng tôi.
Vì vậy, những gì tôi sẽ làm là tôi sẽ thay thế dòng này bằng mã cho
nút và nhóm nút và
sau đó, chúng tôi sẽ trở lại để giải thích làm thế nào toàn bộ điều này hoạt động.
Mở contactus.html trong trình soạn thảo của chúng
tôi, chúng tôi sẽ xác định vị trí nơi tuyên bố này, nhóm nút đi đây, tồn tại.
Và sau đó tôi sẽ thay thế bằng mã tương ứng với
nhóm nút đó trước tiên.
Và sau đó tôi sẽ trở lại để giải thích làm thế nào mã này hoạt động.
Vì vậy, chúng ta hãy lưu các thay đổi, và sau đó xem
nhóm nút này trông như thế nào trong trình duyệt của chúng tôi.
Đi đến trình duyệt của bạn, bây giờ bạn có thể thấy rằng trong
trang web của chúng tôi nhóm nút đã được tạo ra.
Vì vậy, bạn có thể thấy rằng có ba nút ở đây,
nút gọi, Skype và Email.
Bây giờ, tất cả ba được nối với nhau thành một thanh đơn hoặc
thanh nút hoặc những gì là trong thuật ngữ Bootstrap gọi là một nhóm nút.
Vì vậy, chúng ta hãy nhìn vào làm thế nào chúng ta đi về xây dựng một cái gì đó như thế này trong
mã Bootstrap.
Vì vậy, ở đây tôi có cả cửa sổ trình duyệt và mã của tôi mở cạnh nhau.
Vì vậy, chúng ta hãy nhìn vào cách chúng ta tạo mã nút này.
Hãy nhìn vào mã, bạn nhận thấy rằng
các nút được bao gồm bên trong một div ở đây.
Đối với div, chúng tôi áp dụng các lớp, btn-group.
Vì vậy, nếu bạn có một nhóm các nút mà bạn muốn tham gia với nhau và
trình bày như một nhóm các nút, như một thanh các nút,
sau đó bạn sẽ sử dụng một div với các lớp nhóm nút và
vai trò như nhóm ở đây để div đó.
Bây giờ bên trong đó, bạn sẽ nhận thấy rằng tôi đang sử dụng, a,
tag để xác định ba nút.
Vì vậy, chúng ta hãy nhìn vào cách chúng ta xác định nút ba.
Hãy xem cách chúng ta xác định nút Gọi.
Vì vậy, dòng cụ thể này xác định nút Gọi.
Vì vậy, tôi nói, a, vai trò bằng nút.
Vì vậy, điều này, một, thẻ ở đây,
Tôi đang sử dụng nó như một nút ở đây.
Vì vậy, đó là lý do tại sao tôi chỉ định vai trò như một nút.
Điều này rất quan trọng.
Và sau đó nhìn vào các lớp học mà tôi đang áp dụng cho điều này.
Vì vậy, một trong những đầu tiên là btn lớp.
Lớp btn là lớp nút Bootstrap.
Vì vậy, nó sẽ hiển thị rằng như là một nút Bootstrap cổ điển.
Phần thứ hai nói là btn-chính.
Vì vậy, đây là những gì xác định màu sắc của nút ở đây.
Vì vậy, trong trường hợp này màu nút này là màu xanh lam.
Và như vậy, đây là màu chính trong Bootstrap.
Vậy là btn-tiểu học.
Và sau đó, nhìn vào việc sử dụng href ở đây.
Vì vậy, vì đây là một thẻ A, tôi có thể sử dụng một thuộc tính href trong thẻ A.
Vì vậy, thuộc tính href trỏ đến số điện thoại.
Và sau đó bạn nhận thấy rằng tôi đang sử dụng một biểu tượng phông chữ ở đây cho điện thoại.
Đó là lý do tại sao tôi có i lớp fa fa-điện thoại và sau đó sau khi cuộc gọi từ.
Vì vậy, đây là những gì cho phép để xây dựng
nút màu xanh này, được bao gồm trong thanh nút này ở đây.
Tương tự như vậy, tiếp theo, bạn nhận thấy rằng điều này cũng nói nút vai trò.
Và sau đó khi bạn đi qua, bạn sẽ thấy btn-info đó.
BTN-info cung cấp cho nó một màu của một màu xanh nhạt trong màu sắc.
Vì vậy, theo mặc định btn-info đề cập đến một nút màu xanh nhạt ở đây.
Và sau đó, bạn có thể thấy rằng tôi có Skype được xác định ở đây.
Và sau đó cái thứ ba, là một nút màu xanh lá cây ở đó với email.
Chú ý rằng tôi chỉ định chữ cái một role = nút class = btn btn-success.
Vì vậy, khi bạn nói btn-success, đó sẽ là một nút màu xanh lá cây ở đây.
Vì vậy, bạn có một số màu sắc đã được xác định trong Bootstrap.
Tiểu học đề cập đến màu xanh trong cho lần đầu tiên, ánh sáng màu xanh thành công đề cập đến
màu xanh lá cây, sau đó bạn có cảnh báo đó sẽ là một màu vàng nhạt, và
sau đó nguy hiểm, đó là một màu đỏ.
Vì vậy, đây là những màu mặc định được thiết lập trong Bootstrap.
Và sau đó thiết lập href, với mailto đây, và
sau đó sau đó, bạn có.
Phông chữ như biểu tượng ở đây và sau đó là email ở đó.
Vì vậy, ba thẻ e này, mà hiện đang hoạt động như các nút,
được kèm theo bên những div, mà hoạt động như các btn-nhóm.
Vì vậy, đó là cách chúng tôi hiển thị một nhóm các nút trong Bootstrap.
Nếu bạn chỉ muốn nút duy nhất,
tất cả những gì bạn cần làm là bao gồm chỉ một trong những dòng này ở đó.
Vì vậy, bạn cũng có thể sử dụng thẻ nút.
Nếu bạn sử dụng thẻ nút, sau đó bạn không cần phải chỉ định vai trò,
thay vào đó bạn chỉ cần nói nút gõ.
Bởi vì một nút cũng có thể hoạt động như một nút gửi ở đó.
Vì vậy, sau đó, trong các hình thức chúng ta sẽ xem xét việc sử dụng thẻ nút,
để tạo một nút được bao gồm trong biểu mẫu của chúng tôi.
Tiếp tục với các bài tập, bước tiếp theo của chúng tôi sẽ là để bắt đầu,
phát triển các hình thức mà chúng tôi sẽ bao gồm trong trang contactus.html.
Chúng tôi sẽ làm điều đó từng bước, để trong mỗi bước chúng ta học được một chút về
cách bạn bao gồm một số yếu tố vào hình thức của chúng.
Vì vậy, như là một khởi đầu, khi bạn đi đến trang contactus.html,
ngay tại đó, bạn sẽ thấy tuyên bố này được gọi là, hình thức đi vào đây.
Bây giờ, những gì tôi sẽ làm là thay đổi điều này từ col-sm
sang col-md, để
cho kích thước màn hình nhỏ đến nhỏ, hình thức của tôi sẽ được đặt ra
chiếm toàn bộ bề rộng của màn hình, bởi vì nó sử dụng col-xs-12.
Nhưng từ màn hình kích thước trung bình trên phường,
nó sẽ chỉ chiếm 9 trong 12 cột.
Vì vậy, chúng ta hãy bắt đầu xây dựng các hình thức.
Vì vậy, những gì tôi sẽ làm là, tôi sẽ thay thế điều này, với đoạn mã đầu tiên của tôi.
Chúng tôi sẽ bao gồm hai trường vào biểu mẫu
của chúng tôi, cho tên và họ của người dùng.
Hãy để tôi thêm vào mã, sau đó chúng ta sẽ xem xét kết quả.
Và sau đó, chúng tôi sẽ quay lại và kiểm tra mật mã.
Vì vậy, thêm vào mã tại thời điểm đó,
như mọi khi đoạn mã này nằm trong hướng dẫn.
Vì vậy, để tôi lưu lại những thay đổi.
Và sau đó chúng tôi sẽ quay lại và nhìn vào biểu mẫu này trông như thế nào trong trình duyệt.
Hãy nhìn vào biểu mẫu, bạn sẽ thấy rằng họ có hai chủ đề trong biểu mẫu ở đây.
Đầu tiên, có một nhãn ở phía bên trái nói Tên và
sau đó bạn có hộp đầu vào ở đây.
Và sau đó là họ, và sau đó là một hộp đầu vào ở đây.
Bây giờ bạn cũng nhận thấy rằng hình thức này được đặt ra, do
đó phần này chiếm phần bán của màn hình, và
phần còn lại bị chiếm bởi phần còn lại của màn hình.
Bạn đang bắt đầu tự hỏi, làm thế nào để làm điều này?
Liệu Bootstrap lưới giúp chúng tôi quyết định về các kích cỡ này.
Đó sẽ là một câu hỏi rất hay để cô tự hỏi mình.
Hãy xem mã và hiểu nó trông như thế nào.
Trước khi chúng tôi làm điều đó, chúng ta hãy nhìn vào cùng một biểu mẫu bố trí,
trong kích thước màn hình nhỏ thêm.
Vì vậy, chuyển sang kích thước màn hình nhỏ thêm.
Vì vậy, chúng tôi sẽ đi đến Galaxy S5.
Bạn nhận thấy, làm thế nào các hình thức được đặt ra trong kích thước màn hình nhỏ thêm.
Vì vậy, bạn sẽ thấy rằng nhãn nằm trên đầu trang, và
sau đó hộp chính nó, hộp đầu vào chính nó là dưới cùng, tương tự cho tên cuối cùng.
Vì vậy, bạn nhận thấy rằng Bootstrap.
Nhân tiện, nó cung cấp các lớp biểu mẫu.
Tự động, làm cho biểu mẫu của bạn đáp ứng, do đó khi nó được đặt
ra trên kích thước màn hình khác nhau, biểu mẫu sẽ được bố trí thích hợp,
do đó nó sẽ không nhận được tất cả đè bẹp lên trên kích thước màn hình nhỏ.
Nhưng đối với kích thước màn hình lớn hơn, bởi vì bạn có bất động sản lớn hơn,
bạn có thể kéo dài hình thức, để tận dụng không gian bổ sung mà bạn có.
Hãy nhìn vào mã nguồn đó, và biểu mẫu cạnh nhau, rõ ràng là
điều đầu tiên mà bạn nhận thấy, là biểu mẫu của bạn bắt đầu với thẻ biểu mẫu ở đây.
Vì vậy, hình thành và sau đó là hình thức đóng cửa, thẻ ở đây.
Vì vậy, bên trong đó, bạn đang mô tả các phần khác nhau của hình thức của bạn.
Vì vậy, chúng ta hãy xem làm thế nào tên đầu tiên được xây dựng,
tên cuối cùng rõ ràng như nó trông giống như nên được sử dụng một cách tiếp cận tương tự.
Vì vậy, trong mặc định, những gì bạn nhận thấy là, có một div ở đây.
Div yếu tố ở đây, với div đóng ở đây.
Vì vậy, phần tử div này có một lớp gọi là form-group.
Và sau đó là một lớp hàng.
Vì vậy, các lớp form-nhóm về cơ bản,
nói bất cứ điều gì là bên trong div này sẽ được coi là một nhóm các yếu tố.
Và sau đó chúng sẽ được đặt ra cho phù hợp.
Và phần thứ hai, bạn thấy việc sử dụng hàng ở đây.
Vì vậy, bạn sẽ thấy rằng hàng của nhóm Bootstrap đi vào chơi ở đây.
Và vì vậy nhóm hình thức đặc biệt này, có thể được đặt
ra bằng cách sử dụng hàng và các lớp cột mà bạn có từ lưới Bootstrap.
Vì vậy, bây giờ, nếu bạn áp dụng hàng để div này,
bất cứ điều gì bên trong đó, bạn có thể sử dụng các lớp cột,
để quyết định chính xác bao nhiêu không gian mỗi người trong số họ sẽ chiếm trên màn hình.
Bây giờ, điều đó làm cho nó rõ ràng hơn, vì vậy những nhóm hình thức bao quanh.
Đơn vị này.
Chúng ta sẽ thấy lặp lại này nhiều
lần khi chúng ta đang thiết kế các yếu tố khác nhau của biểu mẫu.
Sau đó, bên dưới đó, bạn thấy thẻ nhãn này ở đây.
Đối với thẻ nhãn, có một số thuộc tính đã được gán cho nó.
Vì vậy, bạn thấy rằng thẻ nhãn sử dụng một cho tên đầu tiên.
Vì vậy, nhãn này là cho một cái gì đó với tên gọi id.
Vì vậy, đó là hộp đầu vào mà sau ngay bên dưới đó.
Chúng ta sẽ xem xét điều đó trong một thời gian ngắn.
Và sau đó nhìn vào các lớp được áp dụng cho lớp nhãn, col-md-2.
Vì vậy, có nghĩa là đối với màn hình trung bình đến siêu lớn,
yếu tố đặc biệt này sẽ chiếm 2 cột của không gian.
Và sau đó lưu ý cái kia.
Nó nói, col-form-label.
Vì vậy, col-form-label về cơ bản xác định
rằng nhãn này nên được định vị để được căn chỉnh với
các yếu tố khác mà tạo thành một phần của nhóm hình thức này.
Vì vậy, trong trường hợp này, hộp đầu vào.
Và vì vậy điều này cũng có
nghĩa là nhãn được xếp hàng ở giữa,
theo chiều ngang với hộp đầu vào.
Vì vậy, đó là lý do tại sao chúng tôi sử dụng lớp col-form-label.
Nếu bạn không áp dụng điều này, sau đó nhãn của bạn sẽ được
căn chỉnh vào đầu hộp nhập liệu của bạn.
Hình thức của bạn sẽ không trông tuyệt vời trên kích thước màn hình trung bình đến cực lớn.
Bây giờ, ở phía bên trái, tất nhiên, bởi vì cửa sổ trình duyệt này bị đè bẹp, vì
vậy nó đang hiển thị chế độ xem trong một kích thước màn hình nhỏ hoặc nhỏ hơn ở đây.
Vì vậy, đó là lý do tại sao bạn thấy nhãn xếp chồng lên trên đầu trang của hộp đầu vào ở đây.
Vì vậy, đây là nhãn mà chỉ định.
Vì vậy, nếu bạn có một nhãn mà bạn muốn gán cho một phần tử, vì vậy
đó là cách bạn sẽ gán nhãn.
Xuống dưới đây, bạn thấy một lớp div col-md-10.
Vì vậy, điều này chiếm 10 còn lại trong số 12 cột.
Vì vậy, hai cột được chiếm bởi nhãn.
Và mười cột còn lại chiếm đóng bởi điều này, nhưng được kèm theo bên trong div.
Và bên trong div này,
bạn thấy rằng có một yếu tố thẻ đầu vào có với các loại văn bản.
Vì vậy, có nghĩa là hộp đầu vào này chấp nhận đầu vào văn bản.
Và lớp học, hãy nhìn vào lớp học ở đây.
Nó nói là kiểm soát hình thức.
Điều này rất quan trọng để áp dụng cho hộp nhập liệu ở đây.
Vì vậy, form-control, và id firstname.
Và tên đó là tên của họ.
Sau đó giữ chỗ Tên.
Vì vậy, chỗ dành sẵn là những gì xuất hiện bên trong hộp dưới dạng chỗ dành sẵn cho
hộp nhập.
Vì vậy, tất cả các thuộc tính này được gán.
Vì vậy, quan trọng hơn,
lưu ý việc sử dụng các form-control class được áp dụng cho loại đầu vào.
Vì vậy, đây là cách bạn cấu trúc hai yếu tố này trong hình thức của bạn.
Đối với kích thước màn hình nhỏ và dưới đây, nó ngăn xếp hai thứ.
Nhưng đối với trung bình đến cực lớn,
bạn thấy rằng nó đang định vị chúng theo chiều ngang cạnh nhau.
Điều tương tự cũng áp dụng cho mã cuối cùng.
Nó sẽ rất giống với cách tên đầu tiên được cấu trúc.
Vì vậy, tôi muốn bạn dành một chút thời gian tham gia một cái nhìn tại mã này cũng.
Vì vậy, bạn thấy, dựa trên sự hiểu biết của bạn về điều này,
làm thế nào điều này cũng được định dạng.
Các loại tiếp theo của sự kiện chính thức mà chúng ta sẽ thêm vào là một yếu tố nhóm đầu vào.
Hãy để tôi thêm vào mã.
Chúng ta sẽ xem xét hình thức hóa ra là gì.
Và sau đó chúng ta sẽ quay lại và kiểm tra mật mã.
Vì vậy, ngay tại đây, sau khi div thứ hai, sau trường cuối cùng,
tôi sẽ bao gồm các mã cho các yếu tố tiếp theo ở đây.
Và sau đó chúng ta hãy lưu các thay đổi.
Và sau đó, ngay lập tức,
bạn sẽ thấy một vài thứ được thêm vào biểu mẫu của bạn.
Bạn thấy trường số điện thoại được thêm vào đây.
Điều này, từ cái nhìn của nó, bạn thấy rằng điều này rất giống với điều đó.
Vì vậy, tôi sẽ không giải thích mã cho điều này.
Điều này nên rất đơn giản để bạn hiểu.
Và sau đó trường email này cũng nên rất đơn giản
để bạn hiểu.
Bởi vì điều này trông rất giống với họ.
Ngoại trừ việc này, trường đầu vào, loại sẽ được đặt thành email.
Vì vậy, khả năng kiểm tra biểu mẫu được xây dựng trong
trình duyệt của bạn sẽ tự động khởi động.
Vì vậy, khi bạn gõ vào một cái gì đó không giống như một email,
sau đó nó sẽ phàn nàn một cách thích hợp.
Vì vậy, chúng ta hãy xem xét phần đặc biệt này của hình thức ở đây.
Lưu ý rằng trong trường hợp này, chúng ta đang thêm vào dấu ngoặc bên trái và
dấu ngoặc phải vào hộp đầu vào cụ thể này.
Vậy làm thế nào để bạn thêm những thứ vào hộp của mình như thế này?
Hãy nhìn vào mã ở đây trong trình soạn thảo của
bạn, bạn thấy rằng bạn vẫn có hàng nhóm biểu mẫu mà bạn đã hiểu.
Và xuống dưới đây, bạn có đầu vào loại hình thức yếu tố id telnum,
và như vậy, mà cũng nên được rất rõ ràng cho bạn.
Vì vậy, tôi không nghĩ tôi cần phải giải thích phần đó cho các bạn.
Chú ý làm thế nào tôi đang sử dụng các lớp cột lưới của Bootstrap cho mỗi trong số này.
Vì vậy, nhãn được cho col-md-2.
Và sau đó số điện thoại một được cho
col-xs-7 col-sm-6 và col-md-7 ở đây.
Vì vậy, theo cách đó, số điện thoại, phần tử này được đặt đúng vị trí.
Nhưng, đặc biệt, chúng ta hãy chú ý đến phần này.
Vì vậy, một trong những ở đây là bên trong của div này.
Vì vậy, bên trong div này, chú ý các lớp được trao cho nó.
Lớp học nói input-group.
Vì vậy, về cơ bản có nghĩa là bất cứ điều gì là bên trong div này sẽ được coi là
một nhóm các yếu tố ở đây.
Vì vậy, đó là lý do tại sao các lớp được đưa ra là input-group.
Bây giờ, để thêm vào một cái gì đó như thế này, bạn sẽ sử dụng
một lớp được gọi là input-group-addon.
Và sau đó nhận thấy rằng tôi đang sử dụng một div để giữ mục đó.
Tôi có thể sử dụng bất cứ điều gì ở đây, nhưng một div có ích ở đây.
Vì vậy, tôi nói div class đầu vào-nhóm-addon.
Và sau đó các loại div đóng bên trong, ở đâu,
nhận thấy rằng tôi có dấu ngoặc bên trái.
Vì vậy, đây là những gì cho phép bạn thêm vào một số
phụ thêm vào hộp đầu vào của bạn ở đây.
Tương tự như vậy, cái bên dưới đây cũng là một dấu ngoặc đơn nhập nhóm-addon bên phải.
Vì vậy, đó là những gì thêm dấu ngoặc phải khác ở đây.
Bây giờ, giữa hai, tất nhiên, bạn có kiểu đầu vào.
Các đầu vào với các loại tel và class form-control, id, tên,
giữ chỗ, tất cả mọi thứ tại chỗ ở đây.
Vì vậy, đây là không có gì ngoài phần mã vùng.
Vì vậy, nếu bạn sử dụng nhóm đầu vào này cùng với đầu vào-nhóm addons
như thế này ở hai bên.
Những điều đó sẽ được thêm vào yếu tố đầu vào của bạn như thế này.
Điều đó cung cấp cho bạn một cách tốt đẹp để thiết kế biểu mẫu của bạn với một số thêm vào.
Ví dụ, nếu bạn có một trường chấp nhận
tiền làm đầu vào, bạn có thể chỉ cần thêm một dấu đô la vào phía bên tay trái
để chỉ cho người dùng rằng đó là một trường có giá trị tiền tệ tại thời điểm này.
Ngay bây giờ trong trường hợp này, trường này có trong một mã vùng.
Và nếu bạn thấy cách mã vùng được viết ở Hoa Kỳ và
Canada, bạn biết rằng chúng được đặt trong dấu ngoặc bên trái và bên phải.
Vì vậy, đó là những gì cho phép tôi chỉ định một cái gì đó như thế trong hình thức của tôi ở đó.
Tập hợp tiếp theo của tôi các yếu tố mà tôi sẽ thêm vào
biểu mẫu của tôi là một hộp kiểm và chọn.
Vậy, làm thế nào để chúng ta thêm điều đó?
Vì vậy, nếu bạn đã quen thuộc với các biểu mẫu HTML, bạn hiểu cách chọn hoạt động và
bạn hiểu cách các hộp kiểm hoạt động trong các biểu mẫu HTML.
Bây giờ, Bootstrap cung cấp cho bạn một số
lớp bổ sung cho phép bạn định dạng các yếu tố này một cách thích hợp.
Vì vậy, hãy để tôi thêm vào trích dẫn.
Hãy lưu các thay đổi.
Hãy xem những gì kết quả này trong biểu mẫu ở đây.
Và sau đó có một cái nhìn vào mã.
Vì vậy, ở đây, bạn thấy rằng tôi có một hộp kiểm và một số tin nhắn ở đây.
Và sau đó đây là một bộ chọn cho phép tôi lựa chọn trong số một tập hợp các lựa chọn ở đây.
Bây giờ các hình thức như nó tồn tại ở đây là những gì bạn sẽ thấy trong
kích thước màn hình nhỏ và thêm nhỏ.
Chúng ta hãy nhìn vào nó trên một kích thước màn hình lớn hơn.
Hình thức tương tự khi đặt ra trên
kích thước màn hình trung bình đến cực lớn sẽ trông như thế này.
Vì vậy, bạn có thể thấy số điện thoại liên lạc được định vị như thế nào ở đây,
và email được định vị ở đây.
Vì vậy, lưu ý rằng các nhãn này được
xếp thành một dòng ở giữa với các hộp ở đây.
Đó là những gì lớp nhãn dạng col đạt được đầu tiên.
Bây giờ, hãy tập trung vào điều này mà chúng ta vừa thêm vào.
Ở đây, chúng ta thấy rằng chúng ta có một hộp kiểm được thêm vào.
Và sau đó, một trường văn bản ở đây.
Vậy chúng tôi có thể liên lạc với anh không?
Vì vậy, ví dụ, bạn sẽ mong đợi người dùng để kiểm tra nó trên và tắt.
Vì vậy, lý do cho một hộp kiểm là gì?
Tương tự như vậy, bạn có thể có các nút radio.
Bootstrap hỗ trợ các nút radio có sẵn trong các hình thức HTML.
Và cung cấp một số lớp học để tạo kiểu cho chúng đúng cách.
Và sau đó điều này tất nhiên là bộ chọn cho phép bạn lựa chọn trong số các lựa chọn.
Vì vậy, quay trở lại và nhìn vào mã.
Hãy xem làm thế nào điều này được thực hiện.
Quay trở lại để có một cái nhìn vào mã, bạn thấy rằng điều này một lần nữa là một
nhóm hình thức div ở đây bao gồm hai điều ở đây.
Một là một mẫu kiểm tra
col-md-6 offset-md-2.
Vì vậy, đây là những gì bao quanh một hộp kiểm bên trong phần tử div này.
Và sau đó xuống dưới đây tôi có một lớp div, Col-MD-3 offset-md-1.
Vì vậy, lưu ý rằng ở đây, điều này nói hình thức kiểm tra col-md-6 offset-md-2.
Lý do tại sao tôi đang làm một offset-md-2 là tôi không có một nhãn.
Vì vậy, tôi thường sử dụng hai cột cho các nhãn.
Vì vậy, kể từ khi hộp kiểm này nên căn chỉnh chính nó ở phía bên phải trong biểu mẫu.
Vì vậy, đó là lý do tại sao tôi sử dụng offset-md-2 ở đây.
Và sau đó bên trong nó nói nhãn class="form-checklabel”.
Và sau đó nó cung cấp thẻ đầu vào
ở đây với hộp kiểm loại.
Vì vậy, đó là cách bạn tạo một hộp kiểm.
Và sau đó lớp học, lớp Bootstrap mà bạn sẽ áp dụng cho
hộp kiểm của bạn là form-check input.
Và sau đó tên và giá trị ban đầu trống.
Và sau đó, cái này là nhãn thực tế mà bạn thấy được
áp dụng cho hộp kiểm cụ thể đó ở đó.
Vì vậy, hãy chú ý làm thế nào hai này được bao bọc bên trong một thẻ nhãn ở đây.
Vì vậy, đây là cách bạn tạo một hộp kiểm cùng với nhãn của nó và
sau đó đặt nó trong biểu mẫu của bạn ở đây.
Vì vậy, điều này ở đây sử dụng hình thức kiểm tra nhãn.
Và sau đó ở đây, bạn phải có một hộp kiểm, loại đầu vào = “hộp kiểm”, và
sau đó dán nhãn chính nó.
Vì vậy, ở đây bạn thấy mạnh mẽ, chúng tôi có thể liên lạc với bạn?
Vì vậy, đó là lý do tại sao nó được hiển thị bằng chữ đậm ngay bên cạnh hộp kiểm ở đây.
Bây giờ dưới đây trong mã, bạn có một lớp div col-md-3 offset-md-1.
Vì vậy, điều này chiếm ba cột trong một cột bù đắp.
Vì vậy, tổng cộng bốn cột ở đây.
Vì vậy, cái này là col-md-6 cộng với 2, vì vậy đó là tám cột.
Vì vậy, 8 cộng với 4, 12.
Vì vậy, điều đó sẽ chăm sóc 12 cột của bạn cho lưới của bạn ở đó.
Bây giờ bên trong này, bạn thấy một lựa chọn áp dụng ở đây.
Bây giờ đây là tùy chọn chọn mà các hình thức tệp HTML hỗ trợ.
Và nhìn vào lớp học được áp dụng cho điều này.
Nó nói class="form-control” để chọn.
Và sau đó bạn cung cấp cho các tùy chọn trong chọn ở đây.
Vì vậy, Tel., Email và như vậy.
Vì vậy, đây là cách bạn chỉ định các tùy chọn cho trường chọn của bạn trong biểu mẫu của bạn ở đây.
Vì vậy, đây là việc sử dụng chọn và hộp kiểm trong biểu mẫu của bạn.
Tương tự, nếu bạn kiểm tra tài liệu của Bootstrap, bạn sẽ thấy việc sử dụng các
nút radio và các yếu tố biểu mẫu khác.
Hãy nhìn vào hình thức của chúng
ta, bây giờ chúng ta thấy rằng chúng ta có rất nhiều thứ chúng ta cần trong hình thức của chúng ta đã.
Bạn có tên và họ.
Vì vậy, hình thức này là một cái gì đó mà chúng tôi xây dựng để cho phép người dùng
gửi phản hồi cho nhà hàng.
Vì vậy, ở đây chúng tôi có
tên, họ và số điện thoại liên lạc và sau đó là một email.
Và sau đó tất nhiên,
một tùy chọn để cho phép người dùng xem liệu họ có thể được liên lạc hay không.
Vì vậy, đó được thực hiện bằng cách sử dụng một hộp kiểm và một bộ chọn ở đây.
Bây giờ, điều duy nhất còn lại là một nút gửi cho chúng tôi.
Vì vậy, chúng tôi sẽ thêm vào một nút gửi vào biểu mẫu này và
sau đó có một cái nhìn cuối cùng tại biểu mẫu.
Trước khi chúng tôi thêm một nút gửi, có thể chúng tôi muốn cung cấp một hộp cho
người dùng để gõ phản hồi của họ.
Vì vậy, trong trường hợp này, tôi sẽ sử dụng một khu vực văn bản để cung cấp điều đó.
Vì vậy, để tôi dán vào mã.
Và sau đó chúng tôi sẽ xem xét mã ở đây.
Vì vậy, mã này, như bạn thấy nói,
div class="form-group row” mà bạn đã biết nó có nghĩa là gì.
Và sau đó đây là nhãn mà bạn đã biết nó được xây dựng như thế nào.
Và bên dưới nó, bạn thấy một thẻ textarea đang được sử dụng cho biểu mẫu.
Vì vậy, nó nói, lớp textarea, với class="form-control”,
mà bạn đã thấy trước đây.
Và sau đó id, tên và sau đó là số hàng cho
khu vực văn bản được chỉ định ở đây.
Vì vậy, chúng ta hãy lưu các thay đổi và xem biểu mẫu.
Vì vậy, hãy nhìn vào biểu mẫu, bạn thấy rằng cùng với điều này, ngay bên dưới đây, bạn
có một hộp văn bản lớn vào đó ý kiến phản hồi có thể được gõ bởi người dùng.
Vì vậy, biểu mẫu của bạn có tên, họ, số điện thoại
, email và phê duyệt để liên hệ với người dùng, sau đó là một hộp phản hồi.
Điều cuối cùng sẽ là nút Gửi.
Cuối cùng, chúng ta hãy thêm vào một nút Gửi vào biểu mẫu.
Vì vậy, sau một div, trên khu vực văn bản,
tôi sẽ dán vào mã cho nút Gửi ở đây.
Vì vậy, dán vào mã cho nút Submit một lần nữa, nhìn vào mã, bạn thấy
rằng đây là một div class ="form-group row">, mà bạn đã biết từ trước.
Và sau đó điều này nói, div class="offset-md-2 col-md-10">.
Bạn hiểu đó là gì và
sau đó, bên trong div này, bạn thấy một nút được kèm theo ở đây.
Bây giờ kể từ khi chúng ta đã thấy việc xây dựng một nút bằng cách sử dụng một thẻ, chúng
ta hãy chú ý đến cách bạn xây dựng một nút bằng cách sử dụng thẻ HTML nút.
Vì vậy, nếu bạn đang sử dụng thẻ HTML nút, sau đó bạn nói nút và
sau đó loại được gửi.
Điều này sẽ hoạt động như một nút Gửi cho biểu mẫu của tôi, vì vậy
đó là lý do tại sao tôi nói loại được gửi.
Bạn thiết lập các loại nút, nó sẽ hoạt động như một nút bình thường ở đây.
Và sau đó để điều này tôi nói, nút lớp, nút chính.
Vì vậy, đây là một nút màu xanh và sau đó nút
chứa văn bản này bên trong nút để gửi các văn bản phản hồi bên trong nút.
Vì vậy, hãy lưu các thay đổi.
Vì vậy, đây sẽ là sửa đổi cuối cùng cho hình thức của tôi ở đây.
Vì vậy, chúng ta hãy lưu các thay đổi và sau đó đi và có một cái nhìn vào nút.
Quay trở lại trình duyệt, bây giờ bạn thấy rằng trong biểu mẫu của bạn ngay bên dưới,
bạn có nút Gửi phản hồi.
Vì vậy, khi người dùng điền vào biểu mẫu,
họ sẽ nhấp vào nút Gửi phản hồi để gửi phản hồi cho công ty.
Vì vậy, điều này hoàn thành việc thiết kế của một hình thức.
Vì vậy, đây là một trong những hình thức mà bạn có thể bao gồm.
Có rất nhiều lớp khác có sẵn trong Bootstrap để
hỗ trợ các hình thức.
Tôi mạnh mẽ thúc giục bạn tham khảo các tài liệu biểu mẫu để xem
các loại khác của lớp có sẵn để xây dựng mặc định.
Vì vậy, nếu bạn có khái niệm trong tâm trí của bạn một hình thức mà bạn muốn xây dựng,
sau đó bạn chỉ cần tìm kiếm tất cả các yếu tố có thể khác nhau mà bạn muốn bao gồm
trong các hình thức, và sau đó thiết kế các hình thức cho phù hợp.
Điều quan trọng hơn mà bạn đã nhận thấy trong việc xây dựng các hình thức sử dụng Bootstrap,
là tất cả các lớp Bootstrap có sẵn.
Điều khiển biểu mẫu, nhóm biểu mẫu, cách bạn sử dụng các lớp hàng và cột.
Và tất cả các lớp khác nhau được hỗ trợ
trong Bootstrap để thiết kế các hình thức, bộ phim Bootstrap.
Thiết lập cuối cùng, làm git commit, vì vậy, chúng tôi sẽ đưa lên trang git.
Tôi sẽ bình luận những thay đổi mà tôi đã thực hiện để về,
contactus và index.
Và sau đó nói nút Bootstrap và các
hình thức, và sau đó đó sẽ có
cam kết với kho lưu trữ git của tôi.
Với điều này, chúng tôi hoàn thành bài tập này.
Ở đây chúng tôi đã học được cách chúng tôi bao gồm các nút và
các yếu tố hình thức vào sân thiết kế Bootstrap của chúng tôi.
[ NHẠC]