orientation: landscape

橫版 或是 橫向

orientation: portrait

直版 或是 直向 或是 縱向

具體看過 w3schools 的範例之後，就會發現，
橫向就是寬大於高，例如 1920 x 1080
直向就是高大於寬，例如 1080 x 1920

用這個設定來進行版面佈局的調整

會比用不同寬度的呈現更好，當然也可以根據寬度加上直向或橫向的組合去進行更細微版型佈局的控制，這樣不同裝置上面的呈現就會更妥當。

參考連結：

• orientation – CSS: Cascading Style Sheets | MDN

看 source 裡面有 codepen 的 連結

剛好這次的需求，要多一個直向與橫向的呈現要不一樣

就自己 fork 了一個 版本來貼給大家看

主要是透過CSS去調整版型

@media screen and (orientation: portrait) {
   /* Top block will contain the gallery */
   .fancybox-stage {
     height: 52%;
     background: #fff;
   }
 /* Bottom block - close button and the form */
   .fancybox-form-wrap {
     position: absolute;
     left: 40px;
     right: 40px;
     bottom: 0;
     height: 48%; 
     background: #fff;
   }
 }
 @media screen and (orientation: landscape) {
   /* Left block will contain the gallery */
   .fancybox-stage {
     width: 52%;
     background: #fff;
   }
 /* Right block - close button and the form */
   .fancybox-form-wrap {
     position: absolute;
     top: 40px;
     right: 0;
     bottom: 40px;
     width: 48%; 
     background: #fff;
   }
 }

orientation: portrait 為直向的版型，上面是圖，下面是文字

orientation: landscape 為橫向版型，左邊是圖，右邊是文字，(這個demo原來就是這樣放)

PS:

附上這個 CSS屬性的 說明與版本適用表

有興趣想知道更多版型分享也歡迎留言或是到我的TG群組發問唷

1. 設計 Design
2. 前端 Develop
3. 產品 Product
4. 運營 Operate

有空也要來備份這個站的資源，真是很豐富呢
 

1. 保持你的版面簡單 (KEEP YOUR LAYOUT SIMPLE)
2. 使用媒體查詢 (USE MEDIA QUERIES) + MOST FREQUENT RESOLUTIONS
3. 定義中斷點 (DEFINE THE BREAKPOINTS)
4. 讓你的版型更靈活 (MAKE YOUR LAYOUT FLEXIBLE)
5. 正確呈現你的圖片 (MAKE YOUR PICTURES BEHAVE)
6. 別忘記 MAX & MIN (DON’T FORGET MAX&MIN)
7. 產生最好的相對性內容 (MAKE MOST THINGS RELATIVE)
8. 當使用手機端，要線性思考設計 (WHEN MOBILE LINEARIZE)
9. 省略非必要的內容 (SKIP THE NON ESSENTIAL CONTENT)
10. 確認你的META VIEWPORT (CHECK YOUR META VIEWPORT)

這些專有名詞真是不好翻譯呢
每一點都可以寫一篇獨立文章呢
看來之後文章的題材又增加不少了
原始連結
https://www.pinterest.com/pin/162270392798680920/

補充：

1. 第三個結果 『Bootstrap Snippet Social Buttons for … – Bootsnipp.com』
   這頁面上的社交登入按鈕只有 12個 網站的，應該是舊版
2. lipis.github.io/bootstrap-social 原站的社交登入按鈕有 21個網站
   去查了一下，現在版本是 5.1.1，12個 按鈕是 3.0.0
   仔細看了看，應該是 Font Awesome 的版本差異
   bootsnipp分享的版本是 Font Awesome 4.0.3
   現在 bootstrap-social 的 Font Awesome 版本為 4.7
3. bootsnipp.com 這個站感覺挺不錯的
   可以使用很多個CSS Frameworks分享製作成果

   ---

   

4. 也用 alternativeto.net 找了一下 bootsnipp.com
   類似服務果然真的不多
   只有 jsFiddle、CodePen
   不過 alternativeto.net 的資料關聯真的不精準
   有機會來寫一篇關於【線上前端作品分享平台】的文章好了
5. 【Social Buttons for Bootstrap】首頁上有個很大的宣傳連結
   

   ---

   
    New GitHub Stats  這個站應該是作者自己做的
   上面有github的統計資料，感覺可以挖出很多有趣的關係

Favicon Generator for all platforms: iOS, Android, PC/Mac…
http://realfavicongenerator.net/

真的有這網站，可以產生適用於所有平台的 favicon
當然上傳的時候他也建議要 260×260 以上的圖片
沒有的話，至少要有 70×70 以上
上傳照片以後，會跳轉到第二頁
這篇可以針對一些特別的裝置去另外獨立設定 favicon
基本上沒有特別需求就到最下方去點選產生的按鈕
接下來就會產生出對應的HTML語法
跟需要下載的 favicon 檔案(點選 “Favicon package”可以下載整包)
他也提供你放好 favicon 以後的確認器
(http://realfavicongenerator.net/favicon_checker)
另外，剛好也看了看 favicon 的 wiki頁面
原來微軟跟 favicon 的關係匪淺啊
RealFaviconGenerator 也有 github頁面
官方的部落格 也有提供一些滿不錯的相關文章
官方的FAQ 裡面的說明也是建立圖示的一些建議說明，也值得看看
在 alternativeto.net 上面也可以 找到其他替代方案
也補充一下寫文章時查到的其他文章

• pressing.space | Favicon – 關於我的最愛圖示的二三事 – pressing.space
  說明了很多最愛圖示的使用技巧
• 前端好資源
  列出許多前端好用的工具
• 如何產生網頁圖示（favicon）並且符合各家瀏覽器規格
  有講到 identicon 這個東西，大家也可以參考看看

1. 2015.08.19 – Bootstrap 4 alpha 1
2. 2015.12.08 – Bootstrap 4 alpha 2
3. 2016.07.27 – Bootstrap 4 Alpha 3
4. 2016.09.05 – Bootstrap 4 Alpha 4 (new)
5. 2016.10.19 – Bootstrap 4 Alpha 5 (new)
6. 2017.01.06 – Bootstrap 4 Alpha 6 (new)

最新的 release文章也有提到
之後就進入
看來今年2月應該就可以進入Beta1
順利的話應該四月或五月就可以看到正式的Bootstrap 4的釋出了

官方也有說到

The general development and release plan looks something like this:

• A few alpha releases while things are still in flux.
• Two beta releases after features and functionality are locked down to really test things out.
• Two release candidates (RCs) to really test things out closer to production environments.
• Then, the final release!

看起來應該還要一陣子
有去issue看了一下資料
現在正在close alpha 4的issue
後面還會有alpha 5跟alpha 6
之後應該就會接beta 1、beta 2
還有RC1、RC2
照舊有的紀錄推斷，正式release可能是明年年底，到後年年中之間吧

1. Froala
2. ContentTools
3. Raptor Editor
4. Aloha Editor
5. TinyMCE
6. bootstrap3-wysiwyg
7. Summernote
8. CKEditor
9. Trumbowyg
10. Redactor

其他文章：
20 Awesome WYSIWYG and jQuery Text Editor Plugins – DesignHuntR
25+ jQuery Wysiwyg Editor Plugin with Example Demo

語法高亮有找到支援滿多語法跟樣式的js lib
highlight.js
Github上面應該是最多人star的repo了
支援顯示的程式語言166種
能選擇的樣式有77種