Source

Cách tiếp cận

Tìm hiểu về các nguyên tắc hướng dẫn, chiến lược và kỹ thuật được sử dụng để xây dựng và duy trì Bootstrap để bạn có thể dễ dàng tùy chỉnh và mở rộng nó hơn.

Mặc dù các trang bắt đầu cung cấp một chuyến tham quan giới thiệu về dự án và những gì nó cung cấp, tài liệu này tập trung vào lý do tại sao chúng tôi thực hiện những điều chúng tôi làm trong Bootstrap. Nó giải thích triết lý của chúng tôi trong việc xây dựng trên web để những người khác có thể học hỏi từ chúng tôi, đóng góp với chúng tôi và giúp chúng tôi cải thiện.

Thấy điều gì đó không ổn, hoặc có lẽ có thể được thực hiện tốt hơn? Mở một vấn đề — chúng tôi rất muốn thảo luận với bạn.

Bản tóm tắt

Chúng tôi sẽ đi sâu vào từng vấn đề này trong suốt hơn, nhưng ở cấp độ cao, đây là những gì hướng dẫn cách tiếp cận của chúng tôi.

  • Các thành phần phải đáp ứng và ưu tiên thiết bị di động
  • Các thành phần nên được xây dựng với một lớp cơ sở và được mở rộng thông qua các lớp bổ trợ
  • Các trạng thái thành phần phải tuân theo một thang đo chỉ số z chung
  • Bất cứ khi nào có thể, hãy thích triển khai HTML và CSS hơn JavaScript
  • Bất cứ khi nào có thể, hãy sử dụng các tiện ích trên các kiểu tùy chỉnh
  • Bất cứ khi nào có thể, hãy tránh thực thi các yêu cầu nghiêm ngặt về HTML (bộ chọn trẻ em)

Phản ứng nhanh nhẹn

Các kiểu đáp ứng của Bootstrap được xây dựng để đáp ứng, một cách tiếp cận thường được gọi là ưu tiên thiết bị di động . Chúng tôi sử dụng thuật ngữ này trong tài liệu của mình và phần lớn đồng ý với nó, nhưng đôi khi nó có thể quá rộng. Mặc dù không phải mọi thành phần đều phải hoàn toàn đáp ứng trong Bootstrap, nhưng phương pháp đáp ứng này nhằm giảm ghi đè CSS bằng cách thúc đẩy bạn thêm các kiểu khi khung nhìn trở nên lớn hơn.

Trên Bootstrap, bạn sẽ thấy điều này rõ ràng nhất trong các truy vấn phương tiện của chúng tôi. Trong hầu hết các trường hợp, chúng tôi sử dụng min-widthcác truy vấn bắt đầu áp dụng tại một điểm ngắt cụ thể và chuyển qua các điểm ngắt cao hơn. Ví dụ: a .d-noneáp dụng từ min-width: 0vô cùng. Mặt khác, a .d-md-noneáp dụng từ điểm ngắt trung bình trở lên.

Đôi khi, chúng tôi sẽ sử dụng max-widthkhi độ phức tạp vốn có của một thành phần yêu cầu nó. Đôi khi, những ghi đè này rõ ràng hơn về mặt chức năng và tinh thần để triển khai và hỗ trợ hơn là viết lại chức năng cốt lõi từ các thành phần của chúng tôi. Chúng tôi cố gắng hạn chế cách tiếp cận này, nhưng sẽ sử dụng nó theo thời gian.

Các lớp học

Ngoài Khởi động lại của chúng tôi, một biểu định kiểu chuẩn hóa trên nhiều trình duyệt, tất cả các kiểu của chúng tôi đều hướng tới việc sử dụng các lớp làm bộ chọn. Điều này có nghĩa là loại bỏ các bộ chọn kiểu (ví dụ, input[type="text"]) và các lớp cha không liên quan (ví dụ, .parent .child) làm cho các kiểu quá cụ thể để dễ dàng ghi đè.

Do đó, các thành phần nên được xây dựng với một lớp cơ sở chứa các cặp giá trị thuộc tính chung, không được ghi đè. Ví dụ, .btnvà .btn-primary. Chúng tôi sử dụng .btncho tất cả các kiểu phổ biến như display, paddingvà border-width. Sau đó, chúng tôi sử dụng các công cụ sửa đổi như .btn-primarythêm màu, màu nền, màu đường viền, v.v.

Các lớp bổ trợ chỉ nên được sử dụng khi có nhiều thuộc tính hoặc giá trị được thay đổi trên nhiều biến thể. Công cụ sửa đổi không phải lúc nào cũng cần thiết, vì vậy hãy đảm bảo rằng bạn đang thực sự lưu các dòng mã và ngăn ghi đè không cần thiết khi tạo chúng. Ví dụ tốt về công cụ sửa đổi là các lớp màu chủ đề và các biến thể kích thước của chúng tôi.

thang đo chỉ số z

Có hai z-indexthang đo trong Bootstrap — các phần tử trong một thành phần và các thành phần lớp phủ.

