本部落格已搬家
點此前往新部落格

新主機測試中...

Your posts match “ bootstrap ” tag:

網頁字體的一些事

一、Web Fonts(雲端字型技術)

客人說她的網頁上要用娃娃體,除了做成圖片,還有其他選擇嗎?

為了確保使用者在不同瀏覽環境也能看到同樣的字體,一般只能使用系統內建字體,如 Windows 系統的正黑體、細明體、標楷體。如有特殊需求,只能做成圖片或 Flash,除了網頁載入的負荷與日後維護的成本,也降低了網頁內容被搜尋引擎索引的程度,而且當圖片在高解析裝置上,或是需要放大時,上面的字也模糊不清了。

網路字型內嵌技術(Web Fonts,或是比較潮流的講法:雲端字型),解決設計師在網頁上使用特殊字體的問題,瀏覽者的電腦不須預先安裝字型於系統內,也不須下載整個好幾十 MB 的字型檔,就可以讓網頁的文字顯示額外的字體,設計師可任意的改變網頁上的文字樣式,輕鬆為網頁增添豐富性。

較知名的幾個 webfont 服務

  • Google Fonts (英文,免費)
  • Adobe Edge Web Fonts (FREE,英文字型為主,像本部落格的內文是使用這平台的思源黑體,一個月 25000 pageviews 內免費)
  • Justfont (繁體中文、簡體中文,可選擇的字體最多)
  • 華康 (繁體中文,字體經營豐富)
  • 文鼎iFontCloud (繁體中文,字體經營豐富)
  • 造字工房 (簡體中文,字體樣式較具獨特性,年費制)
  • TypeSquare (日文、繁體中文)

此技術其實已經不算新技術,雖然繁體中文因為要製作的字數非常多,而且市場小,選擇少,花樣不如簡體中文或是日韓語系的 webfont 服務那樣豐富,但隨著科技進展與需求的增加,各家的字體清單也逐漸在擴充,使用起來也越來越成熟穩定。

中文的 webfont 服務通常都需購買授權才能使用,多半以 Pageview 計費,頁數越多的網站可能花費就越高。以一個有 5 頁的網站為例,平均每日訪客 100 人,而且網站每一頁都有去看,那麼一年就有 182500 個 pageview,購買 justfont 的商業 VIP 方案,每年要再多繳 2000 多元。

二、IconFont

< i class="icon-edit-sign" > < / i > ->


短短一行 HTML 就可以產生一個 icon,就這麼簡單。

為了減少 hhtp request,或是 retina 螢幕的裝置,這年頭要在網頁上放一個圖示,不再像以前一樣單純。但也多了一種選擇,就是 Iconfont,使用 HTML 及 CSS 語法載入「圖示字型檔」,再放置定義好的 class name,就可在網頁上產生圖示,並透過 CSS 更改圖示的顏色、大小、透明度、內陰影、外陰影、旋轉…等,容易上手,也方便套用一些互動語法。在高解析裝置上也不會模糊。

使用一些開放原始碼的 iconfont 方案非常方便,但是總會遇到它提供的 icon 很多種,但剛好就缺你要用的那一種;或是 icon 的風格樣式不符業主需求的情況。如果要自己製作 iconfont,為了兼顧瀏覽器相容性,須設定/製作 eot, woff, ttf, svg 多種字型檔格式,與添加許多相容性語法,相當麻煩,還是仰賴一些線上外部工具來製作會比較方便。

由於 iconfont 是字體,所以每一顆 icon 一次只能顯示一種顏色,雖然之後也出現了多色的 iconfont,如 Stackicons,但製作過程繁瑣,會讓人覺得還是做成圖片就好了。


使用 Iconfont 時須注意,有些使用者的電腦瀏覽器版本較低,或是安全性設定較高(如 IE 設定停用字型下載,或是 Firefox 將 gfx.downloadable_fonts.enabled 設為 false ),容易導致瀏覽器無法下載字型檔案,而造成顯示錯誤。(如下圖)

三、瀏覽器最小字體設定
解析度 1920*1080 的 22 吋電腦螢幕,「螢幕點距」比解析度 1440*900 的 19 吋螢幕還小,所以使用者會有換了大螢幕,螢幕上的字卻比以前還小的情況。有些人可能會直接調整系統解析度,有些人可能會用 Ctrl + 滾輪,或是點選瀏覽器右下角的放大倍率,個別將網頁放大。


