Bootstrap- Image、Table與Dropdown

by vivid 9. 九月 2015 09:45

.NET Magazine國際中文電子雜誌
者:許薰尹
稿:張智凱
文章編號:N150916301
出刊日期:2015/09/09
開發工具:Visual Studio 2013 Ultimate Update 4
版本:bootstrap 3.3.4

在這一篇文章中,我們將介紹在Bootstrap中,圖片(Image)、表格(Table)與下拉式清單方塊(Dropdown)的樣式設定。

圖片

在網頁之中,我們經常使用圖片來呈現內容,一張設計良好的圖片可以抵得上千言萬語。以下的網頁程式碼,使用<img>標籤來顯示一張花的照片:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link href="Content/bootstrap.min.css" rel="stylesheet" />

</head>
<body>
  <div class="container">
    <h1>Bootstrap Inage Style</h1>
      <img src="Content/images/flower.jpg" />
  </div>

  <script src="Scripts/jquery-1.9.1.min.js"></script>
  <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>


在這個範例之中,我們使用的圖片,其寬、高超過目前瀏覽器的邊界,因此在瀏覽器上可能無法一次顯示全圖,目前在瀏覽器檢視的結果看起來可能如下圖所示:

clip_image002

圖 1:圖片寬、高超過目前瀏覽器的邊界。

一般我們會設定圖片的寬度、高度來指定圖片的大小,好讓它不要超過網頁的邊界。不過,若使用者動態拖曳瀏覽器視窗的邊角,調整寬、高時,為圖片設定的靜態的寬度、高度就派不上用場了。我們得攔截window的Resize事件來動態處理這個問題。還好Bootstrap幫我們解決了這個麻煩問題,它為圖片提供了「img-responsive」樣式,可以隨著瀏覽器或行動裝置的寬度、高度來動態決定圖片的大小,只要修改上例程式碼如下即可:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link href="Content/bootstrap.min.css" rel="stylesheet" />

</head>
<body>
  <div class="container">
    <h1>Bootstrap Inage Style</h1>
      <img src="Content/images/flower.jpg"  class="img-responsive" />
  </div>

  <script src="Scripts/jquery-1.9.1.min.js"></script>
  <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>


現在若執行網頁,只要調整瀏覽器的寬、高,圖片便隨之放大或縮小,此範例執行的結果看起來如下圖所示:

clip_image004

圖 2:圖片寬、高自動根據目前瀏覽器寬度調整。

美化圖片外框

Bootstrap也提供了許多樣式,幫助美化圖片的外觀,這些樣式包含「img-rounded」、「img-circle」、「img-thumbnail」等等,參考以下範例程式碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link href="Content/bootstrap.min.css" rel="stylesheet" />

</head>
<body>
  <div class="container">
    <h1>Bootstrap Inage Style</h1>
      <img src="Content/images/flower.jpg"  class="img-responsive  img-rounded" />
      <img src="Content/images/flower.jpg" class="img-responsive  img-circle" />
      <img src="Content/images/flower.jpg" class="img-responsive  img-thumbnail" />
   
  </div>

  <script src="Scripts/jquery-1.9.1.min.js"></script>
  <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>


 

當<img>設定為「img-rounded」樣式時,圖片的四邊便呈現圓角;當<img>設定為「img-circle」樣式時,圖片的外框便成圓型;當<img>設定為「img-thumbnail」樣式時,圖片的外框便有一個外框,類似拍立得相片的效果,此範例執行的結果看起來如下圖所示:

clip_image006

圖 3:圖片有多種預設外觀。

Table

HTML的<table>、<tr>、<td>標籤可以用來製定表格式的資料,顯示時類似Excel工作表,以下的程式碼定義一個表格,包含三個欄位:圖片、名稱、說明:

<!DOCTYPE html>
<html>
<head>
    <title>Tables</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
    <div>
        <table>
            <thead>
                <tr>
                    <th>圖片</th>
                    <th>名稱</th>
                    <th>說明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <img src="Images/cat_box.png" />
                    </td>
                    <td>Cat 1</td>
                    <td>
                        Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="Images/cat_cage.png" />
                    </td>
                    <td>Cat 2</td>
                    <td>
                        Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="Images/cat_hiss.png" />
                    </td>
                    <td>Cat 3</td>
                    <td>Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.</td>
                </tr>
                <tr>
                    <td>
                        <img src="Images/cat_poo.png" />
                    </td>
                    <td>Cat 4</td>
                    <td>Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.</td>
                </tr>
            </tbody>
        </table>

    </div>

</body>
</html>

 

這個表格呈現出的效果如下圖所示:

clip_image008

