2016年6月16日 星期四

[研究] Bootswatch 網站 Yeti 免費佈景主題 (theme, CSS, template)試用

[研究] Bootswatch 網站 Yeti 免費佈景主題 (theme, CSS, template)試用

2016-06-16

Bootstrap 是世界最受歡迎的行動優先和自適應前端框架。
https://zh.wikipedia.org/wiki/Bootstrap

Bootswatch 提供了多種 Bootstrap的免費布景 ( Free themes for Bootstrap),Yeti 是其中一種,它用層疊樣式表(英語:Cascading Style Sheets,簡寫CSS)語法撰寫。
http://bootswatch.com/

Yeti theme CSS 需要 Bootstrap JavaScript,而 Bootstrap 需要 jQuery

下面測試用 Visual Studio 2015 with Update 2 進行,瀏覽器 IE 11 ( Internet Explorer 11) 和 Google Chrome 51 測試。

(下圖) 建立一個方案,建立 css 目錄 (或你想要的名稱)








(下圖) 去 Bootswatch 網站下載 bootstrap.css 到方案的 css 目錄
http://bootswatch.com/

使用 bootstrap.min.css 也可,它是 bootstrap.css 檔案較小的版本,內容相同,但是不具閱讀性。






(下圖) 用 NuGet 把 BootStrap JavaScript 加入方案 ( jQuery 也會自動被加入)




(下圖) 注意 .css 要拖到 <head> 和 </head> 之間,jquery.js 要在 bootstrap.js 之前



(下圖) 接下來看想要在網頁中使用哪種佈景樣式,把程式碼複製到網頁程式中




(下圖) 測試成功


(完)

沒有留言:

張貼留言