[Bootstrap 補充技巧] Bootstrap 讓 Grid 的項目 column 能夠等高

怎麼讓 Bootstrap 的 Grid 的 column 等高呢?! 好奇怪感覺這需求應該很早就應該出現，結果我這幾天才發現到..

舉個例子，如果你每個 column 內容不一致，那麼每個 Row 的內容高度也會不一致:

(我用 jsbin 來寫 sample code)，會向右邊那樣，我預期希望黃色跟藍色的區塊可以跟紅色的等高：

後來 Google 發現有人幫我處理好這個好用的功能了，他是利用 display 的 flex 的屬性來達到每個 column 等高，請參考 http://getbootstrap.com.vn/examples/equal-height-columns/。 用法文件寫得很清楚，要引用這個作者寫的 .row-eq-name 樣式 ，然後在需要等高的 row 上附加這個 class name .row-eq-height 

Example: <div class="row"> 加上 row-eq-height <div class="row row-eq-height">

jsbin 範例

注意事項

* Flex 只支援到 IE 10

* .row-eq-height 可能會改變原本的 column wrap 的行為，所以還是得取捨，至於差別在哪，你多測測 螢幕小一點的時候就知道了，原本設定的 column 變化可能會因為 row-eq-height 而有點不同哦!

關於買樣板來製作網頁這一件事情

穎（@look_me08）張貼的相片 於 2015 年 9月 月 23 4:38上午 PDT 張貼

(因為不放圖顯得很空洞，所以放一張今天晚上在左道咖啡的照片)

今天買了一套 Admin 介面的樣板，我想起這件事情，還滿值得研究研究談一下想法。事實上我很常買樣板，甚至有些我根本也沒有用到，不過買回去第一件事情，想想別人為什麼可以做樣板做到可以拿來賣錢，一定有它方便於我的地方。

首先，完整性不用講，常常我們腦袋裡想的天馬行空，後台想要多牛B就多牛B，但就是不想動!? 對吧，於是幻想就停留在那一刻，然後刻出來的東西照樣平庸。

接下來是樣板有時候是『學習的樣本』，你可以買到用 Angular 製作的樣板，bootstrap 一樣，很多很多，你可以透過套過樣板知道別人怎麼把這一堆前端的 library, plugins 『兜』在一起，就算手法不是很高明，但也是一種解決方案，千萬不要覺得這些事情很簡單... 前端是很苦工的...。

可以學但不要照單全收，有些樣板不一定是很有組織的程式碼，這樣也是挺合理的... 因為畢竟他可能只是在 demo 某一件事情，通常你買來可能還需要再整理過。

再來是學習使用現有的樣板套用在自己的系統上，不論你的 template engine 是什麼，趁機組織一下頁面可以共用的地方，分出哪些是東西是 layout, partial, widget, 或是 bla~bla~bla~，有助於一點點習慣程式喜歡『re use』的概念。


當然也有人會認為，買樣板沒有樂趣，很有可能撞板或是什麼的... ，我個人是覺得只限於後台或是內部系統會買。前台的話，我還是喜歡有設計過的網頁 :P

只是想起，有一次在做手機版網站，當時還菜，一直不懂為什麼手機上看我的網站，那顆 menu 的按鈕按下去之後，感應很緩慢，不知道有 fastclick 可以幫我解決手機上 click delay 的問題，這點，從樣板學來，所以我知道了有這個工具。

第二個經驗是，樣板使用的 plugin 有時候會讓我驚訝，『原來有這種工具!』的心情。

前端是一個做久了有時候會很沉悶的工作，但偶爾發現一些驚喜，內心還是會很澎湃的，也許有這樣的心情的時候，才發現自己已經是個有點懶散的老鳥了...，因為懶，所以我寧可刷個幾百塊錢買樣板，企圖得到一個系統看起來很完整，能 work，眼睛順眼的結果。

[小筆記]假日好天氣來研究Bootstrap

Ch01 : 什麼是bootstrap [太猛了><!]

---

Twitter Bootstrap!



上面寫著大大的標語: Sleek, intuitive, and powerful front-end framework for faster and easier web development，Bootstrap是一個強大的前端Framework!，所謂framework，就是一個框架。


