FrontEnd裡面也有ront

網路上最有名的範例是男丁老師的《[jQ]利用 jQuery 來製作網頁頁籤(Tab)》

當然照抄很快啦，不過開始有點概念以後，範例不見得跟自己習慣思考的方式相同，以下是我的版本

從上方看結果，有兩個製作重點：

 tab會依照點擊切換（廢話

點擊的頁籤會改變樣式

基本上就是在檔案中用到中文字，下面網址提供了數個解決方式：從ruby本身的sass.rb修改，或是從你的專案中的config.rb修改

看文章：sass – scss – compass – susy2 – ruby – 解決中文註解發生錯誤 

一個小筆記，使用box-sizing：

(1) 特定瀏覽器記得寫，這樣就會解決90%的問題 -webkit-box-sizing: border-box;       -moz-box-sizing: border-box;           box-sizing: border-box; 

(2) ie hack - hack ie7 跟 ie6 對ie6 or 7要用老派的寬度減法，所以寬度要用 *width: /* ie7 */ _width: /* ie6 */

解答同此網址：

故事是這樣的，我習慣把工作的資料夾放在GOOGLE雲端硬碟，但開始使用SASS來工作後，卻發現：

應該是因為google雲端硬碟的路徑是中文的，因此發生錯誤。

想去google找有無英文版的也徒勞無功，在大神朋友的介紹下，知道可以用 mklink或subst 的指令碼處理

但我對命令提示字元很不熟，所以看了幾個教學也沒有看懂，翻了翻找到的教學同下

mklink設定教學 http://70tw.spotlight.net.tw/?p=870 大意是在A位置(就是沒有中文的路徑)做一個連結，連到B路徑(GOOGLE硬碟的位置)

先用”系統管理員權限”打開cmd (如何開系統管理員見下)

在cmd輸入 mklink /?

再輸入mklink /d A位置 B位置

這個A位置的資料夾，不用先建立，你在指令打了一個名稱，他會自己建立

如果A或B位置內，有空白鍵，CMD無法辨識，請用雙引號 “ “ 框起來，例如 ：mklink /d D:\Aurl\Afile "C:\Users\Google Drive\BBB"

命令提示字元(cmd)常見問題集 http://windows.microsoft.com/zh-tw/windows/command-prompt-faq#1TC=windows-8 上述說到我真的不太會用，例如說不知道要開系統管理權限去弄 這裡有個簡單的常見問題網址，裡面有如何打開命令提示字元、怎麼開系統管理權限用cmd

如果需要

數個東西的動作都是：被點到，做某個動作

動作是相同的，只是加入不同內容

例如說網站上有很多選單，都是click打開，便用得上

想法：

用 .on( events [, selector ] [, data ], handler ) 介紹 英文 中文

用.on來綁定click動作(在event的位置)

再綁定多個選取器 selector

輸入多個會做相同動作的id或class在上方.on方法的selector位置

點到的地方正是$(this)

用if(){}else{}來判斷$(this)是哪個東西被點到

做法：

HTML

<div class="big">    <div class="div01">1</div>    <div class="div02">2</div>    <div class="div03">3</div>    <div style="clear:both"></div> </div>

CSS(不重要)

.big {    width:100%;    border:1px solid #000;    padding:5px; } .div01, .div02, .div03 {    width:25%;    height:150px;    margin:5px;    border:1px solid red;    float:left; } img {    width:100%; }

jQuery

$(".big").on('click', '.div01,.div02,.div03', function () {

   if ($(this).hasClass('div01')) {

       $(this).html('內容A');

   } else if ($(this).hasClass('div02')) {

       $(this).html(' 內容B');

   } else {

       $(this).html(' 內容C');

   }

})

教學： CSS教學－CSS3 瀑布流版型 column-count  來自大家都喜歡的梅干老師

注意事項：

要為不同螢幕寫好需要的欄數，要不然會很神奇的靠下對齊

案主的需求，網路解答同下，測試過可使用

解答-Tina is Developer

DEMO

透過css去改變方向

就不用動到Bootstrap.js中的設定