Bootstrap 常用元件

by vivid 7. 十月 2015 11:21

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

在這一篇文章中,我們將介紹在Bootstrap中的常用元件,包含Panel、Well、Progress Bar、Tooltip、Popover與Dialog等。

Panel

Panel可以用來將網頁中相關的東西打包在一起,可以有標題或表尾來呈現區塊的內容。一個網頁裏頭,可以使用多個Panel來顯示不同類的資訊。建立Panel的方式很簡單,只要在<div>標籤套用「panel」樣式,而「panel-default」樣式決定了預設的框線與表頭的配色。Panel的內容可以套用「panel-body」樣式。以下的範例程式碼,顯示一個只含內容的Panel:

<!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="panel panel-default">
            <div class="panel-body">
                Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.
            </div>
        </div>
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

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

clip_image002

圖 1:Panel。

定義Panel表頭

你可以為Panel加上表頭,只要在Panel中加入一個<div>套用「panel-heading」樣式即可,參考以下範例程式碼:

<!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="panel panel-default">
            <div class="panel-heading">My Panel</div>
            <div class="panel-body">
                Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.
            </div>
        </div>
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

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

clip_image004

圖 2:Panel可以有表頭。

定義Panel表尾

若要為Panel加上表尾,可以使用一個<div>標籤,套用「panel-footer」樣式,參考以下範例程式碼,除了新增了表尾之外,Panel套用了「panel-primary」樣式,讓表頭的背景和框線變成藍色的:

<!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="panel panel-primary">
            <div class="panel-heading">My Panel</div>
            <div class="panel-body">
                Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.
            </div>
            <div class="panel-footer">Copyright</div>
        </div>
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

Panel除了「panel-primary」樣式之外,你還可以設定為「panel-success」、「panel-info」、「panel-warning」或「panel-danger」等內建的樣式,它們具有不同的表頭和框線的顏色,此範例的執行結果如下圖所示:

clip_image006

圖 3:新增表尾與套用樣式。

在Panel表頭表尾使用按鈕

Panel中的表頭與表尾之中,可以按實際的需求,加入按鈕或超連結,來執行一些命令。例如底下的程式碼範例分別在表頭與表尾新增一個<button>按鈕:

<!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="panel panel-primary">
            <div class="panel-heading">
                <button class="btn btn-info">>></button>
                My Panel
            </div>
            <div class="panel-body">
                Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.
            </div>
            <div class="panel-footer">
                <button class="btn btn-info">>></button>
                Copyright
            </div>
        </div>
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

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

clip_image008

圖 4:在Panel表頭表尾使用按鈕。

若想要將Panel中的按鈕放在畫面的右方,你可以在按鈕套用「pull-right」樣式,例如以下的程式碼範例:

<!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="panel panel-primary">
            <div class="panel-heading">
                <button class="btn btn-info pull-right">>></button>
                My Panel
            </div>
            <div class="panel-body">
                Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.
            </div>
            <div class="panel-footer">
                <button class="btn btn-info pull-right">>></button>
                Copyright
            </div>
        </div>
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

不過此範例的執行結果如下圖所示,按鈕走鐘了,畫面不是很好看,按鈕超出表頭和表尾的範圍:

clip_image010

圖 5:在Panel表頭表尾使用按鈕。

若要修訂這個問題,只需要將表頭和表尾的內容放在一個<div>標籤之中就行了,例如以下的程式碼範例:

<!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="panel panel-primary">
            <div class="panel-heading">
                <button class="btn btn-info pull-right">>></button>
                <p>My Panel</p>
            </div>
            <div class="panel-body">
                Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.
            </div>
            <div class="panel-footer ">
                <button class="btn btn-info pull-right">>></button>
                <p> Copyright</p>
            </div>
        </div>
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

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

clip_image012

圖 6:在Panel表頭表尾使用按鈕。

折疊Panel

