2012年4月10日 星期二

Bootstrap 於 Asp.net 的基本使用

Bootstrap 為一個 Open Source ( 開放程式碼 ) 的前台開發工具包,是一個簡單、靈活的 HTML、CSS、Javascript 的 UI 套件。
通常好的 UI 能讓瀏覽者多留 3 - 5 秒,當然,最重要的還是內容。但是可以因為這 3 - 5 秒讓瀏覽者注意到內容,那 UI 算是很重要的一塊。
Bootstrap 使得網頁開發者不需要再為 UI 介面設計所煩惱,它提供了整體化的設計和網頁控制項的美化,要單用或全用都很方便,引入 css 檔案或 js 檔案,在配合 css class 的使用,即可達到美化作用。

以下就介紹 Bootstrap 於 Asp.net 的使用流程:

1.

首先到 Bootstrap 下載檔案

2.

下載完解壓縮出來會有以下路徑資料夾

3.

在 css 下有兩個檔案,分別為 bootstrap.css 和 bootstrap.min.css

4.

將這兩個檔案複製下來,放入 Asp.net 專案內的 css 分類資料夾下

5.

接著在主板頁面 ( *.master ) 或者是網頁 ( *.aspx、*.html ) 中引用

6.

在頁面上可以先做個實驗,拉一個按鈕 ( Button ) 到頁面上

7.

回到 Bootstrap 的官方網頁,看看Bootstrap 按鈕如何使用

8.

最後我們可以套用 css,在 Asp.net 有 Intellisense ( 智能提示 ) 可以方便的套用,這個案例我們使用的類別是 btn btn-primary

9.

最後執行後就可以看到套用的是否成功,LOOK,是不是很舒服?


回aspnet目錄
回首頁

1 則留言 :

Related Posts Plugin for WordPress, Blogger...