Trong mô-đun trước,
chúng tôi đã kiểm tra số lượng các thành phần Bootstrap hoàn toàn dựa trên CSS.
Vì vậy, bằng cách áp dụng các lớp CSS cho các thành phần này,
chúng tôi đã có thể tạo ra chúng trên trang web của chúng tôi.
Trong mô-đun này, chúng ta sẽ kiểm tra thêm các thành phần dựa trên JavaScript Bootstrap.
Vì vậy, tóm tắt, như chúng ta đã thấy trong mô-đun trước đó,
Bootstrap hỗ trợ một số lớp CSS có thể được áp dụng cho
đánh dấu HTML của bạn trong các trang web của bạn để kích hoạt và sử dụng các lớp CSS.
Vì vậy, bạn có thể thấy làm thế nào các lớp CSS sửa đổi các thẻ HTML chung và
cung cấp cách riêng của Bootstrap để trình bày cùng một thông tin.
Vì vậy, các thành phần hoàn toàn dựa trên CSS có thể dễ dàng được kích hoạt bằng cách
áp dụng các lớp CSS bootstrap cho
các thẻ HTML khác nhau có trong các trang web của bạn.
Bootstrap của chính nó có thể được sử dụng hoàn toàn cho các lớp CSS của nó.
Một khía cạnh khác của Bootstraps CSS class mà chúng ta thấy là
hầu hết các thành phần này bắt đầu với một lớp cơ sở mà bạn áp dụng.
Ví dụ, khi bạn nhìn vào nút,
bạn thấy rằng lớp cơ sở là lớp BTN.
Sau đó, bạn sẽ áp dụng
một cái gì đó giống như một BTN chính mà sẽ thêm màu sắc của họ vào BTN,
sau đó bạn có thể xác định kích thước của nút bằng cách nói BTN SM.
Sau đó, bạn cũng có thể xác định nút là một khối toàn bộ bằng cách sử dụng lớp khối BTN.
Vì vậy, tất cả các lớp tiếp theo và sửa đổi cho lớp BTN cơ sở.
Vì vậy, cách tiếp cận này, bạn sẽ thấy nó
hơn và hơn nữa trong nhiều thành phần Bootstraps.
Vì vậy, bạn sẽ có một lớp cơ sở sau đó tập hợp các lớp modifier có thể được
áp dụng để sửa đổi hành vi của thành phần cơ sở.
Điều này tạo điều kiện cho việc thiết kế trang web của bạn dễ dàng.
Lấy một ví dụ khác, chúng ta có thể nhìn vào lớp Nav.
Chúng tôi sử dụng lớp Nav trong NAV bar mà
chúng tôi bao gồm trong trang web của chúng tôi trong mô-đun trước đó.
Lớp Nav, chúng tôi sửa đổi điều đó bằng cách áp dụng lớp NAV-bar Nav cho nó.
Vì vậy, điều đó cung cấp cho chúng tôi một cách nhất định để trình bày các thông tin điều hướng.
Trong mô-đun này, chúng tôi sẽ kiểm tra các tab Nav-tab và
Nav-tablet mà vẫn là một cách khác để trình bày thông tin điều hướng cho trang web.
Các tab và các viên thuốc chúng tôi đang trình bày điều hướng một lần nữa, được
hỗ trợ với một plugin JavaScript,
cung cấp một cách nâng cao để cung cấp điều hướng trong nội dung của bạn.
Vì vậy, chúng tôi sẽ kiểm tra điều đó trong mô-đun cụ thể này.
Tôi sử dụng điều này như một ví dụ để minh họa cho bạn cách bắt đầu từ một lớp cơ sở,
bạn có thể sửa đổi bằng cách áp dụng các lớp modifier cho lớp cơ sở.
Tất nhiên, nếu bạn muốn đưa vào
một phần JavaScript của các thành phần Bootstrap của bạn vào hành động,
sau đó bạn nên bắt đầu áp dụng các lớp JavaScript.
Vì vậy, Bootstrap hỗ trợ một số thành phần
được hỗ trợ thông qua các plugin JavaScript.
Bây giờ, khi bạn sử dụng các plugin này trong trang web của
bạn, bạn có thể bao gồm các plugin riêng lẻ mà bạn thực sự sẽ sử dụng trong trang web
của bạn, hoặc toàn bộ các plugin.
Bây giờ, những gì chúng ta sẽ làm trong các bài tập là,
bao gồm toàn bộ các plugin bởi vì chúng tôi chỉ muốn khám phá tất cả chúng.
Nhưng nếu bạn đang thiết kế một trang web,
bạn có thể chỉ bao gồm một tập hợp con của các plugin
mà bạn đang thực sự sử dụng trong trang web
của bạn, do đó giảm lượng mã JavaScript cần
được gửi đến một người dùng đang xem trang web của bạn.
Đây là cách tôi nhìn vào cách tiếp cận Bootstraps để sử dụng JavaScript trong
sự hỗ trợ riêng của mình cho các thành phần Bootstrap được kích hoạt với JavaScript.
Nếu bạn nhìn vào JavaScript
một mình, nó cung cấp rất nhiều sự linh hoạt và cho phép bạn làm rất nhiều điều thú vị.
Nhưng điều đó cũng đòi hỏi phải
viết mã JavaScript để được sử dụng khi bạn đang thiết kế trang web của mình.
Bây giờ, tôi nhìn vào JavaScript như một đô vật sumo lớn với rất nhiều khả năng,
rất nhiều sức mạnh, nhưng không thuần hóa.
Bây giờ, jQuery như một thư viện được xây dựng trên đầu trang của JavaScript,
về cơ bản mất sumo đô vật và sau đó gói nó một cách tốt hơn để làm cho
con khỉ đột trăm lbs này thành một kích thước dễ quản lý hơn, dễ
tiếp cận hơn và dễ dàng hơn để
bao gồm và làm cho sử dụng tắt trong trang web của bạn thiết kế.
Vì vậy, nếu bạn đang sử dụng thư viện jQuery trực tiếp,
bạn chắc chắn có thể tận dụng nhiều
thành phần jQuery và sử dụng chúng trong trang web của bạn.
Bây giờ, đó là một cách tiếp cận mà bạn luôn có thể thực hiện bởi vì jQuery
đã được đưa vào trang web Bootstrap của
bạn, nếu bạn sẽ tận dụng các thành phần dựa trên JavaScript.
Bootstrap tiến thêm một bước nữa,
và sau đó nhìn vào hình ảnh
cách tiếp cận của Bootstrap là lấy đô vật sumo và sau đó đưa anh ta vào một cái hộp.
Về cơ bản đứng để đóng gói các
plugin JavaScript của bạn vào một thành phần mà bạn có thể dễ dàng sử dụng hơn trong các trang web của bạn.
Vì vậy, các thành phần dựa trên Bootstrap JavaScript về cơ bản có hỗ trợ dựa trên jQuery,
nhưng sau đó đóng gói chúng theo cách mà bạn có thể sử dụng chúng trong
trang web của bạn ngay cả khi không viết một dòng mã JavaScript.
Đây là nơi mà thành phần Bootstrap JavaScript
có thể được sử dụng mà không cần viết một dòng mã duy nhất.
Cách nó được hỗ trợ trong Bootstrap là,
các thành phần JavaScript hỗ trợ một số
thuộc tính sao gạch nối dữ liệu mà bạn có thể áp dụng cho các thẻ HTML của mình.
Vì vậy, bạn sẽ thấy tôi sử dụng những thứ như chuyển đổi dữ liệu,
dữ liệu gián điệp, dữ liệu mục tiêu, và như vậy.
Nếu bạn nhớ lại, khi chúng tôi thiết kế thanh Nav-bar,
bạn đã thực sự thấy một vài thuộc tính này.
Ở đó chúng tôi đã thiết kế nút cho các màn hình nhỏ thêm.
Bây giờ, đã đến lúc chúng ta [không nghe được] tại sao chúng ta đã làm điều đó trong mô-đun trước đó.
Vì vậy, chúng ta sẽ tìm hiểu cách tiếp cận này một cách chi tiết trong mô-đun này,
xem xét một số thành phần Bootstrap tận dụng hỗ trợ JavaScript.
Tất nhiên, bạn có thể tận dụng
API JavaScript đầy đủ có
sẵn cho tất cả các thành phần này bằng cách thực sự viết mã JavaScript.
Chúng tôi sẽ hoãn lại cho mô-đun tiếp theo, trong
đó chúng tôi sẽ kiểm tra cách bạn có thể viết mã JavaScript đơn giản dựa trên
cú pháp jQuery để thêm
nhiều chức năng hơn vào các thành phần Bootstrap dựa trên JavaScript của bạn.