圖 4:顯示表格式的資料。

我們只要為<table>標籤加上「table」樣式,並為其中的圖片加上「img-responsive」樣式,表格的整體外觀就會變更:

<!DOCTYPE html>
<html>
<head>
    <title>Tables</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />

</head>
<body>
    <div class="container">

        <table class="table">
            <thead>
                <tr>
                    <th>圖片</th>
                    <th>名稱</th>
                    <th>說明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <img src="Images/cat_box.png" class="img-responsive" />
                    </td>
                    <td>Cat 1</td>
                    <td>
                        Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="Images/cat_cage.png" class="img-responsive" />
                    </td>
                    <td>Cat 2</td>
                    <td>
                        Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="Images/cat_hiss.png" class="img-responsive" />
                    </td>
                    <td>Cat 3</td>
                    <td>Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.</td>
                </tr>
                <tr>
                    <td>
                        <img src="Images/cat_poo.png" class="img-responsive" />
                    </td>
                    <td>Cat 4</td>
                    <td>Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.</td>
                </tr>
            </tbody>
        </table>

    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

這個網頁的執行結果如下,表頭標題下會多出一條橫線,同樣地每一筆資料下方也會多出一條分隔線:

clip_image010

圖 5:套用table樣式。

讓我們再進一步調整表格的外觀,例如你可以為<table>套用「table-bordered」樣式:

<table class="table table-bordered ">

</table>

如此我們的表格外部與儲存格都會有外框,此範例執行的結果看起來如下圖所示:

clip_image012

圖 6:套用「table-bordered」樣式,表格外部與儲存格都會有外框。

「table-striped」樣式則可以讓單、偶數筆資料以不同的背景顏色呈現,若修改<table>的樣式如下:

<table class="table table-bordered table-striped ">

</table>

此範例執行的結果看起來如下圖所示:

clip_image014

圖 7:套用「table-striped」樣式。

「table-hover」樣式則可以在使用者的滑鼠移動到此資料橫列時,顯示不同的背景顏色,若修改<table>的樣式如下:

<table class="table table-bordered table-striped table-hover ">

</table>

此範例執行的結果看起來如下圖所示:

clip_image016

圖 8:套用「table-hover」樣式。

「table-condensed」樣式會幫儲存格加上內距(padding) ,若修改<table>的樣式如下:

<table class="table table-bordered table-striped table-hover table-condensed ">

</table>

此範例執行的結果看起來如下圖所示:

clip_image018

圖 9:套用「table-condensed」樣式。

Responsive Table

表格的欄位若很多,則在小型的行動裝置上很難顯示所有的內容,Bootstrap為表格定義了「table-responsive」樣式,當瀏覽器寬度太小時,會自動調整表格欄位的寬度,使表格的內容能完整呈現在畫面上。若寬度不夠時,則會自動出現捲軸,若修改上例<table>的樣式如下:

<div class="table-responsive">

<table class="table table-bordered table-striped table-hover table-condensed ">

</table>

</div>

此範例執行的結果看起來如下圖所示:

clip_image020

圖 10:套用「table-responsive」樣式。

Dropdown

要製作下拉式清單,可以利用<button>和<ul>標籤,預設<ul>標籤中的清單項目<l1>不會呈現出來,當使用者按下<button>時,才會把選單項目顯示出來,以下是Dropdown的基本範例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
             margin-top:20px;
        }
    </style>

</head>
<body >
    <div class="container">

        <div class="dropdown">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                myMenu
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Open</a></li>
                <li><a href="#">Add</a></li>
                <li class="divider"></li>
                <li><a href="#">Save</a></li>
                <li class="divider"></li>
                <li><a href="#">Exit</a></li>
            </ul>
        </div>
    </div>

    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

此範例執行的結果看起來如下圖所示:

clip_image022

圖 11:下拉式清單。

我們需要使用一個<div>標籤,將<ul>標籤和<button>標籤包在一起,並套用「btn-group」或「dropdown」樣式。在<button>標籤套用「data-toggle="dropdown"」可以展開、收合清單。而套用「caret」樣式的<span>標籤就成為按鈕上向下的箭頭。「dropdown-toggle」樣式主要是去掉按鈕得到游標時的邊框,若沒有設定此樣式,則點選按鈕時,按鈕將會出現一個藍框,此範例在Chrome瀏覽器執行的結果看起來如下圖所示:

clip_image024

圖 12:沒有設定「dropdown-toggle」樣式。

<ul>標籤設定「dropdown-menu」樣式,就可以讓其中的清單長的像選單,每個<li>項目就成為選單中的一個選項,<a>超連結可以指定當你點選其中的項目時,要跳到哪個頁面或書籤位置。設定「divider」樣式的<li>項目就變成選單清單的分隔線。