Panel可以設計成具有展開、收合的介面。我們可以在Panel表頭的按鈕加上「data-toggle="collapse"」屬性,再指定「data-target」為要展開、收合的HTML項目即可,參考以下程式碼範例,「panel-body」設定「collapse」樣式,預設先隱藏起來。當使用者按下按鈕,才會展開Panel Body:

<!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="panel panel-primary">
            <div class="panel-heading">
                <button class="btn btn-info pull-right"
                         data-toggle="collapse" 
                data-target="#mybody">>></button>
                <p>My Panel</p>
            </div>
            <div id="mybody" class="panel-body collapse">
                Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.
            </div>
       
        </div>
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

設計Accordion效果

你可以使用多個折疊的Panel來設計出Accordion效果,一次只顯示一個Panel的內容。你只需要將多個可折疊的Panel放在一個<div>標籤中,然後在個別的Panel中,使用data-parent指向這個父標籤就可,參考以下範例程式碼:

<!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" id="parent">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <button class="btn btn-info pull-right"
                        data-toggle="collapse"
                        data-parent="#parent"
                        data-target="#mybody1">
                    >>
                </button>
                <p>My Panel</p>
            </div>
            <div id="mybody1" class="panel-body collapse">
                Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.
            </div>

            <div class="panel-heading">
                <button class="btn btn-info pull-right"
                        data-toggle="collapse"
                        data-parent="#parent"
                        data-target="#mybody2">
                    >>
                </button>
                <p>My Panel</p>
            </div>
            <div id="mybody2" class="panel-body collapse">
                Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.
            </div>

            <div class="panel-heading">
                <button class="btn btn-info pull-right"
                        data-toggle="collapse"
                        data-parent="#parent"
                        data-target="#mybody3">
                    >>
                </button>
                <p>My Panel</p>
            </div>
            <div id="mybody3" class="panel-body collapse">
                Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.
            </div>
        </div>
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

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

clip_image014

圖 7:設計Accordion效果。

Well

Well是簡易版的Panel,它的外框有一點陰影,看起來有點立體的感覺。你可以在<div>標籤中設定「well」樣式,此外可以再套用「well-lg」或「well-sm」,這些樣式擁有不同的內距(Padding) ,參考以下的程式碼範例:

<!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="well">
            <h1>
                My Well
            </h1>
            <div>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</div>
        </div>
        <div class="well well-sm">
            <h1>
                My Well
            </h1>
            <div>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</div>
        </div>
        <div class="well well-lg">
            <h1>
                My Well
            </h1>
            <div>Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.</div>
        </div>
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

 

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

clip_image016

圖 8:使用Well。

進度列Progress Bar

在網頁中,通常使用進度列用來顯示某項工作的完成度,Bootstrap提供Progress Bar元件來來設計進度列。請參考以下範例程式碼:

<!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="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
                <span class="sr-only">50% </span>
            </div>
        </div>

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

 

使用<div>來設計進度列,套用「progress」與「progress-bar」樣式。而「role="progressbar"」、「aria-valuenow="50"」、「aria-valuemin="0"」與「 aria-valuemax="100"」、「sr-only」樣式都是根據ARIA的理念來設定的,以搭配螢幕助讀程式使用。此外你必需為Progress Bar設定style,才能顯示完成進度的百分比。此範例的執行結果如下圖所示:

clip_image018

圖 9:進度列Progress Bar。

使用多個區段

一個Progress可以有多個區段,來表達不同的進度。例如我們可以有一個區段來描述專案的實際完成度,另一個區段來描述預計的完成度。參考以下程式碼範例:

<!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="progress">
            <div class="progress-bar" role="progressbar"
                 aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
                <span class="sr-only">50% </span>
            </div>
            <div class="progress-bar progress-bar-danger" role="progressbar"
                 aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
                <span class="sr-only">70% </span>
            </div>
        </div>
      
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

