iT邦幫忙

DAY 12
6

30天掌握Sass語法系列 第 12

30天掌握Sass語法 - (12)以Bootstrap framework淺談HTML、SASS設計模式

相信網頁設計師們都知道bootstrap這個前端framework,
載入它的js與css後,
之後只要在你的html tag加上他寫好的class樣式即可。

我們先來聊聊最簡單的應用方式,

像譬如button來說,
他是會用這樣子的方式在HTML下Class:

<div class="code">
<a class="btn">Download Bootstrap</a>
</div>

如果你希望他用其他顏色來取代,
則可以瀏覽它內建設計的顏色庫後,
設定如下設定:..
30天掌握Sass語法 - (12)以Bootstrap framework淺談HTML、SASS設計模式

相信網頁設計師們都知道bootstrap這個前端framework,
載入它的js與css後,
之後只要在你的html tag加上他寫好的class樣式即可。

我們先來聊聊最簡單的應用方式,

像譬如button來說,
他是會用這樣子的方式在HTML下Class:

<div class="code">
<a class="btn">Download Bootstrap</a>
</div>

如果你希望他用其他顏色來取代,
則可以瀏覽它內建設計的顏色庫後,
設定如下設定:

<div class="code">
<a href class="btn btn-primary">Download Bootstrap</a>
</div>

為什麼這樣子它就會變成藍色的呢?
我們來看一下他的CSS程式碼,
請看各class的第一行即可,也就是.btn與.btn-priamry的background-color設定:

.btn {
background-color: #f5f5f5;
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-primary{
background-color: #006dcc;
}

CSS有一個特性,
那就是可以進行樣式覆蓋,
所以如果一個HTML tag寫了兩個class,
且裡面都有寫相同css設定的話,
他會以最後面的CSS設定來進行覆蓋,
像.btn-primary比較後面,所以樣式就由他來覆蓋了.btn的背景顏色。
由.btn來做一些瀏覽器的調整當作基底後,
再透過樣式覆蓋來新增其他像.btn-info、.btn-success來設定背景顏色,
這樣就可以設定出多種樣式出來了。

詳細流程請看此影片:

雖然透過這樣子的設定,
可以設計出多種樣式的調整:
舉例來說像這樣子:

<div class="code">
<a href="#" class="btn btn-primary large ltr">Download Bootstrap</a>
</div>

連結按鈕除了外觀樣式外,
在large與ltr的css設定上又讓他變大又變寬,
這樣子就會讓你的class變得很複雜,在橫式瀏覽上也不好瀏覽。
所以有些網頁設計師不太喜歡這樣的做法,

他們會利用@extend將 a的樣式合併起來,
所以原本的.btn就會變成%btn,
透過這樣子的方式來合併CSS樣式,
這樣一來就算是只寫這樣子,也是OK的:

<div class="code">
<a href="#">Download Bootstrap</a>
</div>

程式碼是不是乾淨許多了呢?
這裡也附上影片流程教學:

[/vide]
至於要用哪種方法來寫CSS與HTML的話,
也給各位最基本的判斷點,

如果你只有一個人撰寫SASS,沒有同伴的話那可以用乾淨的寫法。

但如果你有多位協作者,素質參差不齊,那就會建議使用多種樣式寫在HTML上面的方法,
bootstrap的用意主要是要讓沒有CSS基礎的人也可以輕鬆建議樣式,
所以對他們來說只要加CLASS和遵循他們的規則就可以跑出漂亮的畫面出來,
對他們來說也較省事,而且也不用學SASS。

不論是前者還是後者介紹的方法,
其實都會因「人」、「專案特性」、「合作流程」的因素,
來去選擇該專案最佳的撰寫HTML、CSS方式,
所以沒有最佳答案嘍,

一些經驗提供大家參考,歡迎共同交流討論^_^


上一篇
30天掌握Sass語法 - (11)覺得Sass的寫法不適合你寫CSS嗎?那試試看SCSS吧!
下一篇
30天掌握Sass語法 - (17)使用@content建構RWD網頁設計
系列文
30天掌握Sass語法41

2 則留言

0
sophiachang
iT邦新手 5 級 ‧ 2020-04-20 14:37:01

很實用的內容,謝謝~
但怎麼沒有看到13~16篇呢?

咪醬 iT邦新手 5 級 ‧ 2020-05-11 14:16:13 檢舉

13~16篇文章不見了..... +1

我要留言

立即登入留言