但是 Firefox, Chrome 等瀏覽器中還有一個「最小字型大小」的設定,會將小於設定數值的網頁文字通通放大,如 Chrome 的最小字型大小預設值為12px,所以 1~11px 的字體都會被強制放大成 12px 大小。但這種放大效果與使用 Ctrl + 滾輪來放大不同,「最小字型大小」會將字體放大,外層容器與圖片卻不會跟著放大。

網站一般皆是在預想使用者使用「預設值」的情況下進行製作,但若使用者自行調整該預設值,就會導致網站發生跑版,或是換行錯誤的狀況。早期可以用 css 設定 font-size-adjust 來解決,但隨著瀏覽器版本的更新,也逐漸失效。

  • 解決方法1: 區塊不要排得太剛好,保留一些字體放大的緩衝空間。(但是許多業主看到畫面上有留白就會高血壓)
  • 解決方法2: 使用 css3 的 transform:scale( ) 屬性。瀏覽器預設值為 12,如果最小字型大小被設定成 16px,那會導致網頁上小於 16px 的字被強制放大,就需要對 12~15px 分別設定縮放比率,讓各級字縮回正常尺寸,並設定 display:inline-block 等屬性,讓容器排列正常。(要先知道使用者把設定調成多大)
  • 解決方法 3: 通通做成圖片、Flash ..。(爛)

四、font-family 簡中/繁中/英文字體設定事項
1.顯示順序設定原則 : 英文在前、比較通用的設定在後面。

font-family: 新細明體, 微軟正黑體

↑(X)永遠顯示新細明體,除非電腦沒新細明體。

font-family: 新細明體, Impact;

↑(X)新細明體已包含英文字型,後面設多少組都沒用。

font-family: Georgia, 標楷體

↑(O)英文用Georgia顯示,中文用標楷體顯示。

2.不同語系的電腦,設定方法也不一樣

font-family: 微軟正黑體;

↑(X)非zh-tw語系的電腦不認得微軟正黑體。

font-family: 微軟正黑體; "Microsoft JhengHei", sans-serif;

↑(O)各種語系的電腦皆可正常顯示。

3.不同語系的電腦,預設字體大不同
zh-cn: 宋体(simsun/nsimsun)、黑体(simhei)、楷体(simkai)、仿宋(simfang)
zh-tw: 細明體/新細明體 (Mingliu/PMingliu)、標楷體(DFKai-sb)、simsun、simhei
微軟正黑體則是簡繁 Winodws 都有的共同字體,(XP則無)

五、中文字型地雷font-size設定
以下有幾組中文字,看看有沒有什麼異狀。

很明顯的看出,第三張的字看起來不夠清晰易讀,第四張最左邊一排的碧筵紺也不太對勁。事實上瀏覽器渲染出來的字體樣式,可能隨作業系統、Windows ClearType設定、系統解析度(DPI)、瀏覽器種類、瀏覽器引擎、使用者自行調整瀏覽器的字型設定、電腦的點陣字體處理技術……等等,造成不同的差異。


via just font blog - hinting處理技術
在電腦的字型的設計上,同一個中文字,在不同大小的寫法也是不同的。

微軟正黑體在某些文字的粗體會有筆畫粗細不一、多一個全型空白等bug。
另外有一些國外進口的 css framework (如 Bootstrap) 或是網路服務 (如 Google Blogger ),仍沿用歐美語系的網頁樣式設定,未對中文顯示做最佳化,某些字型設定搭配特定的字體,則容易顯示欠缺美觀。應避免使用在繁體中文的 font-size設定值: 1~7pt, 15pt, 1~11px, 14px, 20px。

地雷 font-size 相關連結:
中文字 Font-Size Samples by piaip
網頁設計便利貼: 網頁字型大小的最佳方案

本站相關文章:
網頁的平面設計稿要注意哪些事? « 要改的地方太多了,那就改天吧


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


Bootstrap 的 10 個錯誤用法

近幾年很流行在網頁專案導入一個叫 Twitter Bootstrap 的前端 framework,例如網站的管理後台,網頁系統的後台,新創網站,甚至一些預算不低的網站前台,也是套 Bootstrap 的預設樣式,或是套上某個 Bootstrap 的免費樣式,就端出來給大家用,讓那些慢慢手工刻網頁的勞工覺得自己好像智障。

