研發記錄簿-Paladin

2016年8月26日星期五

用Aspose替 PDF 加上底圖

如果一張獎狀的 PDF 檔，內容長得如上圖，會不會覺得哪裡怪怪的？沒錯，少了「框線」。

接下來想要透過 Aspose 工具，來把這張 PDF 檔加上框線。而這原理，可以簡單的想成把 PDF 檔案加上底圖。

首先，先找好一個有框的底圖。大概像下面這樣：

BackGround.png

接著，就可以透過 Aspose 的 Document 物件，來取得原先的 PDF 檔案。這時候的 Document ，可以視為 PDF 的代表。

Document pdfDocument = new Document("PDF來源");

一份 PDF 檔案，可能會有很多頁(Page)，所以，透過 Page 物件，可以讓我們指定要控制第幾個頁面。而這裡的頁面標示，則是從 1 開始算起。

Page pdfPage = pdfDocument.Pages[1];

ImageStamp 則是接下來的主角，他就好比我們的橡皮圖章一樣，待會會蓋在每個頁面上。若用圖層的觀點來看，就有所謂的上下之分，這時，可以利用 ImageStamp 的 Background 屬性來決定，決定這個橡皮圖章的內容是要完全蓋過原先的內容，還是只是當個背景。如果需要微調 ImageStamp 的大小，則有 Width、Height 可以設定。

ImageStamp imgStamp = new ImageStamp(strStampFullPath);

完整程式可以簡述如下：

class PdfFunction
{
    public void AddBackGroundIMG(string PDFPath)
    {

        string setupFile = "BackGround.png";

        //取得執行路徑
        string strExecPath = Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().Location);
        //取得檔案的完整路徑
        string strStampFullPath = string.Format("{0}\\{1}", strExecPath, setupFile);

        //設定 license
        Aspose.Pdf.License license = new Aspose.Pdf.License();
        license.SetLicense(string.Format("{0}\\{1}",strExecPath , "Aspose.Total.lic"));


        //透過 Aspose 的 Document 物件，來取得原先的 PDF 檔案
        Document pdfDocument = new Document(PDFPath);
        Page pdfPage;
                       

        for (int i = 0; i < pdfDocument.Pages.Count; i++)
        {        
            //Aspose 是從 1 開始算的
            pdfPage = pdfDocument.Pages[i + 1];

            //取得外部圖片並指定為 ImageStamp 格式
            ImageStamp imgStamp = new ImageStamp(strStampFullPath);

            //將加入的圖片指定設為背景
            imgStamp.Background = true;

            //設定圖片長寬
            imgStamp.Width = 850;
            imgStamp.Height = 600;

            //將底圖加入到 PDF 頁面
            pdfPage.AddStamp(imgStamp);

        }


        // 產出新檔案
        pdfDocument.Save(string.Format("{0}\\{1}", strExecPath, "out.pdf"));

    }
}

要使用時，則是如下呼叫：

class Program
{
 static void Main(string[] args)
 {
  string setupFile = "award.pdf";

  //取得執行路徑
  string strExecPath = Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().Location);
  //取得檔案的完整路徑
  string strStampFullPath = string.Format("{0}\\{1}", strExecPath, setupFile);

  PdfFunction oP = new PdfFunction();
  oP.AddBackGroundIMG(setupFile);
 }
}

最後，有框的獎狀就會像下面這樣子：

Ref:
01：how to insert a watermark image into existing .pdf

2016年8月24日星期三

透過 BlockUI 產生遮罩效果

當預期後端 Server 的處理時間會很久時，總是希望讓使用者知道系統還活著，只是正在處理中。這時，就會希望有個「遮罩」效果，讓背景呈現灰階、甚至放一個動態 .gif 圖檔來表示。

網路上蠻多推薦 BlockUI 的文章，自己實際去練習，發現還蠻容易上手的。

首先，必須先把會用到的 .js 抓回來。 ( jQuery, BlockUI )
然後在網頁上引用他們。

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>

而使用 BlockUI 的方法則是：

$.blockUI({ message: '<div>處理中! </div>' });

不過，為了讓等待時不枯燥無聊，所以另外放了一個會動的 .gif 圖檔。可以到 ajaxload 去客製化自己喜歡的動態圖檔再下載使用。

完整程式如下：