為選單加圖示

為選單加圖示可以讓選單變得更美觀,Bootstrap內建非常多的圖示,可供使用,您可以透過官網來查詢這些圖示的名稱:http://getbootstrap.com/components/#glyphicons-glyphs。選擇自己喜好的圖示之後,我們可以使用<span>標籤來為圖示定位,並套用「glyphicon 圖示名稱」樣式,例如以下範例程式碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            margin-top: 20px;
        }
    </style>

</head>
<body>
    <div class="container">
        <div class="dropdown">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                myMenu
                <span class="glyphicon glyphicon-arrow-down"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li>
                    <a href="#">
                        &nbsp;<span class="glyphicon glyphicon-thumbs-down"></span>
                        Open
                    </a>
                </li>
                <li>
                    <a href="#">
                        &nbsp;<span class="glyphicon glyphicon-hand-right"></span>
                        Add
                    </a>
                </li>
                <li class="divider"></li>
                <li>
                    <a href="#">
                        &nbsp;<span class="glyphicon glyphicon-hand-left"></span>
                        Save
                    </a>
                </li>
                <li class="divider"></li>
                <li>
                    <a href="#">
                        &nbsp;<span class="glyphicon glyphicon-hand-up"></span>
                        Exit
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

這個範例的執行結果如下:

clip_image026

圖 13:為選單加圖示。

若有些選單項目沒有圖示,部份有圖示,你可以在沒有圖示的選單項目之<span>標籤內加入空白「&nbsp; 」來對齊文字,舉例來說,若將上例的最後一個選單項目修改如下:

<li>
    <a href="#">
        &nbsp;<span class="glyphicon">&nbsp;</span>
        Exit
    </a>
</li>

 

 

此範例執行的結果看起來如下圖所示:

clip_image028

圖 14:使用「&nbsp; 」對齊文字。

設定選項分組標題

選單中的選項可以分組顯示,你可以利用一個<li>項目,套用「dropdown-header」樣式,來設定選項分組標題,參考以下範例程式碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            margin-top: 20px;
        }
    </style>

</head>
<body>
    <div class="container">
        <div class="dropdown">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                myMenu
                <span class="glyphicon glyphicon-arrow-down"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li class="dropdown-header">
                    File Acccess
                </li>
                <li>
                    <a href="#">
                        &nbsp;<span class="glyphicon glyphicon-thumbs-down"></span>
                        Open
                    </a>
                </li>
                <li>
                    <a href="#">
                        &nbsp;<span class="glyphicon glyphicon-hand-right"></span>
                        Add
                    </a>
                </li>
                <li class="divider"></li>
                <li>
                    <a href="#">
                        &nbsp;<span class="glyphicon glyphicon-hand-left"></span>
                        Save
                    </a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-header">
                    Other
                </li>
                <li>
                    <a href="#">
                        &nbsp;<span class="glyphicon">&nbsp;</span>
                        Exit
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

此範例執行的結果看起來如下圖所示:

clip_image030

圖 15:設定選項分組標題。

使選項無效

若要使選單中的選項無效,可以在代表選項的<li>項目設定「disabled」樣式,例如修改上例程式碼,將Add選項的class設為「disabled」:

 

<li  class="disabled">
     <a href="#">
         &nbsp;<span class="glyphicon glyphicon-hand-right"></span>
         Add
     </a>
</li>

 

此範例執行的結果看起來如下圖所示,當游標停留在Add項目上方時,會出現一個禁止的游標圖示:

clip_image032

圖 16:無效選項。

設定選單方向

預設Dropdown選單是往下展開,若希望能設定它的方向,讓選單往上展開,則可以使用「dropup」樣式,參考以下範例程式碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            margin-top: 300px;
        }
    </style>

</head>
<body>
    <div class="container">
        <div class="dropdown dropup">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                myMenu
                <span class="glyphicon glyphicon-arrow-up"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li class="dropdown-header">
                    File Acccess
                </li>
                <li >
                    <a href="#"   >
                        &nbsp;<span class="glyphicon glyphicon-thumbs-down"></span>
                        Open
                    </a>
                </li>
                <li  class="disabled">
                    <a href="#">
                        &nbsp;<span class="glyphicon glyphicon-hand-right"></span>
                        Add
                    </a>
                </li>
                <li class="divider"></li>
                <li>
                    <a href="#">
                        &nbsp;<span class="glyphicon glyphicon-hand-left"></span>
                        Save
                    </a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-header">
                    Other
                </li>
                <li>
                    <a href="#">
                        &nbsp;<span class="glyphicon">&nbsp;</span>
                        Exit
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

