如何設計Bootstrap？

我很難理解bootstrap（http://getbootstrap.com/）。你們可能會笑，但它是真實的:)如何設計Bootstrap？

我知道如何添加導航和他們提供的幾乎所有部件

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
     <img alt="Brand" src="..."> 
     </a> 
    </div> 
    </div> 
</nav>

複製和粘貼可以做的工作，但我們如何風格呢？是否純粹覆蓋課堂？

.navbar { 
    my override style 
} 

.navbar-default { 
    my override style 
}

或者我們創造我們自己的類也許如果我有博客，我把它叫做博客導航，然後風格，使它看起來像什麼，我preffer？

<nav class="navbar navbar-default blog-nav"> 

</nav>

我不能和與引導造型的想法包紮，我知道，引導後續OOCSS（面向對象的CSS）架構，我發現這個想法可能是超級有效時的造型。

所以回到問題如何樣式bootstrap？比如我想在一個頁面來創建交互式面板

<div class="container"> 
    <div class="row"> 
     <div class="col-md-3"> 
      <div class="panel panel-default></div> 
     </div> 
     <div class="col-md-3"> 
      ... 
     </div> 
     <div class="col-md-3"> 
      ... 
     </div> 
    </div> 
</div>

我如何可以自定義面板？..我必須重寫面板類，或創建一個新的類，並將其添加面板的旁邊？

<div class="container"> 
    <div class="row"> 
     <div class="col-md-3"> 
      <div class="panel panel-default my-panel<!-- Like this? -->></div> 
     </div> 
    </div> 
</div>

我怎樣可以按照OOCSS，我已經得到了概念，但分離類意味着每個類都會有特定的風格和其他類將工作/樣式化基礎上，父類（基/對象）。我如何識別每個班有這個和那個造型？這對我來說很難:(

如果任何人有關於這個和關於如何樣式bootstrap或任何相關的最佳做法的提示，請與我分享:)和平。

謝謝

來源

2016-02-12 densityx

只要確保帶有自定義代碼的樣式表在引導樣式表之後被調用，就沒問題。祝你好運。 – induprakash

twitter-bootstrap與bootstraping無關！ –

定製引導的基本思想是通過覆蓋自舉類。

因此，在您的html文件中，您首先調用bootstrap.css或bootstrap.min.css文件。根本不要編輯這個文件。

如果你想修改一個特定的類，創建你自己的style.css文件並創建一個同名的類。現在你可以在這個類中添加你想要的所有樣式。

現在，當您撥打style.css時，請確保它始終位於bootstrap.min.css類的下方，以使覆蓋生效。

所以你html頁的head部分看起來像：

<head> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
    <link href="/css/style.css" rel="stylesheet" type="text/css"> 
</head>

例如：如果你想修改.panel類的風格，在你style.css文件，

.panel{ 
//Your styles. The class name will be exactly same as the bootstrap class name. 
}

來源

2016-02-12 04:59:20

但是如果我想要面板的不同變化呢？如果我的風格.panel它將適用於所有面板右.. – densityx

是的，它將適用於所有面板。你可以創建自定義的類，並將它和你的引導類一起添加到html –

什麼你這裏需要做的是。製作自定義樣式表並放在引導樣式表之後。這樣

<link href="css/bootstrap.min.css" rel="stylesheet"> 
<link href="css/customstyle.css" rel="stylesheet">

我寧願讓自己的自定義類，並把它與引導類，所以如果在未來，如果你想改變你的引導版本，那麼它不會影響你的變化。

你需要遵循其他的事情是：

儘量避免重要特性儘可能如果沒有必要
請勿觸摸引導風格或js文件！在您的自定義樣式中進行更改
將媒體查詢置於自定義樣式之後。

來源

2016-02-12 05:53:47

所以基本上最好在引導類之後添加我自己的類。 examaple

densityx

是的。帶上自己的班級。 –

如何設計Bootstrap？

回答

相關問題