導入 Framework 的意義何在? 就是 Write less, do more.

Bootstrap 針對一些常見、常用的網頁元素寫好定義樣式,有漂亮的按鈕,現代風格的表單等等,在 IE8 等主流瀏覽器都能得到統一的視覺呈現,甚至還有內建一些常見網站功能的 js,像多層下拉選單、tooltip、表格隔行變色、頁籤、收闔選單、對話視窗等等,可以快速做出看起來比較像樣的東西,而且還有許多以 Bootstrap 為基礎發展出來的 JS plugin,與 Bootstrap 無縫接軌。

國內幾個大網站,如 iCook、KKBOX,都使用 Bootstrap 來做前端的介面架構呢! 像是 Inside Job Board - 網路業工作職缺看板TaiwanSamsungLeaks.Org 的網頁樣式,就是用 Bootstrap 2 的預設樣式排的。

我鍵盤金田一推測我們公司這邊是工程師提議開始用 Bootstrap 的,工程師花許多時間做出能動的程式,但可能在東西的外觀與互動上卻完全不吸引人,黑白灰色又正正方方的區塊、接近色盲的愚蠢配色,美工也不是整天閒閒幫你做版型、套樣式,但是有了 Bootstrap,工程師只要在寫按鈕或是表格迴圈的時候,加上幾個 Bootstrap 的class 名稱,馬上就從粗糙的裸機變成比較像樣的網頁。

Bootstrap 這麼強大,但它完美嗎? 人做的東西怎麼會有完美的嘛 !
一個東西紅當然不是壞事,大家會想辦法讓他變得更好。但是對 Twitter bootstrap 的使用者我不禁有些話想講講。

一、注意中文 font-size 地雷
我們先來看一張擷圖,擷圖中有 4 個文章段落,哪一段的字體看起來最不清楚?

首先是 Bootstrap 的第一個問題,上圖有四段繁體中文的段落文字,哪一段的字體看起來最不清楚?

一般人平常可能不太會去注意這種小事,但擺在一起看,就發現第一段中文字有點古怪。中文字有一些地雷 font-size,用錯 font-size 會讓網頁上的文字特別難看。Bootstrap 畢竟是洋人的東西,偏偏就用上了14px的地雷設定,文字長這樣你可能不陌生,Google Blogger 的一些樣式版型也是這種字體大小設定,看起來會令人不爽。

諸位網頁勞工你用 Bootstrap 時 font-size 愛怎麼設都可以,但是就不要照預設的設,拜託。然後因為 Bootstrap 有許多地方都是基於 body 的 font-size 來計算尺寸,所以改了 body 的 font-size 之後,一些表單元素可能會出現古怪,例如高度對不齊,表單框框字的下半部被吃掉啊,麻煩也顧一下。不然就用 Customize Bootstrap 來產生對的值,不要浪費寶貴的人力。

除了字體缺點,Bootstrap 讓不會用的人用,code 會非常亂,造成接手的人的困擾。

二、不要讓網站的 CSS 變成維護地獄
最常見的錯誤用法有五種:

第一種是不愛看文件:
例如用官網提供的範例來修改,看範例的導覽列是黑色的,想改成淺色的。於是千辛萬苦設定 nav-bar 的背景色、超連結的顏色、選單的背景色,其實可以多花兩分鐘先看看文件,把 class 名稱 navbar-inverse 改成 navbar-default 就好了。

第二種是只看眼前:
直接把樣式改在 bootstrap.css 裡面,後續就發生用了 BS 的 class 名稱,卻出現非預期的效果。或是下次要更新 boostrap 版本,或是又用 Customize Bootstrap 產生新的 bootstrap.css 的時候,樣式又要重寫一遍。

第三種是 css 繼承與優先序的概念薄弱:
發現自己怎麼寫都蓋不過 BS 的預設樣式後,就開始 !important,或是寫行內樣式,快速解決問題,但後續卻製造更多問題,這樣亂搞,在 RWD 時更容易發生問題。或是又發生第二點的問題,直接跑去改 bootstrap.css。其他有套 bootstrap 的頁面也跟著亂掉,又要再多寫好幾行 css 去控制亂掉的頁面。甚至有時候趕工的時候,可能寫在 DOM inline,也有可能寫在 head 裡面,或是除了 bootstrap.css 跟 style.css 以外又多了一支 pageOOXX.css,為了RWD 可能又有一支 responsive.css,然後哪天突然又不得不多一支 !@#$%^&.css......真是一場災難! 當然如果貴公司是照程式碼有幾行來算薪水的,那當然 code 寫越多越好。

