自定義twitter bootstrap彈出窗口箭頭

我找不到任何相關信息，但我覺得很難忍受它不可行。自定義twitter bootstrap彈出窗口箭頭

如何自定義彈出箭頭？我已經做了，只是改變了課程.arrow等，但popover的位置被搞砸了。

那麼，這樣做的正確方法是什麼？我找不到任何文檔。

以下是我一直在使用的類，到目前爲止箭頭看起來錯誤：

.popover { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1010; 
    display: none; 
    padding: 5px; 
} 

    .popover.top { 
     margin-top: -5px; 
    } 

    .popover.right { 
     margin-left: 5px; 
    } 

    .popover.bottom { 
     margin-top: 5px; 
    } 

    .popover.left { 
     margin-left: -5px; 
    } 

    .popover.top .arrow { 
     bottom: 0; 
     left: 50%; 
     margin-left: -5px; 
     border-left: 5px solid transparent; 
     border-right: 5px solid transparent; 
     border-top: 5px solid #000000; 
    } 

    .popover.right .arrow { 
     top: 50%; 
     left: 0; 
     margin-top: -5px; 
     border-top: 5px solid transparent; 
     border-bottom: 5px solid transparent; 
     border-right: 5px solid #000000; 
    } 

    .popover.bottom .arrow { 
     top: 0px; 
     left: 50%; 
     margin-left: -5px; 
     border-left: 9px solid transparent; 
     border-right: 9px solid transparent; 
     border-bottom: 19px solid #000000; 
    } 

    .popover.left .arrow { 
     top: 50%; 
     right: 0; 
     margin-top: -5px; 
     border-top: 5px solid transparent; 
     border-bottom: 5px solid transparent; 
     border-left: 5px solid #000000; 
    } 

    .popover .arrow { 
     position: absolute; 
     width: 0; 
     height: 0; 
    } 

.popover-inner { 
    padding: 3px; 
    width: auto; 
    overflow: hidden; 
    background: #000000; 
    background: rgba(0, 0, 0, 0.8); 
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
} 

.popover-title { 
    padding: 9px 15px; 
    line-height: 1; 
    background-color: #252525; 
    -webkit-border-radius: 3px 3px 0 0; 
    -moz-border-radius: 3px 3px 0 0; 
    border-radius: 3px 3px 0 0; 
    background-color: rgba(37, 37, 37, 0.7); 
    font-size: 14px; 
    color: #7e7e7e; 
} 

.popover-content { 
    padding: 14px; 
    background-color: #252525; 
    -webkit-border-radius: 0 0 3px 3px; 
    -moz-border-radius: 0 0 3px 3px; 
    border-radius: 0 0 3px 3px; 
    -webkit-background-clip: padding-box; 
    -moz-background-clip: padding-box; 
    background-clip: padding-box; 
    background-color: rgba(37, 37, 37, 0.7); 
} 

    .popover-content p, .popover-content ul, .popover-content ol { 
     margin-bottom: 0; 
    } 

    .popover-content table { 
     background: transparent; 
    } 

     .popover-content table td { 
      border: 0px; 
      background: transparent; 
      color: #7e7e7e; 
     }

箭頭應指向紅色正方形 Arrow should be pointing to the red square

感謝。

來源

2013-03-05 So Many Goblins

這樣做的正確方法是他們的風格，使用與'.popover'和'CSS類.arrow'風格。你還沒有提供一個你正在嘗試什麼和什麼不工作的例子，所以這是我們能夠提供的最好的。 – Marc 2013-03-05 17:36:26

抱歉，粘貼的代碼和截圖。 – 2013-03-05 18:01:25

是不是'.popover.bottom .arrow'你需要修改的樣式？ – Marc 2013-03-05 18:09:06

Twitter Bootstrap基於Less。

如果您想更改其箭頭的外觀，請使用bootstrap less variables來完成此操作。

// Tooltips and popovers 
// ------------------------- 
@tooltipColor:   #fff; 
@tooltipBackground:  #000; 
@tooltipArrowWidth:  5px; 
@tooltipArrowColor:  @tooltipBackground; 

@popoverBackground:  #fff; 
@popoverArrowWidth:  10px; 
@popoverArrowColor:  #fff; 
@popoverTitleBackground: darken(@popoverBackground, 3%); 

// Special enhancement for popovers 
@popoverArrowOuterWidth: @popoverArrowWidth + 1; 
@popoverArrowOuterColor: rgba(0,0,0,.25);

如果您正在使用的Sass而不是做的Sass Variables相同。

不幸的是，TB-Customizer沒有所有的變量，所以你可能不得不自己編譯它。

編輯：

好消息，新Bootstrap 3 customizer現在提供這些選項。

來源

2013-03-28 16:20:14 HaNdTriX

我在調整popover邊框厚度時遇到了問題。爲了調整這一點，我添加了@ popoverBorderThickness popovers.less，只有那些行被改變。我包含整個文件的上下文。