稍微看了一下使用bootstrap可以猜測的出來，這個framework，他呢，提供固定的樣板給你，讓你用最快的時間完成一個網站，當然，也能活用它，只是以他的框架為基準。(重點是他已經很漂亮了。)
有用過jQuery Mobile嗎? 就是像那種，UI,CSS,js...都替你準備好了，至於要顯示什麼東西，由你來塞。這樣說很籠統，到時候試一下就知道了。

有人說bootstrap是一套css框架，也有人說他是UI的框架，總之，他非常方便在開發初期，還來不及提供完整UI的雛型時，以現成的漂亮UI，可以先擋著。

看了一下網站首頁的說明 :

Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.
1.Bootstrap 利用了LESS CSS，經由節點的方式做編譯，使用GitHub做管理。

Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.
2.Bootstrap絕對不只有為了最新的桌上型電腦的瀏覽器，連平板, 智慧型手機都可以響應相對應的CSS!

A 12-column responsive grid, dozens of components, javascript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.
3.12列的網格設計，幾十個組件，JavaScript的插件，排版，表格控制等等，基於網頁標準的。

以下是使用bootstrap的範例 :
http://twitter.github.com/bootstrap/examples/hero.html
http://twitter.github.com/bootstrap/examples/fluid.html
http://twitter.github.com/bootstrap/examples/starter-template.html#






Ch02 : GET START!-來入門吧...

---

先看到網站的Get start的頁籤，這裡有兩種下載方式，哪個你最需要呢? 因人而異，先看左邊的

Download compiled : 

用最快的方式開始：編譯和壓縮版的CSS，JS和圖像。沒有文檔或原始文件。
Download source : 

所有的CSS和JavaScript的原始文件，以及文檔的本地副本，需從GitHub下載最新的版本。

我個人喜歡Download source的版本，比較完整。

但是後面的說明好像都是以Download compiled 作為說明，所以就先下載左邊的Download compiled。

下載之後呢，就解壓縮，把檔案(解壓縮後)放到"心儀"的磁碟槽

(C:\ 還是 D:\ 還是哪，都可以，記住就好)

好! 到這裡安慰一下自己已經很厲害了，看一下這個解壓縮後的資料夾，等一下來看看資料的檔案結構...，(我決定去買杯紅茶再回來繼續寫...)
(這是download compiled的目錄)

(下圖是download source的目錄-->可見較完整)

Ch03 : File structure 資料夾的檔案結構

---

壓縮下來的檔案，解壓縮後打開，就如同上圖一樣

官方網站是這樣寫... (不過我怎麼沒看到README.md?)

bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  ├── img/
  │   ├── glyphicons-halflings.png
  │   ├── glyphicons-halflings-white.png
  └── README.md

這個資料夾的結構是bootstrap最基本的形式(所以等一下來要新增html檔)，bootstrap.min ，檔名有min是壓縮過的(css或js)版本，在這裡要注意的是，所以的js需要匯入jQuery)Please note that all JavaScript plugins require jQuery to be included.)

Docs 的部分 :(Docs的資料夾要下載Download source的那個才看的到)

1. 具有預設(global)的網頁樣式，包含他的css,連結，網格系統，還有兩個基本的樣板。
2. 常見的HTML元素，如排版，代碼，表，表格，按鈕的樣式。此外，還包括Glyphicons，一個偉大的小圖標集。
3. 常見的視覺介面，像是tab, navbar(導覽列), alert(警示視窗),page headers,還有更多。
4. terface components like tabs and pills, navbar, alerts, page headers, and more.
5. Javascript的插件組件

組件列表 :

• Button groups
• Button dropdowns
• Navigational tabs, pills, and lists
• Navbar
• Labels
• Badges
• Page headers and hero unit
• Thumbnails
• Alerts
• Progress bars
• Modals
• Dropdowns
• Tooltips
• Popovers
• Accordion
• Carousel
• Typeahead

Ch04 : 開始一個最基本的HTML

---

現在我的資料夾跟目錄建立一個index.html
To make this a Bootstrapped template, just include the appropriate CSS and JS files:
要做一個bootstrap的基本頁面，只需要匯入合適的css跟js檔案:

在這個html檔寫些基本的html架構: (如官方網站)

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Bootstrap 101 Template</title>
5. <!-- Bootstrap -->
6. <link href="css/bootstrap.min.css" rel="stylesheet">
7. </head>
8. <body>
9. <h1>Hello, world!</h1>
10. <script src="http://code.jquery.com/jquery-latest.js"></script>
11. <script src="js/bootstrap.min.js"></script>
12. </body>
13. </html>