第四種是用人工去做機器做的事:
比如說在 bootstrap.css 看到這段,btn-primary 按鈕顏色的 CSS code:

.btn-primary {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #006dcc;
*background-color: #0044cc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-repeat: repeat-x;
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

btn-primary 的按鈕本來是藍色的,但是你要把他改成紫色系的,於是你一行一行去改,按鈕的一般狀態改完了又去改 hover, active, focus 的狀態,然後客戶說紫色太鮮豔了,要換一個比較「有人情味」的紫色,於是你又重複再做一遍...。

萬一有一個沒改好的話,就容易發生像下面這樣的情況。

其實 bootstrap 的 css 是用 LESS 語言寫成的,就是一種 css 的預處理工具,其中一個功能是你只要寫一行,工具就會幫你編譯成加上前綴字元,或是符合各種瀏覽器的 css 語法。所以你看到上述那種東西,都是機器跑出來的。不是真的人去一行一行寫的。

所以你要修改做這些 code 的話,請用 LESS 去重新編譯 CSS,不然就用 Customize Bootstrap 去產生新的 css,不要花人力去做機器做的事。

第五種是亂刪:
比如上面那一段,有人覺得 background-image 為什麼要寫這麼多行? 就把其他看不懂的全刪掉,除非你的網頁只給自己看,不然這就糟了。
其實現在網頁瀏覽環境很複雜,不像以前只有 IE,800X600,現在有各種裝置與各種瀏覽器,為了讓各瀏覽器都能看到統一的樣式,所以不得不寫這麼多。有人覺得說現在除了IE以外的瀏覽器不都很強大,支持主流標準網頁語法嗎? 但你知道 CSS3 有一個常用的 box-sizing 屬性,在 Firefox 版本 29 以前,都要加前綴字元(prefix) -moz-box-sizing 才能正常運作嗎? 你知道有些 css 屬性在 android 4.2的預設 browser 不支援嗎? 諸如此類狗屁倒灶的東西還有一大堆。

還有些瀏覽者只知道自己是用 Firefox, Chrome, 卻不知道自己的瀏覽器版本從未更新過,或是自動更新根本就故障了(如[教學]如何解決Google Chrome的更新錯誤?(錯誤:管理員已停用更新))。所以還是需要這些加上前綴字元的寫法,才能正常顯示樣式。基本上 Bootstrap 對主流瀏覽器的支援算是不錯了。

來下個結論,合理的 Bootstrap css 用法,是保留 bootstrap.css 不去動,然後用另外一支 theme.css 去 override 控制 bootstrap.css,或是用一些 css 的預處理器,再 mixin 一些 boostrap 的東西來用。

三、增加額外的流量負擔
常見的一個初學者錯誤,把 bootstrap.css 跟 bootstrap.min.css 一起嵌入網頁中,其實兩支都是一樣的東西,只要用一支就好。那為什麼他要提供兩支檔案給大家用? 因為一支保留可讀性與維護性,min 檔案則是刪除所有縮排、換行,讓檔案達到最小化,節省流量,也有人則是想故意打亂原始碼讓人看不出來(騙小孩而已)。總之壓縮器(compressor) 的使用與最小化的檔案,在現在的網頁設計是很常見的。

Bootstrap 提供自訂功能,使用者可以從官網選擇會用到 bootstrap 的哪些功能,下載對應的 JS 跟 CSS code 來用就好,像是你要 grid 系統就勾 grid,要表單樣式就勾表單樣式。但一般人都會有一次到位的心態,直接下載完整版,省得夜長夢多。

於是可能只有兩三頁的網站,就包了 120(min)~140幾 KB,有 6000 多行的 css,還有一個 30(min)~60KB 的 JS,好啦,現在的網頁主機都很勇,大家也都用寬頻上網,區區幾百 KB 何足畏懼? 但別忘了,還有吃不飽的手機上網,或是有人是用流量計費的 3G 上網,或是有些租屋族是用手機分享網路訊號給 PC 的,這些都會對他們的機器造成額外的負擔。

四、reset、normalize,與 bootstrap
有些人知道 css 要 reset,但是只知其一,不知其二。

例如客人會反應他在後台打文章時,項目符號明明有點點或是編號,但是在前台看就不見了,或是表格有設內外距,但是距離沒出來。這種情況九成九就是做網頁的人用了 css reset,把 ul 跟 ol 的 list-style:none 了,把table, th ,td 的 border-spacing 變成 0 了,甚至把一些段落都變成 0 距離。但是又忘了把文章內文區、編輯頁面區的再設定回來,所以同一篇文章在前後台看起來的樣式會差很多,於是就又要有人去收爛攤子,或是客人自己加一些●▲☆★◆■▼㊣⊕⊙◎當項目符號,拜託 ! 用了 css reset 之後請再顧慮一下使用者輸入內容的地方。

然後有時候會看到網頁上套了 reset.css,再套了 normalize.css,然後又再套了 bootstrap.css。其實上 bootstrap 1 就已經有包含 css reset,升級到 2 代的時候則捨棄 reset,改用 css normalize,第三代仍是採用 css normalize,所以 Bootstrap 的骨子裡已經包含 normalize.css 的血液了,自己又再套一次是毫無意義。

愛套 framework 沒關係,覺得不套個某大神的 css reset 或 css normalize 的話網頁用起來會不安心。只要能完成任務,一個網頁套 100 個也沒關係,但重點是要知道 framework 的作用是什麼,不要一股腦亂套。

五、怕被 bootstrap 預設樣式影響,不想用一般的 html tag 去包東西
Bootstrap 預設會給一些網頁元素 p, h1, h2...之類的套上樣式,但有些網頁勞工不想讓網頁上的元素被套上 bootstrap 那種行距超大的 p, h1, h2...樣式,DOM 架構的容器名稱又沒取好,所以本來該用 p, h1, h2 之類的語意標籤排的東西,硬是用 div、span 套額外的 class 再去排。

然後又產生一堆怪問題,例如在後台編輯器裡面顯示的,跟前台顯示出來的,又會差超多。當然一些常見的後台所見即所得編輯器都支援嵌入外部CSS,讓前後台顯示的樣式可以幾乎一樣。但是就是要多花時間處理。

如果你覺得內建樣式不理想,請自己再定義過 p, h1, h2...樣式。如果覺得 Bootstrap 這種洋人的東西太不接地氣,可以試試 Amaze ~ 妹子 UI中国首个开源 HTML5 跨屏前端框架

六、元素亂套
舉例來說,像是可能覺得 Label and badge 的綠色背景、紅色背景看起來不錯,就把它拿去套在文章的標題。Alerts 的淡黃、淡綠的底色很好看,拿去套在小段文字的段落上。這樣套會死嗎? 不會啊! 網頁會不能看嗎? 也沒有啊!

使用者會不會覺得明明操作成功,卻是紅字,紅背景?
或是代表警告的視覺樣式,為什麼會用在一個奇怪的地方?
或是明明有兩個一樣的樣式,一個是文章標題,一個是代表警示訊息?

不過其實網頁是很現實的東西,以上這些技術問題都不是問題,
案子無法結案,還有客人的產品在你做的網站上賣不出去,這才是問題。

七、Responsive Web Design 問題
終於有越來越多的業主終於發現,他家網站的 Flash 動畫跟 Flash選單在他的 iPhone 上看不到,還有競爭對手的網站用手機或平板看起來是很舒服的,自己家的網站的圖不但糊掉,還要一直縮放滑動,非常難用。於是有改版網站的需求。

Bootstrap 特點之一就是內建 RWD 的設計,你可以簡單加一些 visible-xs 之類的 class 屬性,就能控制網頁上的元素在某尺寸的裝置上顯示與否,不需知道 breakpoint,也不用知道 media query,基本功不用學好,馬上就可以越級打怪。懶得指導新人做網頁時,就可以丟 bootstrap 給他用。

但是這就造成大家以為 Bootstrap 等於 RWD,要做 RWD 網站就一定要用 Bootstrap,用 Boostrap 做出來的網站就一定有 RWD。世界是很大的。先別說 Bootstrap 了,你聽過 FoundationWeb Starter Kit 嗎?

除了用 Bootstrap 來做 RWD ,還有有些網頁勞工會忘記 bootstrap 有 RWD 功能,只要觀念薄弱,就可能導致悲劇發生。

例如以下兩種情況...


Bootstrap 的預設值是螢幕寬度小於 768 px 時,選單才會縮成 hamburger icon。
但是主選單項目太多,而且螢幕比較小,或是沒有把視窗放到最大時,本來顯示成一排的 brand、nav、nav pull-right 選單變成了三塊,還蓋住主內容。這時候就要改 Bootstrap 的 breakpoint,或是不要用 fixed 的選單。


本來只打算做 for pc 的網站,但如果 class 名稱用錯,用行動裝置瀏覽會大爆炸。

八、如果有相容舊瀏覽器的需求,不要隨時追到最新版的 framework 版本
什麼東西都會更新,Bootstrap 也不例外,基本上版本越新的前端 framework,就對用 XP 與 IE8、IE7 的使用者越不友善,有些電腦也不是想升級就升級,想安裝什麼就安裝什麼啊! 有些是內嵌式系統,有的是 ERP 或工業軟體的包袱,不得不用舊電腦。

但就像你不會問為什麼 Nokia 3310 不能傳 LINE 跟上 FB,你要 IE7 的技術團隊在開發時,就可以支援到 10 年後的網頁技術規格,這也是挺強人所難的。拿 2006 年的 Firefox 或 Opera 版本來跑現在的網頁,也是一樣的慘。

Bootstrap 從 2.x 成長到 3 代目,主要是增加了一些新的網頁元件樣式,然後把一些冗餘的 class 名稱與 dom 架構改得更精簡。Boostrap 2 對舊的 IE 瀏覽器的策略基本上是勉強支援,但 Bootstrap 3/4 則是建議你為舊版 IE 另外寫一支 css ,並加掛許多相容性的 js plugin (如html5.js, respond.js...),白話翻譯就是,BS升級到新版之後,反而你要做的事變多了

另一種情況是舊架構的網站更新,網站本來是用 BS2 來 layout,看到 BS3 出了一些新功能,很想用。於是有兩條路可以走,第一種是器官移植,把 BS3 新功能的 css 跟 JS 拆出來,然後塞到 BS2 的 css 跟 JS 裡面,但是會不會出問題? 其實還滿容易出問題的。

於是你走第二條路,就是脫胎換骨,把 BS2 更新成 BS3。只有置換 CSS 與 JS 檔案就好了嗎? 當然不可能。

舉例來說,Bootstrap 方便之處,在於它預先寫好許多類別樣式,比如在 html 加一個 class 名字叫 row-fluid 的 div,然後用迴圈跑 class="span4" 的 div,就可以完成一排 3 個的產品列表,不用寫半行 css ,就可以讓每一塊 div 有間距跟排成一排。

但是在 BS3,row-fluid 跟 span 1~12 的 class 名稱通通都沒了,於是你要重新看一次 BS3 的 class name 與架構長怎樣,還有把程式迴圈裡的 span4 拿掉,換成 col-xs-12 col-md-4,這時候有前車之鑑,有人可能會記得要幫每個 item 加一個另外的 class 了,除了 grid system,其他還有 .input-group , .btn, .bar, .label, .inline 這些通常會寫在後端程式做判斷產生的東西,通通都要再改過後端程式,然後測試一遍顯示與執行是否正常。

別忘了還有人把 css 定義成這樣 .Prodlist .span4{}
或是在 JS 這樣寫的:
$('#reg .btn-mini').click(function() {.....});
$('#export input').click(function() {
var option = $(this).parent().parent().val();
$(this).next().children().find('ooxx').val(option);
});
只要少包一層,架構或 class name 變更,程式就爆炸啦。

有些工程師可能已經幹過一次把 BS2 的後台改成 BS3 的事情了,
那以後會不會隔一段時間又要再更新成 BS4, BS5 呢?
搞不好那時候又會有比 Bootstrap 更強的 Framework 出現呢。

九、讓只會 photoshop table 切版的美工處理 Bootstrap 的網站
有些號稱「網頁製作經驗豐富」,很會用Flash,很熟 Firework,很會用 Photoshop 的切片工具 + Dreamweaver 的所見即所得功能做網頁,他現在的職稱不一定是網頁設計師,可能是銷售大師,可能是設計部經理,也許是什麼都會的助理或業務什麼的,要是沒跟上新時代,遇到 Bootstrap 就會碰壁。

有時候只是在 Dreamweaver 的所見即所得模式打開要改的網頁,把一個東西選起來,換一下顏色,加個超連結,或是移動一下網頁上電話區塊的位置,或是想把一組圖文拿掉,就把 Bootstrap 的網頁改壞了。通常是 end tag 跑錯地方,或是 dreamweaver 自動多加了一層 div,或是 class name 被所見即所得的軟體刪掉了。這時候就看誰要出來收拾。

十、把 Bootstrap 的命名方式當成團隊的 style guide。
有時候後端工程師對 html 跟 css 的概念不好,寫出來的程式常常都會亂包亂套,雖然後端管的是傳遞資料是否正確,Html 怎麼包、好不好看不關他的事,但就容易引發團隊間的對立與紛爭。
或是後台是由很多工程師撰寫與維護的,但公司沒有規範團隊的 style guide,所以每個人取名稱的習慣都不一樣,比如說常見的會有以下幾種:

  • 駝峰式(camel case),如 "ProdTab" 或 "prodTab"
  • 用全小寫 "prodtab"
  • 加下底線或 dash 區隔,如 "prod-tab" 或 "Prod_tab" 或 "_prodTab"
  • 流水號命名,如 "tab34", "item3"
  • 亂取名,如"top-box"
  • 拼錯單字,如 "Probtob" ...族繁不及備載。

於是對設計師而言,在 UX 概念中操作流程與視覺上明明要長一樣的東西,卻因為 RD 在撰寫程式時,因為每支程式命名方式的不同,造成很難維護,與難以調整外觀樣式的情況。例如各種不同樣子的輸入框與按鈕,完全不統一的操作流程與按鈕配置,完全沒有(或亂七八糟) class name,跟著程式迴圈產生的行內樣式。最後設計師調整樣式時,要寫一長串,顧及所有的程式:
ProdTab, .prodTab, .tab34, top-box, Prob_tob, .prodtab {content:"damnit"}

但是只要團隊導入一些 framework 之後,一些常見的網頁元件,如 input-group 或是 nav-tabs,會直接使用 framework 的元件,而不再是隨便亂取,各自為政。

這樣的情況短期來看是好的。網頁元件與命名得到統一,後台也有基本的樣式,工程師與設計師可以少花一些心力去打架。但是這樣又會產生本文第八點的問題。

十一、看中文版的文件
有些台灣人英文比較差一點,難以理解 http://getbootstrap.com/ 上面寫些什麼,但其實有時候不是英文差,是用中文寫出來都看不懂,何況是英文? 有些新玩家的 English isn't very good,網頁前端概念也不成熟,於是就到一些簡體中文網頁、或是某些大大自己翻譯的,或是一些民間的部落格或論壇文章找 code 來用。看起來好像可以用? 東西也做出來了,那會有什麼問題呢?


軟體的世界是進展很快的,它常常會更新,Bootstrap 畢竟是洋人的東西,所以更新的第一手資訊絕對不會是中文的,現今看到的中文資源都是別人翻譯,或是整理過的,如上圖我們發現官方的跟中文版的版本號差了一號,那到底差在哪裡? 就得去查 changelog 或 release note。

最怕的就是有人去官網下載 3.3.6 的 bootstrap.js 跟 bootstrap.css,但是在看其他版本的文件,然後覺得奇怪,為什麼效果出不來或是遇到各種 error? 或是明明網頁上掛的是 BS 3.x 的 js 與 css,卻為了製作某效果,到八百年沒更新的民間部落格或論壇文章找 BS 2.x 的使用範例程式碼,或是只能在 BS 2.x 上能用的 jQuery套件,這都是無法使用的。

上面講的是版本不對的問題,另外還有安全問題,那些外部的載點,有沒有可能有偷加料在裡面? 貢獻 Open Source 的大大們都是很 nice 的,不要胡思亂想,不然會睡不著覺。


Bootstrap 只是一個工具,要怎樣用,沒人管得著,但要告訴大家可能會碰到的問題,事先預防。

網頁設計師基本上就是一個會中年轉職的行業,要嘛換工作,要嘛變成用嘴巴做網頁。
所以青春歲月要浪費在美好的事物上,而不是花在 debug 上面。


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助