Bootstrap customizing button style

Question

Я хочу изменить стиль кнопок Bootstrap, чтобы он не выглядел по умолчанию. Я могу легко изменить цвет с их страницы customization, но то, что я хочу сделать, - это удаление значения градиента, чтобы оно выглядело плоским.

Я вижу, что есть несколько других подходов, чтобы сделать это, и то, что я сделал, это создание моего собственного custom.css для перезаписи стилей любых элементов Bootstrap и связать его ниже загрузочного CSS-кода по умолчанию в html. У меня есть свои пользовательские стили над .btn .btn-success для настройки зеленой кнопки, как описано в документе here, но это ничего не делает.

В основном я хотел бы знать правильные шаги перезаписи стилей по умолчанию в контексте кнопок настройки.

Answer 1

На bootstrap .css найдите все стили для btn-primary и скопируйте их в свой собственный .css.

Теперь измените имя на цвет, как вы хотите .btn первичной = .btn-синий

И затем, удалять или изменять элементы.

В вашей кнопке используется класс, созданным:

<button class="btn btn-customcollor">Custom Button</button> 

Пример для серой кнопки:

.btn.btn-gray { 
    border: 1px solid #626e7f; 
    -webkit-box-shadow: inset 0 1px 2px #9aa4b1; 
    -moz-box-shadow: inset 0 1px 2px #9aa4b1; 
    box-shadow: inset 0 1px 2px #9aa4b1; 
    background: #758294; 
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjOTdhNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc1ODI5NCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); 
    background-size: 100%; 
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8c97a6), color-stop(100%, #758294)); 
    background-image: -webkit-linear-gradient(top, #8c97a6, #758294); 
    background-image: -moz-linear-gradient(top, #8c97a6, #758294); 
    background-image: -o-linear-gradient(top, #8c97a6, #758294); 
    background-image: linear-gradient(top, #8c97a6, #758294); 
} 


.btn.btn-gray:hover { 
    background: #728092; 
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjOTdhNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzcyODA5MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); 
    background-size: 100%; 
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8c97a6), color-stop(100%, #728092)); 
    background-image: -webkit-linear-gradient(top, #8c97a6, #728092); 
    background-image: -moz-linear-gradient(top, #8c97a6, #728092); 
    background-image: -o-linear-gradient(top, #8c97a6, #728092); 
    background-image: linear-gradient(top, #8c97a6, #728092); 
    -webkit-transition: box-shadow 0.05s ease-in-out; 
    -moz-transition: box-shadow 0.05s ease-in-out; 
    -o-transition: box-shadow 0.05s ease-in-out; 
    transition: box-shadow 0.05s ease-in-out; 
} 


.btn.btn-gray:active { 
    background: #818d9d; 
    border-color: #5d6979; 
    -webkit-box-shadow: 0 0 5px #818d9d inset; 
    -moz-box-shadow: 0 0 5px #818d9d inset; 
    box-shadow: 0 0 5px #818d9d inset; 
} 

.btn-group.open .btn.btn-gray.dropdown-toggle { 
    background-color: #8c97a6; 
} 

Answer 2

я написал о обходном пути для этой проблемы здесь. Простой способ стилизации кнопок бутстрапа. https://stackoverflow.com/a/20960203/3167046