2012-11-18 2 views
0

Я хочу изменить внешний вид Twitter-бутстрапа. Я в основном знаю, как это работает, и все работает & работает.Переписывание свойств CSS в Twitter Bootstrap

По умолчанию .navbar-inner имеет радиус границы. Посмотрите, как это объявлено ниже - они использовали префиксы.

.navbar-inner { 
    min-height: 40px; 
    padding-right: 20px; 
    padding-left: 20px; 
    background-color: #fafafa; 
    background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2)); 
    background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2); 
    background-image: -o-linear-gradient(top, #ffffff, #f2f2f2); 
    background-image: linear-gradient(to bottom, #ffffff, #f2f2f2); 
    background-repeat: repeat-x; 
    border: 1px solid #d4d4d4; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
      border-radius: 4px; 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0); 
    *zoom: 1; 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); 
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); 
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); 
} 

Теперь давайте говорить, что я не хочу, чтобы border-radius. Должен ли я написать это

.navbar-inner { 
    border-radius: 0; 
} 

или как этот

.navbar-inner { 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
      border-radius: 0; 
} 

для обеспечения максимальной совместимости браузера?

Использование первого варианта работает для меня, и оно выглядит лучше, чем со всеми префиксами, но я обеспокоен тем, что некоторые браузеры этого не поймут.

+0

Проверьте, какие браузеры необходимы для этих префиксов поставщиков, вы можете быть удивлены: http://caniuse.com/#search=border-radius –

+0

Я не знаю, если это только я, но могу Не находите информацию о префиксах там. Однако этот ресурс говорит, что его можно безопасно использовать без префиксов, поэтому мне интересно, почему они все еще используют префиксы вообще. http://html5please.com/#border-radius Но это еще один вопрос, который я предполагаю. – Sven

+0

Нажмите «Показать все версии». Любая ячейка, которая имеет в ней '-prefix', означает, что для нее требуется версия этого браузера (в настоящее время ее немного). Я бы сказал, что оба эти префиксы для пограничного радиуса вовсе не нужны, но это зависит от вас. –

ответ

2

Вы должны использовать префиксы, если хотите охватить все старые браузеры. Именно по этой причине bootstrap включает в себя префиксы для начала.

Если вы используете только префиксную версию, более старые браузеры, в которых реализованы только префиксные версии, не будут правильно интерпретировать версию без префикса и не будут изменены/обнулены.

Смежные вопросы