Bootstrap自定义按钮样式

问题描述：

我想更改Bootstrap按钮的样式，因此它没有默认外观。我可以很容易地从他们的customization页面更改颜色，但我想要做的是删除梯度值，使其看起来平坦。Bootstrap自定义按钮样式

我可以看到还有其他一些方法可以做到这一点，我所做的是创建自己的custom.css，用于覆盖任何Bootstrap元素的样式，并将其链接到html中的默认引导程序CSS下方。我有我的自定义样式.btn .btn-success自定义绿色按钮记录here但它没有做任何事情。

我基本上想知道在自定义按钮的上下文中覆盖默认样式的正确步骤。

答

在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; 
}

非常感谢您提供快速而有效的解决方案！ – 2013-05-05 23:35:09

答

我已经写了关于解决方法这里这个问题。一种设置引导按钮风格的简单方法。 https://*.com/a/20960203/3167046

Bootstrap自定义按钮样式

相关推荐