天天看點

快速修改bootstrap

Bootstrap并不是單單意味着HTML/CSS界面架構,更确切的說,它改變了整個遊戲規則。這個囊括了應有盡有的代碼架構使得許多應用和網站的設計開發變得簡便許多,而且它将大量的HTML架構普及成了産品。但是,Bootstrap的真谛是“基石”。Bootstrap架構,并不意味着它是全部終結解決方案。

但bootstrap提供的預設樣式往往不能滿足我們的需求,進而定制化bootstrap成為我們經常需要做的工作,本文就如何更高效更可維護地定制bootstrap做一下探讨。

如下圖,在你的button 中加入bootstrap的class: btn btn-primary,就可以将預設的button(左邊)變成右邊的樣式。

可如果我們想應用自己的樣式呢?比如我們想要擁有圓角的button。

通常,我們可以直接覆寫bootstrap的樣式。

我們在自己的項目目錄下建立my-custom.css檔案,加入如下代碼:

.btn { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;}

将my-custom.css檔案引用放到bootstrap.css檔案後面,我們定義的btn樣式就會覆寫原有的樣式(注:這裡的‘覆寫’指的是增量疊加式的覆寫)。

<link rel="stylesheet" href="boostrap.css"><link rel="stylesheet" href="my-custom.css">

但這種方法有它的優缺點,

優點:不會改變你的工作流程。你可以快速直接修改你的樣式,即使是你的網站引用了其他的類似bootstrap的架構樣式,你都可以在同一個地方進行統一的定制。

缺點:但是對于更徹底的修改(比如重新設計導航欄)或是非局部的修改(比如修改适用于整個網站的高亮顔色)來說,這樣東一塊,西一塊的覆寫樣式更像是一種打更新檔式的解決方案。而且你的新樣式要添加到Bootstrap的預設樣式表裡,讓本已經100 KB的檔案越發臃腫。如果你不僅僅想要做一些覆寫,那就要考慮一種更具擴充性的方法了。

可視化修改

最後提供兩個可視化修改bootsrap變量的網站

bootswatchr 通過修改變量值實作。

stylebootstrap 通過元件化組織内容

另一種方法是生成一個自定義建構的bootstrap。

我們可以使用官方的建構器,你可以對bootstrap中樣式變量進行自定義。