1 00:00:00,000 --> 00:00:04,797 [MUSIC] 2 00:00:04,797 --> 00:00:11,490 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. 3 00:00:11,490 --> 00:00:17,293 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. 4 00:00:17,293 --> 00:00:24,190 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. 5 00:00:25,780 --> 00:00:31,080 Để bắt đầu, hãy truy cập trang hướng dẫn và 6 00:00:31,080 --> 00:00:36,900 tải xuống tệp contactus.html.zip mà chúng tôi đã cung cấp ở đó. 7 00:00:36,900 --> 00:00:39,798 Vì vậy, nhấp chuột phải vào đó, và 8 00:00:39,798 --> 00:00:44,969 sau đó lưu liên kết này vào thư mục Confect của bạn. 9 00:00:48,512 --> 00:00:49,568 Như, 10 00:00:54,264 --> 00:01:01,598 contactus.html.zip tập tin. 11 00:01:01,598 --> 00:01:08,580 Và sau đó một khi tệp zip được tải xuống, giải nén tệp để lấy trang contactus.html. 12 00:01:09,740 --> 00:01:11,580 Sau đó, bạn có thể xóa tệp zip. 13 00:01:13,440 --> 00:01:18,764 Một khi bạn đã giải nén các tập tin và nhận được trang contactus.html, 14 00:01:18,764 --> 00:01:23,084 bạn sẽ nhận thấy rằng khi bạn tải trang này trong 15 00:01:23,084 --> 00:01:28,107 trình duyệt của bạn bằng cách sử dụng localhost:3000/ contactus.html, 16 00:01:28,107 --> 00:01:34,748 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. 17 00:01:34,748 --> 00:01:38,550 Vì vậy, bạn có thể nhận thấy rằng bạn đã có thanh điều hướng ở đó. 18 00:01:38,550 --> 00:01:42,846 Chúng tôi có jumbotron đã được định dạng cho chúng tôi. 19 00:01:42,846 --> 00:01:48,061 Và bạn sẽ nhận thấy rằng tôi có breadcrumbs và 20 00:01:48,061 --> 00:01:52,190 liên hệ với chúng tôi hướng đến đây định dạng. 21 00:01:52,190 --> 00:01:57,730 Sau đó, bạn sẽ thấy một số thông tin bổ sung, địa chỉ ở đây. 22 00:01:57,730 --> 00:02:04,180 Và cũng có thể, bạn sẽ nhận thấy rằng chân trang đã được hình thành. 23 00:02:04,180 --> 00:02:06,580 Nhưng bạn sẽ nhận thấy hai điều ở đây, 24 00:02:06,580 --> 00:02:11,820 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à 25 00:02:11,820 --> 00:02:15,678 sau đó một dòng nữa ở đây nói hình thức đi ở đây. 26 00:02:15,678 --> 00:02:20,280 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. 27 00:02:20,280 --> 00:02:25,380 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. 28 00:02:25,380 --> 00:02:31,015 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, 29 00:02:31,015 --> 00:02:34,585 nó là một ý tưởng tốt cho chúng tôi để liên kết chúng với nhau, 30 00:02:34,585 --> 00:02:39,525 cả trong thanh điều hướng và trong các liên kết ở chân trang. 31 00:02:39,525 --> 00:02:45,165 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. 32 00:02:45,165 --> 00:02:52,008 Vì vậy, đi đến trang contactus.html, bạn sẽ nhận thấy rằng trong thanh điều hướng, 33 00:02:52,008 --> 00:02:56,816 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. 34 00:02:58,908 --> 00:03:03,568 Và bạn sẽ nhận thấy rằng ở phía dưới 35 00:03:03,568 --> 00:03:08,450 đây bạn có liên kết liên lạc ở đây. 36 00:03:08,450 --> 00:03:15,550 Nhưng liên kết tương ứng với about chưa được cấu hình đúng. 37 00:03:15,550 --> 00:03:19,905 Vì vậy, đi đến liên kết này ở đây và sau đó cập nhật mà 38 00:03:19,905 --> 00:03:24,430 aboutus.html. 39 00:03:24,430 --> 00:03:27,788 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. 40 00:03:27,788 --> 00:03:31,050 Và sau đó lưu các thay đổi. 41 00:03:31,050 --> 00:03:35,070 Bây giờ tương tự, đi đến chân trang của trang này. 42 00:03:35,070 --> 00:03:40,975 Và bạn sẽ nhận thấy rằng ở chân trang chúng tôi có ba liên kết ở đây. 43 00:03:40,975 --> 00:03:45,215 Và đây có thể là một điểm tốt để thay thế các liên kết 44 00:03:45,215 --> 00:03:48,015 với các liên kết đến các trang tương ứng. 45 00:03:48,015 --> 00:03:54,342 Vì vậy, tôi sẽ nói, index.html, aboutus.html, 46 00:03:54,342 --> 00:03:59,665 và, contactus.html. 47 00:03:59,665 --> 00:04:01,325 Và lưu lại những thay đổi. 48 00:04:01,325 --> 00:04:08,117 Tương tự như vậy, đi đến index.html, và sau đó trong index.html cũng, 49 00:04:08,117 --> 00:04:12,280 liên kết liên hệ với chúng tôi đã không được thiết lập. 50 00:04:12,280 --> 00:04:18,640 Vì vậy, chúng ta hãy cập nhật điều đó để contactus.html. 51 00:04:18,640 --> 00:04:21,900 Và sau đó tương tự, cập nhật các liên kết trong chân trang. 52 00:04:23,050 --> 00:04:27,258 Cũng đi đến aboutus.html và sau đó sửa chữa các liên kết ngay cả ở đó. 53 00:04:27,258 --> 00:04:32,540 Vì vậy, trong aboutus.html cũng, trong tiêu đề tôi sẽ sửa chữa các liên kết. 54 00:04:37,461 --> 00:04:41,690 Và cũng ở chân trang của aboutus.html. 55 00:04:41,690 --> 00:04:44,050 Vì vậy, bây giờ khi bạn truy cập trang web của 56 00:04:44,050 --> 00:04:49,290 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. 57 00:04:49,290 --> 00:04:52,950 Và từ trang giới thiệu, bạn thậm chí có thể quay lại trang liên hệ. 58 00:04:52,950 --> 00:04:57,780 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à 59 00:04:57,780 --> 00:05:01,480 cũng là chân trang, ở đây nên được thiết lập. 60 00:05:01,480 --> 00:05:06,500 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. 61 00:05:08,190 --> 00:05:12,660 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ẽ 62 00:05:12,660 --> 00:05:17,040 bao gồm trong trang contactus.html của chúng tôi. 63 00:05:17,040 --> 00:05:23,060 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 64 00:05:23,060 --> 00:05:25,580 nút và nhóm nút và 65 00:05:25,580 --> 00:05:30,465 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. 66 00:05:30,465 --> 00:05:34,650 Mở contactus.html trong trình soạn thảo của chúng 67 00:05:34,650 --> 00:05:40,402 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. 68 00:05:40,402 --> 00:05:44,230 Và sau đó tôi sẽ thay thế bằng mã tương ứng với 69 00:05:44,230 --> 00:05:46,920 nhóm nút đó trước tiên. 70 00:05:46,920 --> 00:05:51,600 Và sau đó tôi sẽ trở lại để giải thích làm thế nào mã này hoạt động. 71 00:05:51,600 --> 00:05:56,570 Vì vậy, chúng ta hãy lưu các thay đổi, và sau đó xem 72 00:05:56,570 --> 00:06:00,920 nhóm nút này trông như thế nào trong trình duyệt của chúng tôi. 73 00:06:02,550 --> 00:06:07,224 Đi đến trình duyệt của bạn, bây giờ bạn có thể thấy rằng trong 74 00:06:07,224 --> 00:06:12,310 trang web của chúng tôi nhóm nút đã được tạo ra. 75 00:06:12,310 --> 00:06:15,040 Vì vậy, bạn có thể thấy rằng có ba nút ở đây, 76 00:06:15,040 --> 00:06:17,540 nút gọi, Skype và Email. 77 00:06:17,540 --> 00:06:21,990 Bây giờ, tất cả ba được nối với nhau thành một thanh đơn hoặc 78 00:06:21,990 --> 00:06:26,800 thanh nút hoặc những gì là trong thuật ngữ Bootstrap gọi là một nhóm nút. 79 00:06:26,800 --> 00:06:31,350 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 80 00:06:31,350 --> 00:06:32,390 mã Bootstrap. 81 00:06:33,530 --> 00:06:41,530 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. 82 00:06:41,530 --> 00:06:44,990 Vì vậy, chúng ta hãy nhìn vào cách chúng ta tạo mã nút này. 83 00:06:44,990 --> 00:06:48,536 Hãy nhìn vào mã, bạn nhận thấy rằng 84 00:06:48,536 --> 00:06:53,745 các nút được bao gồm bên trong một div ở đây. 85 00:06:53,745 --> 00:06:57,060 Đối với div, chúng tôi áp dụng các lớp, btn-group. 86 00:06:57,060 --> 00:07:02,255 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à 87 00:07:02,255 --> 00:07:06,225 trình bày như một nhóm các nút, như một thanh các nút, 88 00:07:06,225 --> 00:07:10,990 sau đó bạn sẽ sử dụng một div với các lớp nhóm nút và 89 00:07:10,990 --> 00:07:14,540 vai trò như nhóm ở đây để div đó. 90 00:07:14,540 --> 00:07:18,332 Bây giờ bên trong đó, bạn sẽ nhận thấy rằng tôi đang sử dụng, a, 91 00:07:18,332 --> 00:07:20,550 tag để xác định ba nút. 92 00:07:20,550 --> 00:07:23,590 Vì vậy, chúng ta hãy nhìn vào cách chúng ta xác định nút ba. 93 00:07:23,590 --> 00:07:26,430 Hãy xem cách chúng ta xác định nút Gọi. 94 00:07:26,430 --> 00:07:30,030 Vì vậy, dòng cụ thể này xác định nút Gọi. 95 00:07:30,030 --> 00:07:33,718 Vì vậy, tôi nói, a, vai trò bằng nút. 96 00:07:33,718 --> 00:07:38,375 Vì vậy, điều này, một, thẻ ở đây, 97 00:07:38,375 --> 00:07:42,565 Tôi đang sử dụng nó như một nút ở đây. 98 00:07:42,565 --> 00:07:44,955 Vì vậy, đó là lý do tại sao tôi chỉ định vai trò như một nút. 99 00:07:44,955 --> 00:07:46,545 Điều này rất quan trọng. 100 00:07:46,545 --> 00:07:49,591 Và sau đó nhìn vào các lớp học mà tôi đang áp dụng cho điều này. 101 00:07:49,591 --> 00:07:54,926 Vì vậy, một trong những đầu tiên là btn lớp. 102 00:07:54,926 --> 00:07:59,880 Lớp btn là lớp nút Bootstrap. 103 00:07:59,880 --> 00:08:03,720 Vì vậy, nó sẽ hiển thị rằng như là một nút Bootstrap cổ điển. 104 00:08:03,720 --> 00:08:07,300 Phần thứ hai nói là btn-chính. 105 00:08:07,300 --> 00:08:10,940 Vì vậy, đây là những gì xác định màu sắc của nút ở đây. 106 00:08:10,940 --> 00:08:15,910 Vì vậy, trong trường hợp này màu nút này là màu xanh lam. 107 00:08:15,910 --> 00:08:18,750 Và như vậy, đây là màu chính trong Bootstrap. 108 00:08:18,750 --> 00:08:20,670 Vậy là btn-tiểu học. 109 00:08:20,670 --> 00:08:25,510 Và sau đó, nhìn vào việc sử dụng href ở đây. 110 00:08:25,510 --> 00:08:30,850 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. 111 00:08:30,850 --> 00:08:33,610 Vì vậy, thuộc tính href trỏ đến số điện thoại. 112 00:08:35,110 --> 00:08:40,940 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. 113 00:08:40,940 --> 00:08:47,560 Đó 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ừ. 114 00:08:47,560 --> 00:08:53,170 Vì vậy, đây là những gì cho phép để xây dựng 115 00:08:53,170 --> 00:08:58,550 nút màu xanh này, được bao gồm trong thanh nút này ở đây. 116 00:08:58,550 --> 00:09:04,150 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ò. 117 00:09:04,150 --> 00:09:07,795 Và sau đó khi bạn đi qua, bạn sẽ thấy btn-info đó. 118 00:09:07,795 --> 00:09:12,235 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. 119 00:09:12,235 --> 00:09:18,665 Vì vậy, theo mặc định btn-info đề cập đến một nút màu xanh nhạt ở đây. 120 00:09:18,665 --> 00:09:22,975 Và sau đó, bạn có thể thấy rằng tôi có Skype được xác định ở đây. 121 00:09:22,975 --> 00:09:28,172 Và sau đó cái thứ ba, là một nút màu xanh lá cây ở đó với email. 122 00:09:28,172 --> 00:09:34,542 Chú ý rằng tôi chỉ định chữ cái một role = nút class = btn btn-success. 123 00:09:34,542 --> 00:09:38,132 Vì vậy, khi bạn nói btn-success, đó sẽ là một nút màu xanh lá cây ở đây. 124 00:09:38,132 --> 00:09:44,102 Vì vậy, bạn có một số màu sắc đã được xác định trong Bootstrap. 125 00:09:44,102 --> 00:09:48,322 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 126 00:09:49,390 --> 00:09:54,250 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à 127 00:09:54,250 --> 00:09:56,150 sau đó nguy hiểm, đó là một màu đỏ. 128 00:09:56,150 --> 00:09:59,763 Vì vậy, đây là những màu mặc định được thiết lập trong Bootstrap. 129 00:10:01,712 --> 00:10:06,602 Và sau đó thiết lập href, với mailto đây, và 130 00:10:06,602 --> 00:10:10,140 sau đó sau đó, bạn có. 131 00:10:11,972 --> 00:10:16,030 Phông chữ như biểu tượng ở đây và sau đó là email ở đó. 132 00:10:16,030 --> 00:10:21,410 Vì vậy, ba thẻ e này, mà hiện đang hoạt động như các nút, 133 00:10:21,410 --> 00:10:26,780 được kèm theo bên những div, mà hoạt động như các btn-nhóm. 134 00:10:26,780 --> 00:10:32,100 Vì vậy, đó là cách chúng tôi hiển thị một nhóm các nút trong Bootstrap. 135 00:10:32,100 --> 00:10:34,470 Nếu bạn chỉ muốn nút duy nhất, 136 00:10:34,470 --> 00:10:37,220 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 ở đó. 137 00:10:38,270 --> 00:10:41,130 Vì vậy, bạn cũng có thể sử dụng thẻ nút. 138 00:10:41,130 --> 00:10:44,270 Nếu bạn sử dụng thẻ nút, sau đó bạn không cần phải chỉ định vai trò, 139 00:10:44,270 --> 00:10:46,730 thay vào đó bạn chỉ cần nói nút gõ. 140 00:10:46,730 --> 00:10:49,700 Bởi vì một nút cũng có thể hoạt động như một nút gửi ở đó. 141 00:10:49,700 --> 00:10:54,140 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, 142 00:10:54,140 --> 00:10:57,040 để tạo một nút được bao gồm trong biểu mẫu của chúng tôi. 143 00:10:58,600 --> 00:11:03,900 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, 144 00:11:03,900 --> 00:11:08,790 phát triển các hình thức mà chúng tôi sẽ bao gồm trong trang contactus.html. 145 00:11:08,790 --> 00:11:13,350 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ề 146 00:11:13,350 --> 00:11:17,610 cách bạn bao gồm một số yếu tố vào hình thức của chúng. 147 00:11:17,610 --> 00:11:24,480 Vì vậy, như là một khởi đầu, khi bạn đi đến trang contactus.html, 148 00:11:24,480 --> 00:11:29,430 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. 149 00:11:29,430 --> 00:11:34,771 Bây giờ, những gì tôi sẽ làm là thay đổi điều này từ col-sm 150 00:11:34,771 --> 00:11:39,480 sang col-md, để 151 00:11:39,480 --> 00:11:44,290 cho kích thước màn hình nhỏ đến nhỏ, hình thức của tôi sẽ được đặt ra 152 00:11:44,290 --> 00:11:49,352 chiếm toàn bộ bề rộng của màn hình, bởi vì nó sử dụng col-xs-12. 153 00:11:49,352 --> 00:11:53,024 Nhưng từ màn hình kích thước trung bình trên phường, 154 00:11:53,024 --> 00:11:57,290 nó sẽ chỉ chiếm 9 trong 12 cột. 155 00:11:57,290 --> 00:11:59,600 Vì vậy, chúng ta hãy bắt đầu xây dựng các hình thức. 156 00:11:59,600 --> 00:12:05,470 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. 157 00:12:06,580 --> 00:12:11,300 Chúng tôi sẽ bao gồm hai trường vào biểu mẫu 158 00:12:11,300 --> 00:12:14,280 của chúng tôi, cho tên và họ của người dùng. 159 00:12:14,280 --> 00:12:17,440 Hãy để tôi thêm vào mã, sau đó chúng ta sẽ xem xét kết quả. 160 00:12:17,440 --> 00:12:19,750 Và sau đó, chúng tôi sẽ quay lại và kiểm tra mật mã. 161 00:12:19,750 --> 00:12:23,190 Vì vậy, thêm vào mã tại thời điểm đó, 162 00:12:23,190 --> 00:12:27,820 như mọi khi đoạn mã này nằm trong hướng dẫn. 163 00:12:27,820 --> 00:12:30,510 Vì vậy, để tôi lưu lại những thay đổi. 164 00:12:30,510 --> 00:12:35,690 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. 165 00:12:35,690 --> 00:12:40,250 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. 166 00:12:42,060 --> 00:12:46,790 Đầu tiên, có một nhãn ở phía bên trái nói Tên và 167 00:12:46,790 --> 00:12:49,780 sau đó bạn có hộp đầu vào ở đây. 168 00:12:49,780 --> 00:12:52,800 Và sau đó là họ, và sau đó là một hộp đầu vào ở đây. 169 00:12:52,800 --> 00:12:56,710 Bây giờ bạn cũng nhận thấy rằng hình thức này được đặt ra, do 170 00:12:56,710 --> 00:13:00,510 đó phần này chiếm phần bán của màn hình, và 171 00:13:00,510 --> 00:13:03,620 phần còn lại bị chiếm bởi phần còn lại của màn hình. 172 00:13:03,620 --> 00:13:08,400 Bạn đang bắt đầu tự hỏi, làm thế nào để làm điều này? 173 00:13:09,720 --> 00:13:15,095 Liệu Bootstrap lưới giúp chúng tôi quyết định về các kích cỡ này. 174 00:13:15,095 --> 00:13:18,725 Đó sẽ là một câu hỏi rất hay để cô tự hỏi mình. 175 00:13:18,725 --> 00:13:21,695 Hãy xem mã và hiểu nó trông như thế nào. 176 00:13:21,695 --> 00:13:26,595 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í, 177 00:13:26,595 --> 00:13:29,595 trong kích thước màn hình nhỏ thêm. 178 00:13:29,595 --> 00:13:32,795 Vì vậy, chuyển sang kích thước màn hình nhỏ thêm. 179 00:13:32,795 --> 00:13:34,425 Vì vậy, chúng tôi sẽ đi đến Galaxy S5. 180 00:13:35,490 --> 00:13:40,060 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. 181 00:13:40,060 --> 00:13:44,304 Vì vậy, bạn sẽ thấy rằng nhãn nằm trên đầu trang, và 182 00:13:44,304 --> 00:13:50,590 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. 183 00:13:50,590 --> 00:13:53,420 Vì vậy, bạn nhận thấy rằng Bootstrap. 184 00:13:53,420 --> 00:13:57,500 Nhân tiện, nó cung cấp các lớp biểu mẫu. 185 00:13:57,500 --> 00:14:02,460 Tự động, làm cho biểu mẫu của bạn đáp ứng, do đó khi nó được đặt 186 00:14:02,460 --> 00:14:07,450 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, 187 00:14:07,450 --> 00:14:12,550 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ỏ. 188 00:14:13,610 --> 00:14:17,220 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, 189 00:14:17,220 --> 00:14:23,480 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ó. 190 00:14:24,830 --> 00:14:31,150 Hãy nhìn vào mã nguồn đó, và biểu mẫu cạnh nhau, rõ ràng là 191 00:14:31,150 --> 00:14:36,140 đ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. 192 00:14:36,140 --> 00:14:40,160 Vì vậy, hình thành và sau đó là hình thức đóng cửa, thẻ ở đây. 193 00:14:40,160 --> 00:14:45,970 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. 194 00:14:45,970 --> 00:14:49,150 Vì vậy, chúng ta hãy xem làm thế nào tên đầu tiên được xây dựng, 195 00:14:49,150 --> 00:14:54,390 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ự. 196 00:14:54,390 --> 00:15:01,240 Vì vậy, trong mặc định, những gì bạn nhận thấy là, có một div ở đây. 197 00:15:01,240 --> 00:15:06,480 Div yếu tố ở đây, với div đóng ở đây. 198 00:15:06,480 --> 00:15:10,515 Vì vậy, phần tử div này có một lớp gọi là form-group. 199 00:15:11,920 --> 00:15:15,108 Và sau đó là một lớp hàng. 200 00:15:15,108 --> 00:15:17,080 Vì vậy, các lớp form-nhóm về cơ bản, 201 00:15:17,080 --> 00:15:22,580 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ố. 202 00:15:22,580 --> 00:15:26,120 Và sau đó chúng sẽ được đặt ra cho phù hợp. 203 00:15:26,120 --> 00:15:30,902 Và phần thứ hai, bạn thấy việc sử dụng hàng ở đây. 204 00:15:30,902 --> 00:15:35,740 Vì vậy, bạn sẽ thấy rằng hàng của nhóm Bootstrap đi vào chơi ở đây. 205 00:15:35,740 --> 00:15:40,610 Và vì vậy nhóm hình thức đặc biệt này, có thể được đặt 206 00:15:40,610 --> 00:15:45,480 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. 207 00:15:45,480 --> 00:15:48,506 Vì vậy, bây giờ, nếu bạn áp dụng hàng để div này, 208 00:15:48,506 --> 00:15:52,956 bất cứ điều gì bên trong đó, bạn có thể sử dụng các lớp cột, 209 00:15:52,956 --> 00:15:58,741 để 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. 210 00:15:58,741 --> 00:16:05,390 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. 211 00:16:05,390 --> 00:16:06,650 Đơn vị này. 212 00:16:06,650 --> 00:16:08,570 Chúng ta sẽ thấy lặp lại này nhiều 213 00:16:08,570 --> 00:16:14,460 lần khi chúng ta đang thiết kế các yếu tố khác nhau của biểu mẫu. 214 00:16:14,460 --> 00:16:20,020 Sau đó, bên dưới đó, bạn thấy thẻ nhãn này ở đây. 215 00:16:20,020 --> 00:16:25,180 Đối với thẻ nhãn, có một số thuộc tính đã được gán cho nó. 216 00:16:25,180 --> 00:16:28,740 Vì vậy, bạn thấy rằng thẻ nhãn sử dụng một cho tên đầu tiên. 217 00:16:28,740 --> 00:16:33,650 Vì vậy, nhãn này là cho một cái gì đó với tên gọi id. 218 00:16:33,650 --> 00:16:37,690 Vì vậy, đó là hộp đầu vào mà sau ngay bên dưới đó. 219 00:16:37,690 --> 00:16:39,790 Chúng ta sẽ xem xét điều đó trong một thời gian ngắn. 220 00:16:39,790 --> 00:16:46,136 Và sau đó nhìn vào các lớp được áp dụng cho lớp nhãn, col-md-2. 221 00:16:46,136 --> 00:16:50,029 Vì vậy, có nghĩa là đối với màn hình trung bình đến siêu lớn, 222 00:16:50,029 --> 00:16:56,040 yếu tố đặc biệt này sẽ chiếm 2 cột của không gian. 223 00:16:56,040 --> 00:16:57,884 Và sau đó lưu ý cái kia. 224 00:16:57,884 --> 00:17:00,764 Nó nói, col-form-label. 225 00:17:00,764 --> 00:17:05,957 Vì vậy, col-form-label về cơ bản xác định 226 00:17:05,957 --> 00:17:11,780 rằng nhãn này nên được định vị để được căn chỉnh với 227 00:17:11,780 --> 00:17:18,270 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. 228 00:17:18,270 --> 00:17:20,576 Vì vậy, trong trường hợp này, hộp đầu vào. 229 00:17:20,576 --> 00:17:24,508 Và vì vậy điều này cũng có 230 00:17:24,508 --> 00:17:29,868 nghĩa là nhãn được xếp hàng ở giữa, 231 00:17:29,868 --> 00:17:35,550 theo chiều ngang với hộp đầu vào. 232 00:17:35,550 --> 00:17:39,535 Vì vậy, đó là lý do tại sao chúng tôi sử dụng lớp col-form-label. 233 00:17:39,535 --> 00:17:43,725 Nếu bạn không áp dụng điều này, sau đó nhãn của bạn sẽ được 234 00:17:43,725 --> 00:17:48,185 căn chỉnh vào đầu hộp nhập liệu của bạn. 235 00:17:48,185 --> 00:17:53,551 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. 236 00:17:53,551 --> 00:17:59,727 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ì 237 00:17:59,727 --> 00:18:05,360 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. 238 00:18:05,360 --> 00:18:11,650 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. 239 00:18:11,650 --> 00:18:14,560 Vì vậy, đây là nhãn mà chỉ định. 240 00:18:14,560 --> 00:18:18,380 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 241 00:18:18,380 --> 00:18:20,890 đó là cách bạn sẽ gán nhãn. 242 00:18:20,890 --> 00:18:25,740 Xuống dưới đây, bạn thấy một lớp div col-md-10. 243 00:18:25,740 --> 00:18:29,120 Vì vậy, điều này chiếm 10 còn lại trong số 12 cột. 244 00:18:29,120 --> 00:18:31,670 Vì vậy, hai cột được chiếm bởi nhãn. 245 00:18:31,670 --> 00:18:36,070 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. 246 00:18:36,070 --> 00:18:38,230 Và bên trong div này, 247 00:18:38,230 --> 00:18:43,493 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. 248 00:18:43,493 --> 00:18:49,734 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. 249 00:18:49,734 --> 00:18:52,170 Và lớp học, hãy nhìn vào lớp học ở đây. 250 00:18:52,170 --> 00:18:54,800 Nó nói là kiểm soát hình thức. 251 00:18:54,800 --> 00:18:57,730 Điều này rất quan trọng để áp dụng cho hộp nhập liệu ở đây. 252 00:18:57,730 --> 00:19:01,301 Vì vậy, form-control, và id firstname. 253 00:19:01,301 --> 00:19:04,550 Và tên đó là tên của họ. 254 00:19:04,550 --> 00:19:07,630 Sau đó giữ chỗ Tên. 255 00:19:07,630 --> 00:19:12,840 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 256 00:19:12,840 --> 00:19:14,610 hộp nhập. 257 00:19:14,610 --> 00:19:17,470 Vì vậy, tất cả các thuộc tính này được gán. 258 00:19:17,470 --> 00:19:18,690 Vì vậy, quan trọng hơn, 259 00:19:18,690 --> 00:19:23,810 lưu ý việc sử dụng các form-control class được áp dụng cho loại đầu vào. 260 00:19:23,810 --> 00:19:29,960 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. 261 00:19:29,960 --> 00:19:35,425 Đối với kích thước màn hình nhỏ và dưới đây, nó ngăn xếp hai thứ. 262 00:19:35,425 --> 00:19:37,118 Nhưng đối với trung bình đến cực lớn, 263 00:19:37,118 --> 00:19:41,500 bạn thấy rằng nó đang định vị chúng theo chiều ngang cạnh nhau. 264 00:19:41,500 --> 00:19:45,645 Điều tương tự cũng áp dụng cho mã cuối cùng. 265 00:19:45,645 --> 00:19:49,670 Nó sẽ rất giống với cách tên đầu tiên được cấu trúc. 266 00:19:49,670 --> 00:19:54,380 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. 267 00:19:54,380 --> 00:19:58,150 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, 268 00:19:58,150 --> 00:20:00,230 làm thế nào điều này cũng được định dạng. 269 00:20:01,550 --> 00:20:08,360 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. 270 00:20:08,360 --> 00:20:09,330 Hãy để tôi thêm vào mã. 271 00:20:09,330 --> 00:20:13,111 Chúng ta sẽ xem xét hình thức hóa ra là gì. 272 00:20:13,111 --> 00:20:15,560 Và sau đó chúng ta sẽ quay lại và kiểm tra mật mã. 273 00:20:15,560 --> 00:20:19,542 Vì vậy, ngay tại đây, sau khi div thứ hai, sau trường cuối cùng, 274 00:20:19,542 --> 00:20:24,840 tôi sẽ bao gồm các mã cho các yếu tố tiếp theo ở đây. 275 00:20:25,880 --> 00:20:28,142 Và sau đó chúng ta hãy lưu các thay đổi. 276 00:20:28,142 --> 00:20:30,466 Và sau đó, ngay lập tức, 277 00:20:30,466 --> 00:20:36,360 bạn sẽ thấy một vài thứ được thêm vào biểu mẫu của bạn. 278 00:20:36,360 --> 00:20:38,975 Bạn thấy trường số điện thoại được thêm vào đây. 279 00:20:38,975 --> 00:20:42,985 Đ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 đó. 280 00:20:42,985 --> 00:20:45,335 Vì vậy, tôi sẽ không giải thích mã cho điều này. 281 00:20:45,335 --> 00:20:48,110 Điều này nên rất đơn giản để bạn hiểu. 282 00:20:48,110 --> 00:20:52,073 Và sau đó trường email này cũng nên rất đơn giản 283 00:20:52,073 --> 00:20:53,747 để bạn hiểu. 284 00:20:53,747 --> 00:20:56,537 Bởi vì điều này trông rất giống với họ. 285 00:20:56,537 --> 00:21:02,477 Ngoại trừ việc này, trường đầu vào, loại sẽ được đặt thành email. 286 00:21:02,477 --> 00:21:06,739 Vì vậy, khả năng kiểm tra biểu mẫu được xây dựng trong 287 00:21:06,739 --> 00:21:10,094 trình duyệt của bạn sẽ tự động khởi động. 288 00:21:10,094 --> 00:21:14,113 Vì vậy, khi bạn gõ vào một cái gì đó không giống như một email, 289 00:21:14,113 --> 00:21:16,860 sau đó nó sẽ phàn nàn một cách thích hợp. 290 00:21:16,860 --> 00:21:21,780 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. 291 00:21:21,780 --> 00:21:27,500 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à 292 00:21:27,500 --> 00:21:31,430 dấu ngoặc phải vào hộp đầu vào cụ thể này. 293 00:21:31,430 --> 00:21:36,570 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? 294 00:21:36,570 --> 00:21:41,330 Hãy nhìn vào mã ở đây trong trình soạn thảo của 295 00:21:41,330 --> 00:21:45,750 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. 296 00:21:45,750 --> 00:21:50,942 Và xuống dưới đây, bạn có đầu vào loại hình thức yếu tố id telnum, 297 00:21:50,942 --> 00:21:54,460 và như vậy, mà cũng nên được rất rõ ràng cho bạn. 298 00:21:54,460 --> 00:21:57,360 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. 299 00:21:57,360 --> 00:22:04,366 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. 300 00:22:04,366 --> 00:22:08,060 Vì vậy, nhãn được cho col-md-2. 301 00:22:08,060 --> 00:22:12,062 Và sau đó số điện thoại một được cho 302 00:22:12,062 --> 00:22:16,880 col-xs-7 col-sm-6 và col-md-7 ở đây. 303 00:22:16,880 --> 00:22:23,100 Vì vậy, theo cách đó, số điện thoại, phần tử này được đặt đúng vị trí. 304 00:22:23,100 --> 00:22:27,310 Nhưng, đặc biệt, chúng ta hãy chú ý đến phần này. 305 00:22:27,310 --> 00:22:31,470 Vì vậy, một trong những ở đây là bên trong của div này. 306 00:22:32,670 --> 00:22:36,250 Vì vậy, bên trong div này, chú ý các lớp được trao cho nó. 307 00:22:36,250 --> 00:22:38,689 Lớp học nói input-group. 308 00:22:38,689 --> 00:22:43,587 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à 309 00:22:43,587 --> 00:22:45,350 một nhóm các yếu tố ở đây. 310 00:22:45,350 --> 00:22:49,030 Vì vậy, đó là lý do tại sao các lớp được đưa ra là input-group. 311 00:22:49,030 --> 00:22:53,600 Bây giờ, để thêm vào một cái gì đó như thế này, bạn sẽ sử dụng 312 00:22:53,600 --> 00:22:59,000 một lớp được gọi là input-group-addon. 313 00:22:59,000 --> 00:23:04,490 Và sau đó nhận thấy rằng tôi đang sử dụng một div để giữ mục đó. 314 00:23:04,490 --> 00:23:08,200 Tôi có thể sử dụng bất cứ điều gì ở đây, nhưng một div có ích ở đây. 315 00:23:08,200 --> 00:23:12,980 Vì vậy, tôi nói div class đầu vào-nhóm-addon. 316 00:23:12,980 --> 00:23:16,250 Và sau đó các loại div đóng bên trong, ở đâu, 317 00:23:16,250 --> 00:23:18,500 nhận thấy rằng tôi có dấu ngoặc bên trái. 318 00:23:18,500 --> 00:23:25,477 Vì vậy, đây là những gì cho phép bạn thêm vào một số 319 00:23:25,477 --> 00:23:30,963 phụ thêm vào hộp đầu vào của bạn ở đây. 320 00:23:30,963 --> 00:23:38,390 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. 321 00:23:38,390 --> 00:23:42,350 Vì vậy, đó là những gì thêm dấu ngoặc phải khác ở đây. 322 00:23:42,350 --> 00:23:46,270 Bây giờ, giữa hai, tất nhiên, bạn có kiểu đầu vào. 323 00:23:46,270 --> 00:23:51,094 Các đầu vào với các loại tel và class form-control, id, tên, 324 00:23:51,094 --> 00:23:54,310 giữ chỗ, tất cả mọi thứ tại chỗ ở đây. 325 00:23:54,310 --> 00:23:57,190 Vì vậy, đây là không có gì ngoài phần mã vùng. 326 00:23:57,190 --> 00:24:02,049 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 327 00:24:02,049 --> 00:24:04,440 như thế này ở hai bên. 328 00:24:04,440 --> 00:24:10,070 Những điều đó sẽ được thêm vào yếu tố đầu vào của bạn như thế này. 329 00:24:10,070 --> 00:24:15,880 Đ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. 330 00:24:15,880 --> 00:24:20,170 Ví dụ, nếu bạn có một trường chấp nhận 331 00:24:22,450 --> 00:24:27,360 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 332 00:24:27,360 --> 00:24:33,050 để 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. 333 00:24:33,050 --> 00:24:37,558 Ngay bây giờ trong trường hợp này, trường này có trong một mã vùng. 334 00:24:37,558 --> 00:24:43,330 Và nếu bạn thấy cách mã vùng được viết ở Hoa Kỳ và 335 00:24:43,330 --> 00:24:47,640 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. 336 00:24:47,640 --> 00:24:52,680 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 ở đó. 337 00:24:53,900 --> 00:24:56,460 Tập hợp tiếp theo của tôi các yếu tố mà tôi sẽ thêm vào 338 00:24:56,460 --> 00:25:01,530 biểu mẫu của tôi là một hộp kiểm và chọn. 339 00:25:01,530 --> 00:25:03,460 Vậy, làm thế nào để chúng ta thêm điều đó? 340 00:25:03,460 --> 00:25:09,014 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à 341 00:25:09,014 --> 00:25:13,070 bạn hiểu cách các hộp kiểm hoạt động trong các biểu mẫu HTML. 342 00:25:13,070 --> 00:25:15,880 Bây giờ, Bootstrap cung cấp cho bạn một số 343 00:25:15,880 --> 00:25:20,080 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. 344 00:25:20,080 --> 00:25:21,740 Vì vậy, hãy để tôi thêm vào trích dẫn. 345 00:25:23,400 --> 00:25:25,120 Hãy lưu các thay đổi. 346 00:25:25,120 --> 00:25:29,695 Hãy xem những gì kết quả này trong biểu mẫu ở đây. 347 00:25:29,695 --> 00:25:32,480 Và sau đó có một cái nhìn vào mã. 348 00:25:32,480 --> 00:25:38,060 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. 349 00:25:38,060 --> 00:25:45,372 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. 350 00:25:47,324 --> 00:25:53,309 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 351 00:25:53,309 --> 00:25:56,080 kích thước màn hình nhỏ và thêm nhỏ. 352 00:25:56,080 --> 00:25:59,940 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. 353 00:25:59,940 --> 00:26:04,740 Hình thức tương tự khi đặt ra trên 354 00:26:04,740 --> 00:26:06,760 kích thước màn hình trung bình đến cực lớn sẽ trông như thế này. 355 00:26:06,760 --> 00:26:11,440 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, 356 00:26:11,440 --> 00:26:14,500 và email được định vị ở đây. 357 00:26:14,500 --> 00:26:19,825 Vì vậy, lưu ý rằng các nhãn này được 358 00:26:19,825 --> 00:26:26,510 xếp thành một dòng ở giữa với các hộp ở đây. 359 00:26:26,510 --> 00:26:32,640 Đó là những gì lớp nhãn dạng col đạt được đầu tiên. 360 00:26:32,640 --> 00:26:36,940 Bây giờ, hãy tập trung vào điều này mà chúng ta vừa thêm vào. 361 00:26:36,940 --> 00:26:40,060 Ở đây, chúng ta thấy rằng chúng ta có một hộp kiểm được thêm vào. 362 00:26:40,060 --> 00:26:43,312 Và sau đó, một trường văn bản ở đây. 363 00:26:43,312 --> 00:26:44,650 Vậy chúng tôi có thể liên lạc với anh không? 364 00:26:44,650 --> 00:26:51,370 Vì vậy, ví dụ, bạn sẽ mong đợi người dùng để kiểm tra nó trên và tắt. 365 00:26:51,370 --> 00:26:53,500 Vì vậy, lý do cho một hộp kiểm là gì? 366 00:26:53,500 --> 00:26:56,330 Tương tự như vậy, bạn có thể có các nút radio. 367 00:26:56,330 --> 00:27:02,020 Bootstrap hỗ trợ các nút radio có sẵn trong các hình thức HTML. 368 00:27:02,020 --> 00:27:05,650 Và cung cấp một số lớp học để tạo kiểu cho chúng đúng cách. 369 00:27:05,650 --> 00:27:10,850 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. 370 00:27:10,850 --> 00:27:13,113 Vì vậy, quay trở lại và nhìn vào mã. 371 00:27:13,113 --> 00:27:15,250 Hãy xem làm thế nào điều này được thực hiện. 372 00:27:16,340 --> 00:27:22,030 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 373 00:27:22,030 --> 00:27:28,630 nhóm hình thức div ở đây bao gồm hai điều ở đây. 374 00:27:28,630 --> 00:27:32,859 Một là một mẫu kiểm tra 375 00:27:32,859 --> 00:27:38,731 col-md-6 offset-md-2. 376 00:27:38,731 --> 00:27:45,120 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. 377 00:27:45,120 --> 00:27:53,902 Và sau đó xuống dưới đây tôi có một lớp div, Col-MD-3 offset-md-1. 378 00:27:53,902 --> 00:27:59,979 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. 379 00:27:59,979 --> 00:28:04,197 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. 380 00:28:04,197 --> 00:28:08,166 Vì vậy, tôi thường sử dụng hai cột cho các nhãn. 381 00:28:08,166 --> 00:28:13,160 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. 382 00:28:13,160 --> 00:28:16,591 Vì vậy, đó là lý do tại sao tôi sử dụng offset-md-2 ở đây. 383 00:28:16,591 --> 00:28:22,654 Và sau đó bên trong nó nói nhãn class="form-checklabel”. 384 00:28:22,654 --> 00:28:28,042 Và sau đó nó cung cấp thẻ đầu vào 385 00:28:28,042 --> 00:28:32,790 ở đây với hộp kiểm loại. 386 00:28:32,790 --> 00:28:35,070 Vì vậy, đó là cách bạn tạo một hộp kiểm. 387 00:28:35,070 --> 00:28:38,300 Và sau đó lớp học, lớp Bootstrap mà bạn sẽ áp dụng cho 388 00:28:38,300 --> 00:28:41,768 hộp kiểm của bạn là form-check input. 389 00:28:41,768 --> 00:28:49,390 Và sau đó tên và giá trị ban đầu trống. 390 00:28:49,390 --> 00:28:54,262 Và sau đó, cái này là nhãn thực tế mà bạn thấy được 391 00:28:54,262 --> 00:28:58,670 áp dụng cho hộp kiểm cụ thể đó ở đó. 392 00:28:58,670 --> 00:29:04,260 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. 393 00:29:04,260 --> 00:29:09,070 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à 394 00:29:09,070 --> 00:29:12,980 sau đó đặt nó trong biểu mẫu của bạn ở đây. 395 00:29:12,980 --> 00:29:15,840 Vì vậy, điều này ở đây sử dụng hình thức kiểm tra nhãn. 396 00:29:15,840 --> 00:29:19,880 Và sau đó ở đây, bạn phải có một hộp kiểm, loại đầu vào = “hộp kiểm”, và 397 00:29:19,880 --> 00:29:21,340 sau đó dán nhãn chính nó. 398 00:29:21,340 --> 00:29:23,620 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? 399 00:29:23,620 --> 00:29:29,770 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. 400 00:29:29,770 --> 00:29:37,390 Bây giờ dưới đây trong mã, bạn có một lớp div col-md-3 offset-md-1. 401 00:29:37,390 --> 00:29:40,760 Vì vậy, điều này chiếm ba cột trong một cột bù đắp. 402 00:29:40,760 --> 00:29:42,980 Vì vậy, tổng cộng bốn cột ở đây. 403 00:29:42,980 --> 00:29:50,113 Vì vậy, cái này là col-md-6 cộng với 2, vì vậy đó là tám cột. 404 00:29:50,113 --> 00:29:51,480 Vì vậy, 8 cộng với 4, 12. 405 00:29:51,480 --> 00:29:55,140 Vì vậy, điều đó sẽ chăm sóc 12 cột của bạn cho lưới của bạn ở đó. 406 00:29:55,140 --> 00:30:01,740 Bây giờ bên trong này, bạn thấy một lựa chọn áp dụng ở đây. 407 00:30:02,880 --> 00:30:07,320 Bây giờ đây là tùy chọn chọn mà các hình thức tệp HTML hỗ trợ. 408 00:30:07,320 --> 00:30:09,240 Và nhìn vào lớp học được áp dụng cho điều này. 409 00:30:09,240 --> 00:30:12,870 Nó nói class="form-control” để chọn. 410 00:30:12,870 --> 00:30:15,830 Và sau đó bạn cung cấp cho các tùy chọn trong chọn ở đây. 411 00:30:15,830 --> 00:30:18,638 Vì vậy,