And you're set! With those two files added, you can begin to develop any site or application with Bootstrap.
有設置這兩個檔案，你的設置已經差不多了，你可以開始使用bootstrap開發你的網站或是應用程式

Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.

Ch05: Scaffolding (棚架)

---

剛剛那個例子，只會顯示hello world!在畫面上而已。
當然這樣很空虛，Scaffolding可以幫助你加入你所需要的東西，可以耐心把他看完
Bootstrapt是建立在12列的網格,布局,和組件的基礎下。

文件宣告 : 
首先，Bootstrap需要HTML5文件宣告，這是基本的設定。

排版跟連結 :
bootstrap基本的設定，基本上來說:

• 他已經移除body的margin
• 將body的背景顏色設定為white
• 使用@baseFontFamily, @baseFontSize, 和 @baseLineHeight 屬性作為排版的基礎
• 經由@linkColor來設定整個網站的連結顏色和:hover的下底線
• 以上這些樣式可以在scaffolding.less這個文件找到(scaffolding.less這個文件要下載Download source完整版的才看的到)

基本的網格 :
Bootstrap 網格系統採用12列，使用940px寬度的container是不能作用的，其對應的css，這個網格系統適合724px跟1170px寬的視覺畫面，小於767px的，將會變成流動式的畫面，依照畫面的大小頁面中的區塊將會垂直重疊。
(截圖自官方網站)

對於一個基本的兩攔佈局，建立一個row，然後增加適合的欄位(columna)數目(使用.span*標籤)，對於bootstrap這個以12格的佈局系統來說，其class分別為span1~span12，span右邊的數字加起來總合是12，即為整列的大小。

看個官方網站上的例子:

1. <div class="row">
2. <div class="span4">...</div>
3. <div class="span8">...</div>
4. </div>

在這裡建立一個div，其class 是row
裡面含有span4 跟span8這兩個div
4+8 =12
在這個例子中，我們有span4, span8，共12列和一個完整的列。

網格的留白的功能

官方網站是寫 Offsetting columns ，意思就是如何抵銷你不要的欄位
留白的功能，要在左邊空多少就在該class加上 offset* ，*就是span*的大小。

1. <div class="row">
2. <div class="span4">...</div>
3. <div class="span3 offset2">...</div>
4. </div>

像這頁，這個row，只有兩個class，一個是span4, 一個是span3 ，但是span3的那一個div又加上了offset2的class，表示span3的左邊要空出兩個span的大小。

Layout 基本的佈局 

1.固定佈局
提供一個共同的固定寬度（可選）只需要<div class="container">佈局。(截圖自官方網站)

2.流體佈局
<div class="container-fluid">，創建一個流體，兩欄頁面。(截圖自官方網站)

響應設計 :
響應設計就是Responsive design，簡單來說就是，一旦開啟這個功能，會依照使用者正在使用的媒體界面，調整頁面的寬度，
要啟用響應設計的功能，你只需要加上這幾行在你的head標籤

1. <meta name="viewport" content="width=device-width, initial-scale=1.0">
2. <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

要使用這個功能，一定要下載完整版的bootstrap，否則會找不到assets/css這個路徑，因為不是完整版的根本沒這個路徑。


支援的裝置 :
Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

Label	版面寬度	欄寬	Gutter width
大螢幕	1200px and up	70px	30px
預設大小	980px and up	60px	20px
縱向平板	768px and above	42px	20px
手機到平板	767px and below	Fluid columns, no fixed widths
手機	480px and below	Fluid columns, no fixed widths

1. /* Large desktop */
2. @media (min-width: 1200px) { ... }
4. /* Portrait tablet to landscape and desktop */
5. @media (min-width: 768px) and (max-width: 979px) { ... }
7. /* Landscape phone to portrait tablet */
8. @media (max-width: 767px) { ... }
10. /* Landscape phones and down */

@media (max-width: 480px) { ... }



至於組件怎麼使用，css 怎麼使用，javascript怎麼使用，實作的時候再看看><


Ch06 : 客製化下載

---

Bootstrap提供客製化的下載，你可以只勾選你需要檔案在整個打包下載下來，真方便。
由於第一次接觸這個framework，我決定先改現成的framework作為練習。再慢慢了解如何應用他的組件，Bootstrap對我來說，他的組件設計的真不錯，可以省去很多寫css的時間。