Twitter中的按鈕樣式引導程序

我剛剛開始使用Bootstrap，並且我處於初始階段。我正在嘗試修改marketing-narrow.html（文檔/示例中的默認示例），以使顯示按鈕更小。Twitter中的按鈕樣式引導程序

我改變

<a class="btn btn-large btn-success" href="#">Sign up today</a>

到

<a class="btn btn-small btn-success" href="#">Sign up today</a>

和有視覺上沒有根本的變化！我究竟做錯了什麼？

來源

2012-12-02 Gowtham

嘗試在瀏覽器中使用inspect元素工具，右鍵單擊按鈕並使用此功能，您可以看到該按鈕正在運行的類。 – joshuahornby10

@ joshuahornby10大提示。我剛剛檢查過，實際上是在班級btn-small之下。我甚至嘗試過btn-mini。兩者都不起作用。 :( – Gowtham

@Gowtham你能看到變化嗎？http://codepen.io/yardenst/pen/mwyvb – YardenST

他們這一規則重寫某些屬性：

.jumbotron .btn { 
    font-size: 21px; 
    padding: 14px 24px; 
}

下劃線影響是btn-small和btn-large在.jumbotron方面是相同的。

刪除jumbotron類，因此BTN-小會按預期工作：

<div> 
     <h1>Super awesome marketing speak!</h1> 
     <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> 
     <a class="btn btn-small btn-success" href="#">Sign up today</a> 
</div>

來源

2012-12-02 16:41:40 YardenST

我只是想到了這一點，謝謝！重要的是在我的css結尾，以確保我定義的屬性覆蓋引導的默認值？ – Gowtham

@Gowtham！重要的是永遠不是一個好的解決方案，你需要在引導的類後添加你的類，它會覆蓋它們。：//codepen.io/yardenst/pen/AKGlF – YardenST

超小型按鈕HTML：

<button class="btn btn-warning btn-xs" type="button">Extra small button</button> 
<button class="btn btn-success btn-xs" type="button">Extra small button</button>

enter image description here

http://twitterbootstrap.org/bootstrap-css-success-buttons/

來源

2013-09-24 12:44:36

Twitter中的按鈕樣式引導程序

回答

相關問題