6. BootStrap各式應用

一、 安裝jquery

1. bootstrap和所見即所得編輯器都需要jquery（需多功能也都需要）
2. jquery官網：http://jquery.com/download/
3. 找到jquery下載連結，直接按滑鼠右鍵，選「另存鏈結」即可下載jquery的js檔。
4. 存至eznews下即可。接著在</head>之前加入以下語法：

   <!-- 加入 jQuery -->
   <script src="jquery-1.11.1.min.js"></script>

二、 讓BootStrap3離線也可以執行（直接下載）

1. 英文官網：http://getbootstrap.com/getting-started/#download
2. 中文官網：http://v3.bootcss.com/getting-started/#download
3. 解壓縮後，請將dist改名為bootstrap3以方便辨識。
4. 在jquery之後加入以下語法：

   <!-- 加入Bootstrap -->
   <link href="bootstrap3/css/bootstrap.min.css" rel="stylesheet">
   <!-- HTML5 shim and Respond.js 是給 IE8 可以支援部份 HTML5 元件用的 -->
   <!-- 注意：若是用點兩下的方式（即file://）開啟此檔，那 Respond.js 是不會運作的-->
   <!--[if lt IE 9]>
     <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
     <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
   <![endif]-->
   <!-- 引入一些 加入Bootstrap 外掛（plugins） -->
   <script src="bootstrap3/js/bootstrap.min.js"></script>

三、 安裝font-awesome

1. 免費的向量圖示，可放大縮小，並且可以套顏色，編輯器會用到（否則按鈕會沒圖示）
2. 官網：http://fortawesome.github.io/Font-Awesome
3. 解壓縮後，請將font-awesome-4.2.0改名為font-awesome以方便辨識。
4. 在bootstrap之後加入以下語法：

   <!-- 引入 font-awesome 向量圖示-->
   <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">

四、 Summernote編輯器

1. 官網：http://hackerwins.github.io/summernote/
2. 解壓後，將裡面的dist資料夾複製到eznews下，並改名為 summernote
3. 語系下載：https://github.com/HackerWins/summernote/tree/master/lang
4. 點進summernote-zh-TW.js，在「Raw」按鈕上按滑鼠右鍵，將鏈結另存新檔，並存至 summernote目錄下即可，注意副檔名必須保持為.js。
5. 在font-awesome之後加入以下語法：

   <!-- 引入 summernote 的 css 和 js 檔-->
   <link href="summernote/summernote.css" rel="stylesheet">
   <script src="summernote/summernote.min.js"></script>
   <!-- 載入 summernote 中文語系 -->
   <script src="summernote/summernote-zh-TW.js"></script>
   <script>
   $(document).ready(function() {
     $('#summernote').summernote({
         height: 300 ,
         lang: 'zh-TW'
       });
   });
   </script>

6. 接著在<textarea>中加入id="summernote"就大功告成了！
7. 利用所見即所得編輯器，顯示時不再需要nl2br()。
8. 由於該編輯器會將圖檔直接存到資料庫，故news_content的種類可能要從原本的text改為longtext，以避免圖檔太大存不進去。

五、 加個日期挑選器

1. 官網：http://www.bootcss.com/p/bootstrap-datetimepicker/
2. 解壓縮後，請將目錄改名為bootstrap-datetimepicker以方便辨識。
3. 刪除不必要目錄，只留下js和css即可。
4. 在引入編輯器之後加入：

   <!-- 載入 bootstrap-datetimepicker -->
   <link href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
   <script type="text/javascript" src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
   <script type="text/javascript" src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-TW.js" charset="UTF-8"></script>

5. 在jquery設定中加入：

   $('#datetimepicker').datetimepicker({
     format: 'yyyy-mm-dd hh:ii',
     language: 'zh-TW'
   });

6. 用PHP抓取現在日期時間：date("Y-m-d H:i:s")
7. date() 函數完整用法：http://php.net/manual/en/function.date.php

六、 建立一個分類資料表eznews_cate

1. 分類編號（cate_sn ）、分類標題（cate_title）即可。
2. 新聞的資料表也記得要加入分類編號（cate_sn ），如此才能關聯起來。
3. 並請重新匯出SQL檔。
4. 在發布新聞的表單建立一個分類輸入框
5. 儲存（或更新）時，若輸入框有內容則儲存至此資料表，並抓取存入的流水編號：

   $cate_sn=mysql_insert_id();

6. 接著讀出所有eznews_cate中的分類資料，製作一個下拉選單。
7. 將此選單置入發布新聞的表單中，和新增分類的欄位並存。
8. 之後，只要挑選分類選單即可，除非有填寫新增分類的欄位。

七、 行動裝置上看起來的樣子

八、安裝 WebDeveloper 附加元件

1. WebDeveloper 附加元件：https://addons.mozilla.org/zh-tw/firefox/addon/web-developer/
2. WebDeveloper 1.2.5 正體中文包，修改自 http://blog.yanwen.org/archives/1406.html
3. 其中幾個很實用的功能：
   • 表單：顯示表單細節
   • 其他功能：顯示尺標
   • 標記：標記表格：標記表格單元格
   • 查看源代碼：查看處理後的源代碼

九、好文推薦

• OMG～只過了一個月，我居然看不懂當初自己寫的程式