iT邦幫忙

DAY 8
1

當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統系列 第 8

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(8) - 美化網站工具介紹

  • 分享至 

  • xImage
  •  

* 本篇目標

利用一些 CSS Freamwrok 來快速美化我們的網站

* Bootstrap

開發Web目前Bootstrap已經是必備的技能之一了,甚至ASP.NET網站預設網站也已經全面改用Bootstrap, 如下:

我們用Nuget升級到目前的版本 3.2.0

Bootstrap官網已經寫得很清楚,甚至只要看到順眼的樣式,只要指定個html class,就可把html copy下來,

如前兩天的範例,指定table class="table table-bordered" 就會變成很漂亮的帶框線table

其他像input textbox . Button ...也只要套個class,就完成美化了,是不是很方便呢!

* Bootstrap主題 – Bootswatch

Bootwatch網站有提供一些免費的主題,讓我們很容易的輕易去更換網站配色,當然可以去買一些付費的template,如Wrapbootstrap,花幾百塊台幣就可以買到一個很完整的網站版型。接下來介紹一下怎麼使用Bootwatch的免費版型來更改樣網站配色。

點選bootstrap.min.css

點開後應該是一大串的css code,我們把這些貼回專案裡bootstrap.min.css

再將選單文字修改一下,這樣很輕鬆就更換配色了!

* Font Awesome

在以往一些圖示,我們都要設計師做一些ICON,但這個會有一些問題,如設計師死不給(有可能發生)造成時程Delay,或者是ICON大小要做修改,造成失真要重做。Font Awesome是一種以文字呈現圖形的服務,且他跟向量圖一樣是不會隨著大小而失真的,我們一樣使用html標籤 + class 就可以顯示ICON了,且他提供的圖片,我想是非常夠用的。

一樣用Nuget安裝 (有沒有覺得Nuget真的很強大...)

於Layout.cshtml載入.css

接著去官網找合適的ICON

套進class,並使用NG的ng-show來判斷是不是像WebAPI取得資料中,來顯示讀取中圖示

完成圖

* 後記

現代化開發網站已經有很多工具能幫助我們快速開發了,Devopler通常對UI比較沒有概念,另一個就是某些網頁設計師對css html可能還不是那麼熟悉,用一些工具切出來的版會發生可怕(以前受過table包table網頁版的折磨),現在的話,我會用bootstrap來跟設計師討論,因為bootstrap Responsive Web Design (RWD)是做得非常好的,手機網頁看都會自動變成很好閱讀,故設計師主要會做客製化圖片的部分。接下來後面文章都會利用這些工具來製作我們的網站。

最後介紹一個工具 - placehold.it ,一個很方便的網站服務,當我們與設計師討論好某個區塊圖片向素大小為多少時,我們就可以用指定大小的方式來產生圖片,如:

http://placehold.it/350x150

http://placehold.it/50x50

這樣就可以指定於Img標籤,讓我們先有網站大概的版型樣子,不用等設計師設計出來

<img src=’http://placehold.it/350x150’/>

本系列程式原始碼請至我的Github下載 https://github.com/kyleap

** 如內容有誤請告知,將進行修改,謝謝 **


上一篇
[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(7) - 取得WebAPI資料(Angular.js)
下一篇
[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(9)–WebAPI實作分頁
系列文
當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言