2013-10-16 19 views
5

Điều tôi muốn đạt được là vô hiệu hóa lớp Twitter Bootstrap cho phần tử đầu vào của riêng tôi với lớp có tên là login_button. Theo mặc định, lớp bootstrap.min.css đang thêm các thuộc tính không cần thiết như box-shadow v.v. vào phần tử input.login_button của tôi.Tắt bootstrap cho một phần tử

Tôi biết tôi có thể xác định box-shadow: none; nhưng tôi tự hỏi liệu có những khả năng khác để đạt được điều đó không?

+0

đặt tên lớp khác và đặt thuộc tính của riêng bạn – Ibu

+0

@lbu Bootstrap có bộ chọn 'đầu vào [loại =" văn bản "]' nó không chọn phần tử theo lớp. Tôi đã có lớp học của riêng tôi nhưng bootstrap vẫn là trọng tài. – Lucas

+0

và bạn có thể ghi đè lên nó quá – Ibu

Trả lời

7

Chỉ cần ghi đè kiểu Bootstrap. Miễn là Bootstrap được bao gồm trên trang của bạn trước khi CSS tùy chỉnh của bạn thì CSS của bạn nên ghi đè Bootstrap vì độ đặc hiệu của bộ chọn sẽ giống nhau. Thêm phần này vào CSS tùy chỉnh của bạn và ghi đè lên phong cách cho phù hợp:

input.login_button { 
    box-shadow: none; 
    border: none; 
    line-height: initial; 
    /* Etc. */ 
} 

Đây input.login_button có điểm specificity của 011 trong khi Bootstrap của input[type="text"] chỉ có một số điểm đặc trưng của 010, có nghĩa là phong cách tùy chỉnh của bạn sẽ đủ mạnh mẽ để ghi đè Bootstrap của bất kể thứ tự CSS của bạn.

4

Bạn không thể, trừ khi sửa đổi bootstrap.min.css. Tất cả những gì bạn có thể làm là ghi đè lên các kiểu với các bộ chọn cụ thể hơn.

+0

Từ những gì bạn nói tôi đoán tôi có thể sử dụng ': không (.login_button)' trên bộ chọn của bootstrap? Bộ chọn ': not:' chỉ có sẵn trong CSS3? – Lucas

Các vấn đề liên quan