【Origin】Bootstrap in Blogger
由於之前準備做Portfolio，打算除左實體印刷本之外，考慮緊點樣可以方便D展示自己作品俾人地睇，又可以方便自己做更新。最後係芸芸咁多免費資源之中，我選擇左用 Google Blogger。好處明顯在於免費，本身設計簡單之餘，有個重要考慮就係點樣容易執個版面靚D。
Portfolio最緊要係Show到D靚靚作品俾人睇，就算呢個Blog都一樣會有好多圖，Responsive就好緊要。而我只係略懂些少HTML+CSS+JS，上網自學一陣，發現Bootstrap比較容易上手。我唔係專業，無法評論，但係Style各樣野都已經整好曬俾你，改少少就用得的確係好幫到手。
 |
| Bootstrap將網頁分成12間，依裝置大小作Responsive處理 |
由Blogger既簡單主題開始，加上Bootstrap 既framework，咁就整左呢個Blog既原形。網上既教學好好，一步步跟住就準備好個網頁。我想係度留個底，整返份中文教學俾自己，第日唔記得就係度搵返。
首先係加入Bootstrap之前要做既係儘量精簡Blogger本身網頁既Layout。視乎自己想唔想保留Blogger Template既外觀，比如大改做Static Webpage或者只係細改繼續用返預設排版，可以只係選擇做以下一兩步。
*記得每做一步都禁一下Save Template。如果手多刪多左野，有問題佢會提示你。*
將下圖果段字Delete直至 ]]></b:skin>
跟住要搵到<b:template-skin>部份，然後將<![CDATA[ 同 ]]> 呢兩行之間既全部CSS刪除。
之後睇下你揀左咩Template，下面既Code可能搵唔到。
先將呢段由<div class='body-fauxcolumns'> 至 <header> 前既Code刪除。目的在於拎走Blogger Gadget/Widget以外既果D Container，令版面更好睇。儲存過程Blogger會一路提你有D </div>多左，一路向下搵紅色標示左既 </div>，刪除多餘既直到儲存無問題。
跟住拎走埋呢幾段，就應該可以Preview睇到個好精簡既Blogger，準備就緒加入Boostrap。
Bootstrap本身利用JQuery Javascript 既語言，為左要令網頁行到Bootstrap，必要做既就係加返Bootstrap既CSS同JQuery。位置放係</body>前就OK.
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'/>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script crossorigin='anonymous' integrity='sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS' src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'/>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script crossorigin='anonymous' integrity='sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS' src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'/>
再加返呢兩段令唔同裝置都可以兼容 (Compatible)係 <head>之後
<meta charset='utf-8'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Bootstrap -->
<!-- <link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' integrity='sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7' rel='stylesheet'/> -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- <link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' integrity='sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7' rel='stylesheet'/> -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
下一步係要去Bootstrap官網度抄個CSS落黎。
Bootstrap 3.3.6 CSS
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
因為本身Blogger都有.navbar，為免影響功能性，所以將Bootstrap既navbar一律改名為navbar2。可以用notepad / MS word既取代功能一下子將佢改名。
將呢堆CSS全部放係<b:skin> 部份就搞掂。
最後可以放個navbar或者jumbotron係body度試下得唔得。如無意外，Page同埋Post都應該可以繼續正常運作。
 |
| 網頁全頁寬的bootstrap navbar |
 | |
|
可以試下係developer mode入面試下個網頁係唔係好似上面咁responsive。
大功告成！
Reference Link:
Using Bootstrap with Blogger Templates by Don James
Comments
Post a Comment