簡單的Bootstrap(v 2.3.2版)效果與入門教學 -- 響應式網頁 / 自適應網頁(Responsive Web)設計

摘要:簡單的Bootstrap(v 2.3.2版)效果與入門 -- 響應式網頁 / 自適應網頁(Responsive Web)設計




 

 

 

 

VS 2013採用了 Bootstrap,就跟當年內建 jQuery一樣令人驚喜

 

使用 Bootstrap來呈現網頁,不管是大螢幕 或是 小螢幕(手機、平板)

都能展現出最佳畫面(如下圖所示,我用各種不同的瀏覽器大小來觀賞)

 

網頁程式設計師,可以透過一個網頁,對應各種平台(不同解析度畫面)的使用者

也就是 響應式網頁(Responsive Web / 自適應網頁)的設計

 

****************************************************************************************************************************

這篇文章解釋的清楚: http://lms.tzuchi.com.tw/epaper/artical/index.php?id=file/34/digiinfo_0

響應式網頁設計(Responsive Web Design)概念於2010年5月由國外著名網頁設計師Ethan Marcotte所提出的概念。
 
簡單的來說讓網站可以針對不同設備(桌機、筆電、平版、手機)等不同尺寸螢幕瀏覽網頁時,整個網頁頁面會對應不同的解析度,而有不同的呈現方式,也是是說可以讓最重要的訊息在有限的版面中清楚的呈現給用戶。.... 詳見全文

 

這位前輩(Ethan Marcotte)也出了一本同名書,名為 Responsive Web Design

您可以從這本書的電子版(電子書)介紹網頁,看到他想表達的意境。

請看這裡:http://www.abookapart.com/products/responsive-web-design

               (建議您連過去,看一下圖片)

 

****************************************************************************************************************************

 

 

下圖表示:依照不同解析度的螢幕,圖片與排版會自動縮小(如下圖左側)

 

下圖表示:兩種不同大小的畫面,用來呈現同一個網頁

             (中央、右側代表細長型的觀賞畫面)

 

==== 入門簡介與概論 ====

建議您先看過這幾篇(中文)文章後,再來進行下去:

http://blog.darkthread.net/post-2013-06-12-bootsrap-and-kendo-ui.aspx
(後續範例將會使用 黑暗執行緒 前輩在文章中用到的 Sample)

http://fundesigner.net/twitter-bootstrap/

這個作者有一個 Demo 網頁給您測試
 

 

 

==== Bootstrap網站與文件(中文版) ====

Bootstrap的網頁,已經被微軟MVP-- 陳傳興老師(KingKong Bruce)翻譯成正體中文了

提醒您,本文後續內容是採用 2.3.2版來進行。

 

 

正體中文版網站 -- Bootstrap  (http://kkbruce.tw/)

點選上下兩張圖片,可以連結到正體中文版網站 -- Bootstrap  (http://kkbruce.tw/)

 

我們先從網站上,「下載」必要的檔案(例如:CSS or jQuery等等)

放在自己的網站內備用。

上面的範例很詳細,照著看一遍或是Copy下來使用,就能作出一樣的效果。

網站上有很多說明文件,就算基礎是零,在家自修也可以跟得上。

 

 

==== 小試身手(先看再做) ====

 

如同一開始提到的入門簡介(與推薦文章),我們先用一個簡單的範例來試試看

這個範例是 黑暗執行緒前輩的範例(點下圖可以看見他的原文)

 

包含了:網站標題、導覽列、搜尋(文字方塊 / TextBox)

             下方還有表格(GridView)與按鈕(Button)...........我們會把這些效果與外觀,搭配 ASP.NET的 Web控制項

===================================================================================================

提醒您,本文後續內容是採用 2.3.2版來進行。

1.  從 Bootstrap下載的檔案,解開後請放在您的網站內

     網頁需要在 <head>裡面增添下列的CSS與 .js檔。

 

2.  導覽列的內容如下。

     我們可以看見許多 <li>標籤,代表每一個連結點。

 

3.  下拉式選單,跟我們ASP.NET的 DropDonwList(或是 清單控制項)有比較大的差異。

     我們可以看見他大量使用 <li>標籤搭配 <a>超連結標籤,做出類似「下拉式選單」的外觀,

     但骨子裡面其實都是超連結URL 

 

 

 

4. 表格的外觀,可以改成圓角。

    或是大家熟悉的「光棒」效果,滑鼠經過(MouseOver / Hover)就改變底色....

    點選下圖,可以連結到 http://kkbruce.tw/Bootstrap/BaseCSS#tables 觀看更多說明

 

加到 ASP.NET GridView裡面也不難吧?

 

4. 按 鈕  有多種配色,我覺得很實用。  

    點選下圖可以連結到 http://kkbruce.tw/Bootstrap/BaseCSS#buttons   觀看更多說明

 

改用 ASP.NET Button控制項也沒什麼變化...............

   親手作作看都不難,     只靠眼睛看(不動手)...永遠都很難!

 

Sorry....上圖的class="... dropdown-toggle"後面的關鍵字 是不必要的,請刪除。

 

5. 圖片與排版......

    點選下圖會連結到 http://kkbruce.tw/Bootstrap/BaseCSS#images  觀看更多說明

提醒您,本文內容是採用 2.3.2版來進行。

 

 

我是一個沒有學過 CSS與 jQuery的人

只接觸過簡單的  HTML標籤與網頁、有寫過簡單的 JavaScript

(基礎接近於零)

 

但我把文章看過一次,把範例放到 ASP.NET裡面看看成果,就知道該怎麼下手了

(不要在「」了!要動手做~)

 

本文範例下載:Book_Samples_BootStrap.rar

 

2013/9/27補充:

VS 2013將搭配 Bootstrap 3.0.0

上面的範例需要部分修正,請到此下載 http://www.dotblogs.com.tw/mis2000lab/archive/2013/09/27/bootstrap_300_20130927.aspx

 

我之前參閱了這本書,吸收得比較順暢 -- [好書推薦]簡體中文 -- Implementing Responsive Design(響應式Web設計實踐)

 

 

知識,因為 分享 而偉大

 

更多說明與範例,請參閱  正體中文版  Bootstrap網站   (http://kkbruce.tw/)

 

 

相關文章:

 
......我該寫一份 Mobile APP 或是 套用網頁(改成 響應式網頁)就好呢???
 
 

 

 

 

 

 

下一篇文章:幫您的VS 2012 /2013安裝智慧手機模擬器(iOS / Android),來瀏覽畫面

    

 

 

 

 

我將思想傳授他人, 他人之所得,亦無損於我之所有;

猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----Thomas Jefferson

寫信給我,不要私訊 --  mis2000lab (at) yahoo.com.台灣  或  school (at) mis2000lab.net



ASP.NET遠距教學、線上課程(Web Form + MVC)。 第二門 課程「四折」-- 以MVC課程 作優惠。
第一天課程, "完整" 試聽。  如不滿意  全額退費!
................   facebook社團   https://www.facebook.com/mis2000lab   ......................

................  YouTube (ASP.NET) 線上教學影片  http://goo.gl/rGLocQ

*********************************************************************************************

*** ASP.NET MVC線上課程 第一天 免費看 (5.5小時) *** 

************************************************************(歡迎索取,免費申請)*****

 

Blog文章 "附的範例" 無法下載,請看 這裡 ...... https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍(嚴格認定)

......................................................................................................................................................

...................................................................................................................................................... 

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講

事先錄製好的影片,並非上課時側錄!   觀看影片時,有如我「一對一」跟您面對面講課

 

    MIS2000 Lab.  線上教學影片(YouTube) **免費觀賞**