為了要有更多的空間來顯示向上的選單,這個範例為<body>標籤設定了「margin-top: 300px;」樣式,此範例執行的結果看起來如下圖所示:

clip_image034

圖 17:選單往上展開。

使用按鈕群組

前文有提及,設計Dropdown時,需使用一個<div>標籤,將<ul>和<button>包在一起,並套用「btn-group」或「dropdown」樣式。前文的例子中,套用「btn-group」或「dropdown」樣式都能正確運作,外觀看起來差不多。但使用「btn-group」樣式可以有小小的變化,例如以下範例程式碼:

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            margin-top: 50px;
        }
    </style>

</head>
<body>
    <div class="container">
        <div class="btn-group dropdown">
            <button class="btn btn-primary" type="button">
                myMenu
            </button>
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                <span class="glyphicon glyphicon-arrow-down"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li class="dropdown-header">
                    File Acccess
                </li>
                <li>
                    <a href="#">
                        &nbsp;<span class="glyphicon glyphicon-thumbs-down"></span>
                        Open
                    </a>
                </li>
                <li class="disabled">
                    <a href="#">
                        &nbsp;<span class="glyphicon glyphicon-hand-right"></span>
                        Add
                    </a>
                </li>
                <li class="divider"></li>
                <li>
                    <a href="#">
                        &nbsp;<span class="glyphicon glyphicon-hand-left"></span>
                        Save
                    </a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-header">
                    Other
                </li>
                <li>
                    <a href="#">
                        &nbsp;<span class="glyphicon">&nbsp;</span>
                        Exit
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

我們在Dropdown之中加入兩個<button>。第一個<button>顯示文字;第二個<button>則顯示一個向下的箭頭,當使用者點選第二個<button>才將清單顯示出來,此範例執行的結果看起來如下圖所示:

clip_image036

圖 18:使用按鈕群組。

Tags:

.NET Magazine國際中文電子雜誌 | Bootstrap | 許薰尹Vivid Hsu

評論 (52) -

cours de theatre
cours de theatre United States
2017/9/30 上午 10:25:31 #

Really informative article.Really thank you! Cool.

回覆

can ho osimi
can ho osimi United States
2017/10/7 上午 01:27:07 #

Im thankful for the blog post.Really thank you! Fantastic.

回覆

Osimi sea view
Osimi sea view United States
2017/10/9 下午 07:15:10 #

I truly appreciate this article post.Much thanks again. Fantastic.

回覆

Buy illegal backlinks
Buy illegal backlinks United States
2017/10/12 下午 09:54:13 #

Thanks so much for the article post. Much obliged.

回覆

you can check here
you can check here United States
2017/10/14 下午 05:10:06 #

Thanks-a-mundo for the article post. Fantastic.

回覆

dragon city hack latest version
dragon city hack latest version United States
2017/10/15 下午 04:40:43 #

Appreciate you sharing, great blog.Thanks Again. Cool.

回覆

check that
check that United States
2017/10/17 下午 03:58:32 #

Really enjoyed this post. Fantastic.

回覆

sletrokor
sletrokor United States
2017/10/17 下午 09:30:44 #

I am so grateful for your blog.Thanks Again. Cool.

回覆

porn
porn United States
2017/10/19 上午 08:34:17 #

I really enjoy the blog.Really looking forward to read more. Fantastic.

回覆

click here for info
click here for info United States
2017/10/19 下午 07:37:18 #

Im grateful for the blog. Really Great.

回覆

prix carte grise
prix carte grise United States
2017/10/21 上午 08:34:14 #

Thanks for the blog.Thanks Again. Fantastic.

回覆

dweebs
dweebs United States
2017/11/1 下午 01:03:37 #

I loved your post.Really thank you! Fantastic.

回覆

phenocal review
phenocal review United States
2017/11/1 下午 08:40:04 #

Great article.Thanks Again. Fantastic.

回覆

phentaslim
phentaslim United States
2017/11/3 上午 09:03:41 #

Looking forward to reading more. Great blog article.Really thank you! Much obliged.

回覆

can sciatica pain return after surgery
can sciatica pain return after surgery United States
2017/11/15 上午 07:43:26 #

Enjoyed every bit of your article.Much thanks again. Cool.

回覆

avocat criminel quebec
avocat criminel quebec United States
2017/11/16 下午 06:19:02 #

I really enjoy the blog.Really thank you! Really Cool.

回覆

bikinis
bikinis United States
2017/11/23 下午 09:47:06 #

I truly appreciate this blog.Thanks Again. Much obliged.

回覆