Các yếu tố cấu thành

  • Một số thành phần trong Bootstrap được xây dựng với các phần tử chồng lên nhau để ngăn các đường viền kép mà không cần sửa đổi thuộc bordertính. Ví dụ: nhóm nút, nhóm đầu vào và phân trang.
  • Các thành phần này chia sẻ một z-indexthang đo 0thông qua tiêu chuẩn 3.
  • 0là mặc định (ban đầu), 1là :hover, 2là :active/ .activevà, 3là :focus.
  • Cách tiếp cận này phù hợp với mong đợi của chúng tôi về mức độ ưu tiên cao nhất của người dùng. Nếu một phần tử được tập trung, nó sẽ được xem và thu hút sự chú ý của người dùng. Phần tử hoạt động cao thứ hai vì chúng biểu thị trạng thái. Di chuột cao thứ ba vì nó cho biết ý định của người dùng, nhưng gần như mọi thứ đều có thể được di chuột.

Các thành phần lớp phủ

Bootstrap bao gồm một số thành phần hoạt động như một lớp phủ của một số loại. Điều này bao gồm, theo thứ tự cao nhất z-index, danh sách thả xuống, thanh điều hướng cố định và cố định, phương thức, chú giải công cụ và cửa sổ bật lên. z-indexCác thành phần này có thang đo riêng bắt đầu từ 1000. Số bắt đầu này là ngẫu nhiên và đóng vai trò như một vùng đệm nhỏ giữa các kiểu của chúng tôi và các kiểu tùy chỉnh của dự án của bạn.

Mỗi thành phần lớp phủ làm tăng z-indexgiá trị của nó một chút theo cách mà các nguyên tắc giao diện người dùng phổ biến cho phép các phần tử được tập trung hoặc di chuột của người dùng luôn ở trong chế độ xem. Ví dụ: một phương thức là chặn tài liệu (ví dụ: bạn không thể thực hiện bất kỳ hành động nào khác để lưu hành động của phương thức), vì vậy chúng tôi đặt điều đó phía trên thanh điều hướng của chúng tôi.

Tìm hiểu thêm về điều này trong z-indextrang bố cục của chúng tôi .

HTML và CSS trên JS

Bất cứ khi nào có thể, chúng tôi thích viết HTML và CSS hơn JavaScript. Nói chung, HTML và CSS ngày càng phổ biến hơn và có thể tiếp cận được với nhiều người ở mọi cấp độ kinh nghiệm khác nhau. HTML và CSS cũng nhanh hơn trong trình duyệt của bạn so với JavaScript và trình duyệt của bạn thường cung cấp rất nhiều chức năng cho bạn.

Nguyên tắc này là API JavaScript hạng nhất của chúng tôi là datacác thuộc tính. Bạn không cần phải viết gần như bất kỳ JavaScript nào để sử dụng các plugin JavaScript của chúng tôi; thay vào đó, hãy viết HTML. Đọc thêm về điều này trong trang tổng quan về JavaScript của chúng tôi .

Cuối cùng, phong cách của chúng tôi xây dựng dựa trên các hành vi cơ bản của các phần tử web phổ biến. Bất cứ khi nào có thể, chúng tôi thích sử dụng những gì trình duyệt cung cấp. Ví dụ: bạn có thể đặt một .btnlớp trên gần như bất kỳ phần tử nào, nhưng hầu hết các phần tử không cung cấp bất kỳ giá trị ngữ nghĩa hoặc chức năng trình duyệt nào. Vì vậy, thay vào đó, chúng tôi sử dụng <button>s và <a>s.

Tương tự đối với các thành phần phức tạp hơn. Mặc dù chúng tôi có thể viết plugin xác thực biểu mẫu của riêng mình để thêm các lớp vào phần tử mẹ dựa trên trạng thái của đầu vào, do đó cho phép chúng tôi tạo kiểu cho văn bản là màu đỏ, chúng tôi thích sử dụng :valid/ :invalidpseudo-element mà mọi trình duyệt cung cấp cho chúng tôi.

Tiện ích

Các lớp tiện ích — trước đây là các trình trợ giúp trong Bootstrap 3 — là một đồng minh mạnh mẽ trong việc chống lại CSS cồng kềnh và hiệu suất trang kém. Một lớp tiện ích thường là một cặp giá trị-thuộc tính duy nhất, bất biến được biểu thị dưới dạng một lớp (ví dụ: .d-blockđại diện display: block;). Điểm hấp dẫn chính của chúng là tốc độ sử dụng trong khi viết HTML và giới hạn số lượng CSS tùy chỉnh mà bạn phải viết.

Cụ thể liên quan đến CSS tùy chỉnh, các tiện ích có thể giúp chống lại việc tăng kích thước tệp bằng cách giảm các cặp giá trị-thuộc tính thường được lặp lại nhất của bạn thành các lớp đơn lẻ. Điều này có thể có tác động đáng kể trên quy mô lớn trong các dự án của bạn.

HTML linh hoạt

Mặc dù không phải lúc nào cũng có thể, nhưng chúng tôi cố gắng tránh quá giáo điều trong các yêu cầu HTML của chúng tôi đối với các thành phần. Do đó, chúng tôi tập trung vào các lớp đơn lẻ trong bộ chọn CSS của mình và cố gắng tránh các bộ chọn con ngay lập tức ( >). Điều này giúp bạn linh hoạt hơn trong việc triển khai và giúp giữ cho CSS của chúng tôi đơn giản hơn và ít cụ thể hơn.