[英]Add tip to Twitter Bootstrap's Dropdown Menu
Twitter Bootstrap導航組件中的下拉菜單在下拉菜單的頂部帶有一個“提示”。
如何在正常的下拉菜單中添加提示?
<div class="dropdown">
<a href="#" data-toggle="dropdown">
Click me
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a tabindex="-1" href="#">Action</a></li>
</ul>
</div>
添加此CSS:
.dropdown-menu:before {
position: absolute;
top: -5px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu:after {
position: absolute;
top: -3px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
我是從nav
下拉樣式中獲得的,並更改了幾個值。 它應該很容易滿足您的需求。
這是Bootstrap 4的更新解決方案。只需應用以下CSS,然后在dropdown-menu-tip-[n|ne|nw|s|se|sw]
添加dropdown-menu-tip-[n|ne|nw|s|se|sw]
修飾符即可。
[class*="dropdown-menu-tip-"]::after {
content: '';
position: absolute;
width: .5rem;
height: .5rem;
background-color: white; /* For SCSS use $dropdown-bg */
border: solid 1px rgba(0, 0, 0, .15); /* For SCSS use $dropdown-bg */
border-bottom: none;
border-left: none;
}
/* North */
.dropdown-menu-tip-n::after {
top: calc(-.25rem - 1px);
left: calc(50% - .25rem);
transform: rotate(-45deg);
}
/* Northeast */
.dropdown-menu-tip-ne::after {
top: calc(-.25rem - 1px);
right: 1rem;
transform: rotate(-45deg);
}
/* Northwest */
.dropdown-menu-tip-nw::after {
top: calc(-.25rem - 1px);
left: 1rem;
transform: rotate(-45deg);
}
/* South */
.dropdown-menu-tip-s::after {
left: calc(50% - .25rem);
bottom: calc(-.25rem - 1px);
transform: rotate(135deg);
}
/* Southeast */
.dropdown-menu-tip-se::after {
right: 1rem;
bottom: calc(-.25rem - 1px);
transform: rotate(135deg);
}
/* Southwest */
.dropdown-menu-tip-sw::after {
left: 1rem;
bottom: calc(-.25rem - 1px);
transform: rotate(135deg);
}
演示: https : //codepen.io/claviska/pen/LzvMpx
資料來源: https : //www.abeautifulsite.net/adding-a-checked-state-to-bootstrap-4-dropdown-menus
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.