Chad Boonswang and Jeffrey Goodman
Chad Boonswang and Jeffrey Goodman United States
2017/11/26 下午 05:54:23 #

Thanks-a-mundo for the blog article.Thanks Again. Much obliged.

回覆

Chad Boonswang SEO
Chad Boonswang SEO United States
2017/11/26 下午 11:59:18 #

Very good post.Really looking forward to read more. Really Cool.

回覆

cash for cars scammer
cash for cars scammer United States
2017/11/29 下午 04:21:05 #

Thanks-a-mundo for the article post.Much thanks again. Really Cool.

回覆

Opal Skyview
Opal Skyview United States
2017/11/29 下午 10:57:09 #

Im thankful for the article.Really thank you! Want more.

回覆

Get Business Credit
Get Business Credit United States
2017/12/1 上午 12:46:42 #

Awesome article post. Awesome.

回覆

porno
porno United States
2017/12/1 下午 04:26:42 #

Thank you ever so for you article post.Really looking forward to read more. Much obliged.

回覆

ICO
ICO United States
2017/12/3 上午 04:45:29 #

Great post.Thanks Again. Much obliged.

回覆

mobile hentai
mobile hentai United States
2017/12/5 上午 09:32:35 #

Thanks so much for the article.Really looking forward to read more. Really Cool.

回覆

Say, you got a nice post. Keep writing.

回覆

Major thanks for the article post.Really looking forward to read more. Awesome.

回覆

floral law
floral law United States
2017/12/10 下午 07:09:51 #

Very neat article post.Really looking forward to read more. Great.

回覆

Reynalda Ciulla
Reynalda Ciulla United States
2017/12/14 上午 09:17:06 #

wow, awesome blog article. Much obliged.

回覆

additional reading
additional reading United States
2017/12/14 下午 04:08:27 #

Very good blog. Awesome.

回覆

Hanukkah
Hanukkah United States
2017/12/14 下午 10:39:46 #

Very good post.Much thanks again. Fantastic.

回覆

canon drivers
canon drivers United States
2017/12/16 下午 05:50:36 #

Thanks-a-mundo for the post.Really thank you! Fantastic.

回覆

lose weight
lose weight United States
2017/12/17 上午 12:07:50 #

Major thankies for the blog. Great.

回覆

I loved your article post.Really thank you!

回覆

Processes
Processes United States
2017/12/17 下午 05:31:28 #

Great, thanks for sharing this article.Much thanks again. Cool.

回覆

homeworking
homeworking United States
2017/12/20 下午 06:43:59 #

Appreciate you sharing, great article.Much thanks again. Want more.

回覆

canon drivers
canon drivers United States
2017/12/23 上午 10:11:14 #

This is one awesome article post.Much thanks again. Fantastic.

回覆

Darwin Horan
Darwin Horan United States
2017/12/23 下午 08:40:51 #

Muchos Gracias for your blog post.Really thank you! Really Great.

回覆

Wow, great article post.Really looking forward to read more. Will read on...

回覆

hp driver
hp driver United States
2017/12/25 下午 10:08:27 #

Looking forward to reading more. Great article.Really looking forward to read more. Fantastic.

回覆

Wow, great blog.

回覆

SOCCER HIGHLIGHTS
SOCCER HIGHLIGHTS United States
2017/12/26 下午 02:11:39 #

A big thank you for your post.

回覆

canon printer series
canon printer series United States
2017/12/27 下午 04:43:40 #

wow, awesome article. Really Great.

回覆

drivers hp
drivers hp United States
2018/1/2 上午 07:27:50 #

I really enjoy the article post.Really thank you! Cool.

回覆

more helpful hints
more helpful hints United States
2018/1/2 下午 03:26:43 #

I really like and appreciate your post. Keep writing.

回覆

Really appreciate you sharing this article.Really thank you! Much obliged.

回覆

Epson drivers
Epson drivers United States
2018/1/3 上午 06:47:00 #

Muchos Gracias for your blog.Really thank you! Cool.

回覆

online casino usa real money
online casino usa real money United States
2018/1/4 下午 05:21:13 #

Really appreciate you sharing this blog post.Much thanks again. Will read on...

回覆

hp printer driver
hp printer driver United States
2018/1/5 下午 07:39:31 #

Muchos Gracias for your post. Really Great.

回覆

FBA
FBA United States
2018/1/6 上午 11:44:40 #

Great, thanks for sharing this post.Really looking forward to read more. Really Cool.

回覆

colocation chicago
colocation chicago United States
2018/1/10 上午 07:16:30 #

Thanks-a-mundo for the article post.Really thank you! Awesome.

回覆

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List