Test.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
    <style>
        .divAlert 
        {
            color:Red;
            font-size:18px;
            line-height:25px;            
            vertical-align:middle;
        }
    </style>
    <script>
        $(function () {
            $("input[id$=btn01]").click(function () {
                $.blockUI({ message: '<div class="divAlert">處理中! &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img width="20px" src="./images/loader-red.gif"></img></div>' });  
            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:Button ID="btn01" runat="server" Text="點選" onclick="btn01_Click" />
    
       
        </div>
    </form>
</body>
</html>

Test.aspx.cs

using System.Threading;


protected void btn01_Click(object sender, EventArgs e)
{
    //讓程式跑久一點... 5 秒
    Thread.Sleep(5000);        
}

參考：
01：ajaxload
02：BlockUI Plugin - 功能完善的頁面、訊息遮罩
03：使用 jQuery 的blockUI 顯示讀取中

2016年7月12日星期二

泛型 generic

好久好久以前，學習 C# 應該有聽過 ArrayList 這個類別。還蠻好用的，不僅僅可以把字串丟進去，數字也可以，自訂的類別也可以，甚至...你要混搭，混著丟也可以。

ArrayList al = new ArrayList();
al.Add("字串");
al.Add(66);
al.Add(new Student("1","paladin"));

如同上面的例子，似乎什麼樣的型別，都可以放進 ArrayList，主要是因為 ArrayList 把裡面所有的內容都包裝(Boxing)成「物件(Object)」型別了，換句話說，ArrayList 裡面放的，都是 Object 型別。像這樣的特性，我們又把他歸類為：非泛型集合(nongeneric collection)。可想而知，這種非泛型集合，雖然可以讓你隨性的把任何東西都丟進去，但當你要從裡面把資料取出來時，就不能保證拆解(Unboxing)時，裡面的型別是否就是你所預期的。當然，程式在編譯時，也不會幫你進行型別檢查，往往要等到程式執行時，才會出現所謂的 Run Time Error。聽起來，使用這個非泛型集合很像很「弱」，對不對？沒錯，所以我們會稱非泛型集合裡面的成員為「弱型別」(Weak Typing)。

既然有所謂的「弱」，自然就會有跟它相對應的「強」。強型別 (Strong Typing) 的特性，當然就具備了以下的特徵【Ref.01】：

1.所有的變數的資料型態，在編譯時都要被知道。
2.嚴格的落實資料型態必須相符規則。例如，字串不能轉成數字。
3.所有型別轉換的錯誤，會導致編譯錯誤。也就是說，型別錯誤就無法編譯成功。

強型別具備上述特徵，自然就有了下面的好處【Ref.02,03】：

1.讓 IntelliSense 能夠支援變數。這能讓您在輸入程式碼時看到變數的屬性及其他成員。
2.可以利用編譯器型別檢查，這能找出可能因錯誤 (例如溢位) 而在 Run Time 失敗的陳述式。這也能夠偵測在不支援變數的物件上所進行的方法呼叫。
3.執行程式碼的速度較快。

相對於非泛型集合的，就是泛型集合( generic collection )【Ref. 04】，而裡面所放的成員，則都是屬於強型別。這裡的代表人物 List，於是登場了。這個 T ，代表了某一種資料型別，可以是：int,string...或者是使用者自訂的一個類別。

參考：

01.What is strong-typing versus weak-typing? Which is preferred? Why?
02.Efficient Use of Data Types
03.何謂「強型別」(Strong Type)
04.When to Use Generic Collections

2016年6月6日星期一

只抓片段的 .load()

在 jQuery 中，可以透過 .load() 來抓取其他頁面的資料。

一般來說，我可能只會用到 $("#divContent").load("pageB.htm");

但最近發現，.load(url) 裡的 url ，除了可以填入網址外，也可以透過類似 jQuery 的 select 條件，對 url 的內容進行條件篩選。

舉例來說，$("#divContent").load("pageB.htm div"); ，就可以抓取 pageB.htm 的內容，同時過濾資料，只取有 div 的內容。

同樣的，$("#divContent").load("pageB.htm #myDiv"); ，則是只抓取 pageB.htm 裡 ID 為 myDiv 的內容。

假設 pageB.htm 的內容如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    AAAAA<br />
    BBBBB
    </div>
    <div id="myDiv">
    CCCCC
    </div>
    </form>
</body>
</html>

那 $("#divContent").load("pageB.htm #myDiv"); 的結果，就只會出現：CCCCC 了！

參考：
01..load()
02.loading page framents with Jquery AJAX

Bootstrap 上的 Carousel 輪播

每個輪播元件，其實都各有特色。

而 Bootstrap 自己也有提供一個輪播元件，效果還蠻不錯的。

提供了上下頁切換、索引切換、圖片說明等功能。

<!DOCTYPE html>
<html>
<head>
   
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>照片輪播</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

 <meta charset="utf-8" />
</head>
<body>
    <div  id="photoCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
        <!-- 瀏覽控制器-->
        <ol class="carousel-indicators">
            <li data-target="#photoCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#photoCarousel" data-slide-to="1"></li>
            <li data-target="#photoCarousel" data-slide-to="2"></li>
        </ol>


        <!-- 建立相片清單-->
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://www.discuss.com.hk/attachment.php?aid=2324556&nothumb=yes" />
                <!--加上照片說明-->
                <div class="carousel-caption">
                    <h3>照片說明</h3>
                    <p>這是我們第一次牽手的地方</p>
                </div>
            </div>
            <div class="item">
                <img src="http://image5.tuku.cn/pic/wallpaper/fengjing/zhenhanweimeideziranjingguanbizhi/007.jpg"  />
                <!--加上照片說明-->
                <div class="carousel-caption">
                    <h3>照片說明</h3>
                    <p>這是我們第一次相見的地方</p>
                </div>
            </div>
            <div class="item">
                <img src="http://www.bz55.com/uploads/allimg/120813/1-120Q3092433.jpg" />
                <!--加上照片說明-->
                <div class="carousel-caption">
                    <h3>照片說明</h3>
                    <p>這是我們第一次約會的地方</p>
                </div>
            </div>
        </div>

        <!--上下一張控制-->
        <a class="left carousel-control" href="#photoCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#photoCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>

    </div>
</body>
</html>

Carousel 輪播元件的使用，只要在 div 將 class 指定為 carousel slide 就可以了。data-ride="carousel" ，則是讓 Carousel 在頁面上一載入就開始執行輪播。data-interval="3000" 則是設定每3秒換一張圖片。

《瀏覽控制器》，這指的是圖片上會出現的小白點、小圈圈，如果你有四張圖片要輪播，就會有四個小白點。他是透過 <ol> 、 <li> 來完成的。ol 頁籤需要加上 carousel-indicators 樣式類別，而 li 頁籤，則是需要指出 Carousel 元件 ID ： data-target="#photoCarousel"，輪播順序：data-slide-to="0" ...，而第一個 li 頁籤還需加上 class="active" ，表示是從這裡開始的。

《建立相片清單》，則是實際用來定義照片來源集合的地方。他是由兩層 div 來完成。第一層是容器，第二層則是個別每一張圖片的定義。首先看第一層，僅需加上樣式類別 carousel-inner 即可。接著看第二層，則是加上樣式類別 item，不過，第一個圖片需額外多加一個 active 的樣式類別。

在第二層的 div 裡，可以看到 <img> 頁籤，他的 src 屬性，就是用來指出照片來源 URL。如果還需要對照片加上說明的話，可以在此多加一個具有樣式類別 carousel-caption 的 div：<div class="carousel-caption"> ，在這 div 裡，可以顯示照片說明。

《上下一張控制》，則是在照片的左右邊各產生一個按鈕，讓你可以操作上一頁、下一頁的動作。data-slide="prev" 、data-slide="next" 分別指出了動作行為，而按鈕的形狀，則是用 <span> 以樣式類別 glyphicon glyphicon-chevron-left、glyphicon glyphicon-chevron-right 所產生的圖形來表示。

參考：

01：Bootstrap Carousel Plugin
02：網頁程式設計的16堂課： HTML5‧CSS3‧JavaScript ‧jQuery‧AJAX‧Bootstrap‧Google Maps

2016年6月2日星期四

讓 Bootstrap 製作的 NavBar 能夠永遠出現在螢幕的上方

當畫面內容漸多時，我們就會透過捲軸來捲動頁面，而原先放在頁面最上面的 NavBar 也就會因為往下捲動而消失。為了讓 NavBar 可以不因捲軸的捲動而消失，永遠停在最上面，其實還蠻簡單的，只要 nav 多加一個樣式 navbar-fixed-top 就可以達到。

<nav class="navbar navbar-default navbar-fixed-top">

但過沒多久，你就會發現，加上 navbar-fixed-top 後，原先的 NavBar 很像浮起來似的，永遠固定在螢幕上面，但麻煩的是，我原先設計在 NavBar 下方緊鄰的內容，會因為被 NavBar 遮蔽而永遠看不到。

正如上圖，項目a ~ 項目c，都會一直被遮住。這問題，我在 twitter bootstrap navbar fixed top overlapping site 找到了答案。只需要將 body 的樣式，加上 padding-top: 70px; 就可以解決。

程式碼如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyPage.aspx.cs" Inherits="bot02.MyPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <style> body { padding-top: 70px; }</style>
</head>
<body>
    <form id="form1" runat="server">
        

        <nav class="navbar navbar-default navbar-fixed-top">
           
                <div class="navbar-header">
                    <a href="#" class="navbar-brand">正妹快搜網</a>
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
            
                <div id="myNav" class="collapse navbar-collapse">
                    <ul class="navbar-nav nav">
                        <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-heart"></span> Tour</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-picture"></span> Photography</a></li>
                        <li><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-info-sign"></span> About US <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#"><span class="glyphicon glyphicon-plane"></span> 經營理念</a></li>
                                <li><a href="#"><span class="glyphicon glyphicon-user"></span> 攝影團隊</a></li>
                                <li class="divider"></li>
                                <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 加入我們</a></li>
                            </ul>

                        </li>
                    </ul>
                </div>
           
        </nav>
        <div >
            項目 a<br />
            項目 b<br />
            項目 c<br />
            項目 d<br />
            項目 e<br />
            項目 f<br />
            項目 g<br />
            項目 h<br />
            項目 i<br />
            項目 j<br />
            項目 k<br />
            項目 l<br />
            項目 m<br />
            項目 n<br />
            項目 o<br />
            項目 p<br />
            項目 q<br />
            項目 r<br />
            項目 s<br />
            項目 t<br />
            項目 u<br />
            項目 v<br />
        </div>
    </form>
</body>
</html>

參考：

01：twitter bootstrap navbar fixed top overlapping site

利用 Bootstrap 建立簡易的 NavBar

雖說用來製作 NavBar 的元件其實有很多，但會想試著使用 Bootstrap，實在是他太火紅了，簡直就像是一位專業的美編在你身邊，專業到連他說什麼我都聽不懂，因為他幫我定義好的東西太多了，讓我不得不好好一邊 K文件一邊做筆記。

首先在自己的頁面上，需要先將會引用到的 .css、 .js 加上去，只不過，為了讓手機使用者在瀏覽頁面時不要看得太吃力，所以加上了 @media 來設定 viewport，頁面的開始，就從下面開始說起：

<head runat="server">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title></title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

   
</head>

第一個 <meta http-equiv="X-UA-Compatible" content="IE=edge"> ，是為了讓 IE 能夠相容而做的設定。

第二個 <meta name="viewport" content="width=device-width, initial-scale=1"> ，則是用來設定 ViewPort，我指定他的寬度跟我設備的寬度一樣，預設的縮放則是設為 1 ，表示使用原尺寸 100%。initial-scale 可以設定從 0 ~ 10.0 的範圍，數值小於 1 表示縮小，大於 1 表示放大。

接下來，則是分別引用了 bootstrap 的 css、jQuery 的 js 以及 bootstrap 的 js 。

而 NavBar 的主角，則是使用 <nav></nav> 來登場。而這裡要注意的，則是有一大堆的 class 要慢慢分清楚並對應到正確的元件上來使用。

這個 <nav class="navbar navbar-default"> ，我們指出是要使用 navbar 的樣式類別，而且是還額外要用 navbar-default 這樣式。

為了讓手機這類小螢幕的裝置可以清楚的顯示，bootsrtap 讓我們可以在當畫面寬度小於 768px 時，自動把 NavBar 以垂直折疊的方式來顯示。

所以我們要用一個 div 來定義所謂的 navbar-header 。

<div class="navbar-header">
 <a href="#" class="navbar-brand">正妹快搜網</a>
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
 </button>
</div>

<a href="#" class="navbar-brand">正妹快搜網</a> ，是我們看到的 Navbar 標題。而後面的 button ，則是透過三條橫線來表示，這裡的橫線則是使用 span 並指定他的 class 就可以使用 bootstrap 已經幫我們定義好的樣式直接使用。

關於這個 button 還有幾個可以說明。
class="navbar-toggle"，表示這個 button 的樣式是使用 navbar-toggle
data-toggle="collapse"，表示按鈕按下的動作是屬於「折疊」的方式
data-target="#myNav"，表示這個按鈕對應到表單的哪個元件 ID，#myNav 是接下來要介紹的元件ID。

<div id="myNav" class="collapse navbar-collapse">

 <ul class="navbar-nav nav">
  <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-heart"></span> Tour</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-picture"></span> Photography</a></li>
  <li><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-info-sign"></span> About US <span class="caret"></span></a>
   <ul class="dropdown-menu">
    <li><a href="#"><span class="glyphicon glyphicon-plane"></span> 經營理念</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> 攝影團隊</a></li>
    <li class="divider"></li>
    <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 加入我們</a></li>
   </ul>

  </li>
 </ul>
</div>

現在登場的，則是重要的角色，因為 NavBar 裡的所有項目，都是定義在這裡。因為要寫很多，所以很重。

首先，使用 div ，而他的 ID ，就姑且取名為 myNav ，也就是上面提到，要用 #myNav 要找得對象。他則是採用 collapse 樣式類別，額外加上 navbar-collapse 樣式。這個 navbar-collapse 樣式，就是讓 NavBar 在螢幕寬度小於 768px 時會被隱藏的關鍵。

選單清單可以是巢狀式多層的，每一層則是透過 <ul> <li></li> ... </ul> 來完成。

在範例的第一層裡，<ul class="navbar-nav nav"> ，指出 navbar 元件選單的樣式類別是 navbar-nav ，且額外要加上 nav 樣式。

而在 <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>，是把每個清單的項目都放在個別的 li 元件中，超連結 <a href="#"> ，裡面的 href 屬性則是定義了該選單被按下去之後，要跳轉的頁面。

這裡有個很特別的地方，就是 bootstrap 事先將很多常用的小圖 icon 都定義好了，你可以到 glyphicons 找到這些圖示。要使用的時候，僅僅只是使用一個 span 元件，然後指定他的樣式類別為 glyphicon ，而額外的樣式定義，就是那些圖示的名稱。

在一個具有子選單的 li ，它會長成這樣 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> ，class="dropdown-toggle" 表示他的樣式類別是 dropdown-toggle ， data-toggle="dropdown" 則表示這是一個下拉選單。

<span class="caret"></span> 則是透過 bootstrap 所定義好的 caret 樣式類別套用到 span 裡， caret 可以讓我們產生一個到三角形的圖示。一般在選單中，也是透過這個倒三角形表示選單裡還有子選單。

第二層的選單，出現了第二個 ul 了。<ul class="dropdown-menu">，他使用的樣式類別為 dropdown-menu 。裡面的 li 基本上也是跟上一層的使用方法是一樣的。唯獨多了一個 <li class="divider"></li>，他主要也是利用 bootstrap 事先定義好的樣式類別 divider 達到在選單中呈現「分隔線」的效果。

完整程式碼如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyPage.aspx.cs" Inherits="bot02.MyPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  
</head>
<body>
    <form id="form1" runat="server">        

        <nav class="navbar navbar-default">
           
                <div class="navbar-header">
                    <a href="#" class="navbar-brand">正妹快搜網</a>
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
            
                <div id="myNav" class="collapse navbar-collapse">
                    <ul class="navbar-nav nav">
                        <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-heart"></span> Tour</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-picture"></span> Photography</a></li>
                        <li><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-info-sign"></span> About US <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#"><span class="glyphicon glyphicon-plane"></span> 經營理念</a></li>
                                <li><a href="#"><span class="glyphicon glyphicon-user"></span> 攝影團隊</a></li>
                                <li class="divider"></li>
                                <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 加入我們</a></li>
                            </ul>

                        </li>
                    </ul>
                </div>           
        </nav>

    </form>
</body>
</html>

參考：

01：網頁程式設計的16堂課： HTML5‧CSS3‧JavaScript ‧jQuery‧AJAX‧Bootstrap‧Google Maps
02：https://getbootstrap.com/components/

訂閱：文章 (Atom)

訪客數

青年廣論研討班

熱門文章

網誌存檔

三趨同仁研發心得

好站連結

關於我自己

標籤

追蹤者

2016年8月26日星期五

用Aspose替 PDF 加上底圖

2016年8月24日星期三

透過 BlockUI 產生遮罩效果

2016年7月12日星期二

泛型 generic

2016年6月6日星期一

只抓片段的 .load()

Bootstrap 上的 Carousel 輪播

2016年6月2日星期四

讓 Bootstrap 製作的 NavBar 能夠永遠出現在螢幕的上方

利用 Bootstrap 建立簡易的 NavBar

訪客數

青年廣論研討班

熱門文章

網誌存檔

三趨同仁研發心得

好站連結

關於我自己

標籤

追蹤者

2016年8月26日 星期五

用Aspose替 PDF 加上底圖

2016年8月24日 星期三

透過 BlockUI 產生遮罩效果

2016年7月12日 星期二

泛型 generic

2016年6月6日 星期一

只抓片段的 .load()

Bootstrap 上的 Carousel 輪播

2016年6月2日 星期四

讓 Bootstrap 製作的 NavBar 能夠永遠出現在螢幕的上方

利用 Bootstrap 建立簡易的 NavBar

2016年8月26日星期五

2016年8月24日星期三

2016年7月12日星期二

2016年6月6日星期一

2016年6月2日星期四