// 
// Popovers 
// -------------------------------------------------- 


.popover { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: @zindexPopover; 
    display: none; 
    max-width: 276px; 
    padding: 1px; 
    text-align: left; // Reset given new insertion method 
    background-color: @popoverBackground; 
    -webkit-background-clip: padding-box; 
    -moz-background-clip: padding; 
      background-clip: padding-box; 
    border: @popoverBorderThickness solid @popoverOuterColor; 
    .border-radius(6px); 
    .box-shadow(0 5px 10px rgba(0,0,0,.2)); 

    // Overrides for proper insertion 
    white-space: normal; 

    // Offset the popover to account for the popover arrow 
    &.top  { margin-top: -10px; } 
    &.right { margin-left: 10px; } 
    &.bottom { margin-top: 10px; } 
    &.left { margin-left: -10px; } 
} 

.popover-title { 
    margin: 0; // reset heading margin 
    padding: 8px 14px; 
    font-size: 14px; 
    font-weight: normal; 
    line-height: 18px; 
    background-color: @popoverTitleBackground; 
    border-bottom: 1px solid darken(@popoverTitleBackground, 5%); 
    .border-radius(5px 5px 0 0); 

    &:empty { 
    display: none; 
    } 
} 

.popover-content { 
    padding: 9px 14px; 
} 

// Arrows 
// 
// .arrow is outer, .arrow:after is inner 

.popover .arrow, 
.popover .arrow:after { 
    position: absolute; 
    display: block; 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
} 
.popover .arrow { 
    border-width: @popoverArrowOuterWidth; 
} 
.popover .arrow:after { 
    border-width: @popoverArrowWidth; 
    content: ""; 
} 

.popover { 
    &.top .arrow { 
    left: 50%; 
    margin-left: [email protected]; 
    border-bottom-width: 0; 
    border-top-color: #999; // IE8 fallback 
    border-top-color: @popoverArrowOuterColor; 
    bottom: [email protected]; 
    &:after { 
     bottom: @popoverBorderThickness * 1.414;// longer line gets thinner use Pythagorean theorem to correct 
     margin-left: [email protected]; 
     border-bottom-width: 0; 
     border-top-color: @popoverArrowColor; 
    } 
    } 
    &.right .arrow { 
    top: 50%; 
    left: [email protected]; 
    margin-top: [email protected]; 
    border-left-width: 0; 
    border-right-color: #999; // IE8 fallback 
    border-right-color: @popoverArrowOuterColor; 
    &:after { 
     left: @popoverBorderThickness * 1.414;// longer line gets thinner use Pythagorean theorem to correct 
     bottom: [email protected]; 
     border-left-width: 0; 
     border-right-color: @popoverArrowColor; 
    } 
    } 
    &.bottom .arrow { 
    left: 50%; 
    margin-left: [email protected]; 
    border-top-width: 0; 
    border-bottom-color: #999; // IE8 fallback 
    border-bottom-color: @popoverArrowOuterColor; 
    top: [email protected]; 
    &:after { 
     top: @popoverBorderThickness * 1.414;// longer line gets thinner use Pythagorean theorem to correct 
     margin-left: [email protected]; 
     border-top-width: 0; 
     border-bottom-color: @popoverArrowColor; 
    } 
    } 

    &.left .arrow { 
    top: 50%; 
    right: [email protected]; 
    margin-top: [email protected]; 
    border-right-width: 0; 
    border-left-color: #999; // IE8 fallback 
    border-left-color: @popoverArrowOuterColor; 
    &:after { 
     right: @popoverBorderThickness * 1.414;// longer line gets thinner use Pythagorean theorem to correct 
     border-right-width: 0; 
     border-left-color: @popoverArrowColor; 
     bottom: [email protected]; 
    } 
    } 

}

來源

2013-08-02 16:37:52

使用自定義的style.css簡單地覆蓋引導而無需重新編譯你要找的越少，CSS規則的人是.popover.top > .arrow:after { border-top-color: yourColorHere; }改變只是箭頭的顏色。

來源

2014-10-31 15:27:23 Brian

這個修復對我有用，一旦我把它改成'border-top-color：myColorHere;' – simondelliott 2014-11-02 16:08:11

謝謝@simondelliott，只是編輯了我原來的帖子 – Brian 2014-11-03 18:35:41

棒極了！當然也適用於底部的popovers：'.popover.bottom> .arrow：在{border-bottom-color：YourColorHere;}之後' – Fafaman 2015-07-27 20:06:19

使用這些變量自定義提示：

@tooltip-max-width:  200px; 
@tooltip-color:   #FFF; 
@tooltip-bg:    #000; 
@tooltip-opacity:   .9; 
@tooltip-arrow-width:  5px; 
@tooltip-arrow-color:  #000;

這裏檢查文檔： http://getbootstrap.com/customize/#tooltips

來源

2014-12-26 13:58:58

自定義twitter bootstrap彈出窗口箭頭

回答

相關問題