Progress Bar中第二個區段套用了「progress-bar-danger」樣式,讓背景變成紅色的,除此之外你可以有「progress-bar-info」、「 progress-bar-striped」、「 progress-bar-success」、「 progress-bar-warning」等樣式可供選擇。此範例的執行結果如下圖所示:

clip_image020

圖 10:使用多個區段的Panel。

使用文字描述進度

在Progress Bar之中,使用文字描述能更明確地顯示進度,只需要在顯示進度的<div>標籤中加上文字描豎即可,參考以下範例程式碼:

<!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="progress">
            <div class="progress-bar" role="progressbar"
                 aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
                <span class="sr-only">50% </span>
                Progress : 50%
            </div>
            <div class="progress-bar progress-bar-danger" role="progressbar"
                 aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
                <span class="sr-only">70% </span>
                Estimated : 70%
            </div>
        </div>
      
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

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

clip_image022

圖 11:使用文字描述進度。

Tooltips

一般而言,瀏覽器會將HTML標籤中的title屬性值,當做是Tooltip,若使用者將滑鼠停留在此HTML標籤上方,瀏覽器便會自動顯示Title的內容,以提示使用者,參考以下範例程式碼,其中有一個<div>標籤:

<!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 title="this is div"> this is div</div>
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

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

clip_image024

圖 12:使用Tooltip提示使用者。

預設的Tooltip看起來比較呆板,我們可以改用Bootstrap所提供的Tooltip功能,在標籤中設定「data-toggle="tooltip"」,因為Tooltip並不是單純的CSS外掛,因此你需要撰寫一行程式碼,叫用tooltip()方法來初始化它,參考以下範例程式碼:

<!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 title="this is div"  data-toggle="tooltip"> this is div</div>
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script>
        $("[data-toggle='tooltip']").tooltip();
    </script>
</body>
</html>

 

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

clip_image026

圖 13:使用Bootstrap Tooltip。

Tooltip位置

若要控制Tooltip出現的位置,你可以利用data-placement來指定,它的值可以是「top」、「bottom」、「left」、「right」或「auto」,設定為auto表示由瀏覽器自動決定其出現的位置,參考以下範例程式碼:

<!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">
        <a href="#" title="top" data-toggle="tooltip" data-placement="top"> top </a>
        <a href="#" title="bottom" data-toggle="tooltip" data-placement="bottom"> bottom </a>
        <a href="#" title="left" data-toggle="tooltip" data-placement="left"> left </a>
        <a href="#" title="right" data-toggle="tooltip" data-placement="right"> right </a>
        <a href="#" title="auto" data-toggle="tooltip" data-placement="auto"> auto </a>
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script>
        $("[data-toggle='tooltip']").tooltip();

    </script>
</body>
</html>

 

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

clip_image028

圖 14:設定Tooltip位置。

使用Tirgger

預設當滑鼠停留在HTML項目上時,會顯示Tooltip,你也可以使用Trigger,透過程式碼設定為click、hover、focus、manual等項目,以便視需要來啟動Tooltip。參考以下範例程式碼,將Trigger設定為「Click」,在使用者點選超連結時,才會顯示Tooltip。

<!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"> 
       <a href="#" title="top"  data-toggle="tooltip" data-placement="top"> top </a>
       <a href="#" title="bottom" data-toggle="tooltip" data-placement="bottom"> bottom </a>
       <a href="#" title="left" data-toggle="tooltip" data-placement="left"> left </a>
       <a href="#" title="right" data-toggle="tooltip" data-placement="right"> right </a>
       <a href="#" title="auto" data-toggle="tooltip" data-placement="auto"> auto </a>
 

    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script>
        $("[data-toggle='tooltip']").tooltip({
            trigger: "click"
        });

    </script>
</body>
</html>

 

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

clip_image030

圖 15:使用Trigger顯示Tooltip。

Popover

Popover類似Tooltip,它使用彈跳出的小視窗來提供更多提示性的資訊,Popover 之中也可以包含標題。預設當你點選HTML項目時,關連到此項目的Popover才會顯示出來,參考以下範例程式碼:

