如何修改自举下拉按钮

的设计，我是新来的前端。我想修改自举下拉按钮的设计是这样的： picture 如何修改自举下拉按钮

引导下拉代码：

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li role="separator" class="divider"></li> 
    <li><a href="#">Separated link</a></li> 
    </ul> 
</div>

如何可以根据上面的图片我修改吗？

来源

2016-11-24 Eniss

您可以创建一个新的类到例如你的CSS文件（.myButton），并把它添加到您的按钮类=“”。你可以改变颜色，边框后，... –

你需要重写引导CSS，自己写了相同的类 – Luka

CSS，你可以准备一些例子，如果你不介意吗？ – Eniss

看我下面的代码或本fiddle的工作演示

.dropdown-menu>li>a{ 
    color: red; 
     padding: 3px 10px; 
} 
.dropdown-menu>li>a .fa{ 
     margin-right: 5px; 
} 

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li><a href="#"><i class="fa fa-cog"></i>Action</a></li> 
    <li><a href="#"><i class="fa fa-cog"></i>Action</a></li> 
    <li><a href="#"><i class="fa fa-cog"></i>Action</a></li> 
    <li><a href="#"><i class="fa fa-cog"></i>Action</a></li> 
    <li><a href="#"><i class="fa fa-cog"></i>Action</a></li> 
    </ul> 
</div>

来源

2016-11-24 15:06:09 Rahul

有很多方法..

有自己的风格创建一个新的CSS类，然后将该类添加到您的默认的jQuery下拉
超越控制的jQuery类

防爆的数1：创建新的CSS类：

.newDropdown { 
     background-color: #ddd; 
     color: #fff 
     border: 1px solid #000 
    }

然后加入.newDropdown到HTML

<ul class="dropdown-menu newDropdown" aria-labelledby="dropdownMenu1"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li role="separator" class="divider"></li> 
    <li><a href="#">Separated link</a></li> 
    </ul>

例数为2：

只需在此改变类：

.dropdown-menu { 
    background-color: #777; 
} 

.dropdown-menu li { 
    padding: 10px 
}

或者，你可以阅读这个答案以供参考（即使他们使用select）：How to style a <select> dropdown with CSS only without JavaScript?

来源

2016-11-24 15:08:43

谢谢你的回答。我正在测试你的第一个例子，但有些东西我无法解决。当我点击按钮时，它仍然显示默认引导按钮css。你可以检查此链接：https://jsfiddle.net/DTcHh/27339/ – Eniss

我看不到我的jsfiddle链接 – Eniss

的更新版本@Eniss看看这个：https://jsfiddle.net/L7tgL3jj/1/ –

如何修改自举下拉按钮

回答

相关问题