<!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">
        <a href="#" data-toggle="popover" data-content="popover">Click</a>
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script>
        $("[data-toggle='popover']").popover();

    </script>
</body>
</html>

 

範例中<a>標籤設定data-toggle為「popover」,data-content則用來設定Popover中的內容。和Tooltip一樣,它算是選擇性的元件,因此還需要透過程式碼來初始化,此範例的執行結果如下圖所示:

clip_image032

圖 16:使用Popover顯示提示。

在Popover加上表頭

只要在有設定「data-toggle="popover"」的HTML標籤設定title,它就會成為Popover的表頭,例如修改上例的程式碼,加上「title="my header"」:

<a href="#" title="my header" data-toggle="popover" data-content="popover">Click</a>

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

clip_image034

圖 17:在Popover加上表頭。

設定Popover位置

你可以使用data-placement 來設定Popover出現的位置,它可以設定為「top」、「bottom」、「left」、「right」,參考以下範例程式碼:

<a href="#" title="top" data-toggle="popover" data-content="popover" data-placement="top"> top </a>

<a href="#" title="bottom" data-toggle="popover" data-content="popover" data-placement="bottom"> bottom </a>

<a href="#" title="left" data-toggle="popover" data-content="popover" data-placement="left"> left </a>

<a href="#" title="right" data-toggle="popover" data-content="popover" data-placement="right"> right </a>

<a href="#" title="auto" data-toggle="popover" data-content="popover" data-placement="auto"> auto </a>

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

clip_image036

圖 18:設定Popover位置。

關閉Popover

預設Popover出現時,只要再點選一次關聯至Popover的HTML項目,Popover就會自動關閉,若想要點選網頁中的其它位置時,自動關閉Popover,你可以為它加上「data-trigger="focus"」,參考以下範例程式碼:

<a href="#" title="top" data-toggle="popover" data-content="popover"data-trigger="focus" data-placement="top"> top </a>

data-trigger還可以設定為「hover」,如此只要移動滑鼠到此HTML項目上方,Popover就自動出現,移到此HTML項目外,Popover就自動關閉,參考以下範例程式碼:

<a href="#" title="top" data-toggle="popover" data-content="popover" data-trigger="hover" data-placement="top"> top </a>

對話盒

Bootstrap有Model元件可以用來設計對話盒,對話盒可以有,設計的方式是在<div>標籤中設定「model」樣式,在裏頭放一個<div>標籤並設定「modal-dialog」樣式,它決定了對話盒的寬度與位置。然後將對話盒的表頭、內容與表尾放在一個套用「modal-content」樣式的<div>之中,參考以下範例程式碼:

<!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">
        <button class="btn btn-danger"
                data-toggle="modal"
                data-target="#myModal">
            Show
        </button>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModal-label">Info</h4>
                    </div>
                    <div class="modal-body">
                        <p>
                            Consectetur adipiscing elit fusce vel.
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary">OK</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

範例中使用一個按鈕來開啟對話盒,設定「data-toggle="modal"」,這樣點選按鈕時,就會自動顯示對話盒。按鈕設定了data-target來關聯到對話盒。

代表對話盒的<div>標籤中除了設定「model」樣式之外,還套用了「Fade」樣式可以讓對話盒套用動畫效果顯示。「modal-content」樣式決定了對話盒的外框,例如圓角的樣式。modal-header定義表頭區段、modal-body定義內容區段,modal-footer定義表尾區段。表頭包含一個關閉(Close按鈕),設定data-dismiss="modal"可以讓按鈕點選時,將對話盒關閉。同樣地,表尾的Cancel按鈕也做了相同的設計。

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

clip_image038

圖 19:使用對話盒。

Tags:

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

新增評論




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






NET Magazine國際中文電子雜誌

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

月分類Month List