整合ASP.NET Web Forms與Bootstrap(2) – 版面配置

by vivid 29. 七月 2015 04:42

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

在《響應式網頁設計-Bootstrap for ASP.NET WebForms》文章之中,介紹了使用Bootstrap的Grid系統來進行版面設計的動作,在這篇文章之中,我們再來聊聊Bootstrap的版面配置方式。基本上,Bootstrap提供兩種網頁配置模型,一為「fluid」;一為「flexible」,在一個網頁之中,可以混用這兩種模型來呈現網頁內容。

「fluid」配置(full-width)意指網頁中的項目,可以隨著瀏覽器的寬度,自動調整它的大小。「flexible」配置(fixed-width)則是指使用固定寬度的欄位來顯示資訊。當瀏覽器的寬度變動時,會適當的調整欄位的寬度來顯示內容。讓我們先來來看一個範例程式:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link href="Content/bootstrap.min.css" rel="stylesheet" />
  <style>
    body {
      background-color: burlywood;
    }

    .container-fluid {
      background-color: aquamarine;
    }

    .container {
      background-color: antiquewhite;
    }
  </style>
</head>
<body>

  <div class="container-fluid">
    <h1>Fluid Layout</h1>
  </div>

  <div class="container">
    <h1>Flexible Layout</h1>
  </div>
  <script src="Scripts/jquery-1.9.1.min.js"></script>
  <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

 

這個網頁包含兩個<div>區塊,第一個<div>區塊採用「fluid」配置,其<div>標籤上設定了「class="container-fluid"」;而第二個<div>區塊採用「flexible」配置,其<div>標籤上設定了「class="container"」。

以下的圖是使用Chrome瀏覽器的手機模擬功能來監看網頁的執行效果。在「fluid」配置下,不管瀏覽器的寬度有多少,<div>都會佔滿瀏覽器的寬度,而「flexible」配置要搭配Bootstrap的Grid系統來檢視,以下的表格是來自官方的Grid System介紹,網址在http://getbootstrap.com/css/#grid:

Extra small devices Phones (<768px)

Small devices Tablets (768px)

Medium devices Desktops (992px)

Large devices Desktops (1200px)

Grid behavior

Horizontal at all times

Collapsed to start, horizontal above breakpoints

Container width

None (auto)

750px

970px

1170px

Class prefix

.col-xs-

.col-sm-

.col-md-

.col-lg-

# of columns

12

Column width

Auto

~62px

~81px

~97px

Gutter width

30px (15px on each side of a column)

Nestable

Yes

Offsets

Yes

Column ordering

Yes

在瀏覽器寬度大於1200 px時,超過Grid 系統「Large devices Desktops (≥1200 px)」的臨界點,其執行的結果如下,「flexible」配置左右會留白,請參考下圖所示:

clip_image002

圖 1

在瀏覽器寬度大於等於1200 px時,其執行的結果如下圖所示,「flexible」配置左右留白區塊變少了:

clip_image004

圖 2

在瀏覽器寬度大於等於992 px時,符合Grid 系統「Medium devices Desktops (≥992 px)」的臨界點,其執行的結果如下圖所示,「flexible」配置左右會留白:

clip_image006

圖 3

依此類推,在瀏覽器寬度等於991 px時,其執行的結果,請參考下圖所示:

clip_image008

圖 4

依此類推,在瀏覽器寬度等於768 px時,其執行的結果,請參考下圖所示:

clip_image010

圖 5

唯有在瀏覽器寬度小於767 px時,「flexible」配置左右就不會留白了,其執行的結果如下:

clip_image012

圖 6

從這個範例中我們可以知到「Fluid」配置不斷地隨著瀏覽器的寬度來變動它的寬度;而「Flexible」配置則配合Grid系統來調整。

 

搭配Grid系統

不管使用「Fluid」配置或「Flexible」配置,我們都可以搭配Grid系統來切欄位。例如以下程式碼範例:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link href="Content/bootstrap.min.css" rel="stylesheet" />
  <style>
    body {
      background-color: burlywood;
    }

    .container-fluid {
      background-color: aquamarine;
    }

    .container {
      background-color: antiquewhite;
    }

    .col1 {
      background-color: coral;
      padding: 10px;
    }

    .col2 {
      background-color: darkseagreen;
      padding: 10px;
    }

    .col3 {
      background-color: deepskyblue;
      padding: 10px;
    }

    .row {
      padding: 10px;
    }

    div {
      border: 1px solid black;
    }
  </style>
</head>
<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4 col1"> 欄位 1 </div>
      <div class="col-md-4 col2"> 欄位 2 </div>
      <div class="col-md-4 col3"> 欄位 3 </div>
    </div>                       
                                 
    <div class="row">            
      <div class="col-md-4 col1"> 欄位 1 </div>
      <div class="col-md-4 col2"> 欄位 2 </div>
      <div class="col-md-2 col3"> 欄位 3 </div>
    </div>                       
                                 
    <div class="row">            
      <div class="col-md-6 col1"> 欄位 1 </div>
      <div class="col-md-6 col2"> 欄位 2 </div>
      <div class="col-md-6 col3"> 欄位 3 </div>
    </div>                       
  </div>                         
                        
  <br />        
  <div class="container">        
    <div class="row">            
      <div class="col-md-4 col1"> 欄位 1 </div>
      <div class="col-md-4 col2"> 欄位 2 </div>
      <div class="col-md-4 col3"> 欄位 3 </div>
    </div>                       
                                 
    <div class="row">            
      <div class="col-md-4 col1"> 欄位 1 </div>
      <div class="col-md-4 col2"> 欄位 2 </div>
      <div class="col-md-2 col3"> 欄位 3 </div>
    </div>

    <div class="row">
      <div class="col-md-6 col1">欄位 1 </div>
      <div class="col-md-6 col2">欄位 2 </div>
      <div class="col-md-6 col3">欄位 3 </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

套用「fluid」配置與「flexible」配置的第一個row都顯示三個直欄,因為Grid系統定義一個row最多有12欄,因此每代表直欄的<div>套用了「col-md-4」樣式:

 

<div class="row">
  <div class="col-md-4 col1"> 欄位 1 </div>
  <div class="col-md-4 col2"> 欄位 2 </div>
  <div class="col-md-4 col3"> 欄位 3 </div>
</div>                       

 

而第二個row三個欄位套用的樣式加總起來只有10 (4+4+2),並不足12欄,因此右方留有空白。

<div class="row">            
  <div class="col-md-4 col1"> 欄位 1 </div>
  <div class="col-md-4 col2"> 欄位 2 </div>
  <div class="col-md-2 col3"> 欄位 3 </div>
</div>                       

第三個row三個欄位套用的樣式加總起來有18 (6+6+6),超過12欄,因此最後一欄會換行呈現:

<div class="row">            
  <div class="col-md-6 col1"> 欄位 1 </div>
  <div class="col-md-6 col2"> 欄位 2 </div>
  <div class="col-md-6 col3"> 欄位 3 </div>
</div>                       

 

Row與Coluum高度

預設Row與Coluum高度的高度會隨著內容而自動調整,因此可能會有一些奇怪的現象,請參考以下範例程式碼:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link href="Content/bootstrap.min.css" rel="stylesheet" />
  <style>
    body {
      background-color: burlywood;
    }

    .container-fluid {
      background-color: aquamarine;
    }

    .container {
      background-color: antiquewhite;
    }

    .col1 {
      background-color: coral;
      padding: 10px;
    }

    .col2 {
      background-color: darkseagreen;
      padding: 10px;
    }

    .col3 {
      background-color: deepskyblue;
      padding: 10px;
    }

    .col4 {
      background-color: hotpink;
      padding: 10px;
    }

    .col5 {
      background-color: gold;
      padding: 10px;
    }

    .row {
      padding: 10px;
    }

    div {
      border: 1px solid black;
    }
  </style>
</head>
<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4 col1">欄位 1 </div>
      <div class="col-md-4 col2">
        欄位 2 
        Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.

      </div>
      <div class="col-md-4 col3">欄位 3 </div>
      <div class="col-md-4 col4">
        欄位 4
        Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.

      </div>
      <div class="col-md-4 col5">
        欄位 5
         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>

 

此範例的執行結果如下圖所示:,欄位四因超過Grid系統12欄的限制,需換行顯示,但它會對齊高度較高的欄位2,欄位五對齊欄位1:

clip_image016

圖 8

clearfix

在上個範例中,欄位1~3已佔用了12欄,因此欄位4需換行顯示,但不是對齊欄位1,若要修正這個行為,可以使用「clear fix」樣式,參考以下範例程式碼:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link href="Content/bootstrap.min.css" rel="stylesheet" />
  <style>
    body {
      background-color: burlywood;
    }

    .container-fluid {
      background-color: aquamarine;
    }

    .container {
      background-color: antiquewhite;
    }

    .col1 {
      background-color: coral;
      padding: 10px;
    }

    .col2 {
      background-color: darkseagreen;
      padding: 10px;
    }

    .col3 {
      background-color: deepskyblue;
      padding: 10px;
    }

    .col4 {
      background-color: hotpink;
      padding: 10px;
    }

    .col5 {
      background-color: gold;
      padding: 10px;
    }

    .row {
      padding: 10px;
    }

    div {
      border: 1px solid black;
    }
  </style>
</head>
<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4 col1">欄位 1 </div>
      <div class="col-md-4 col2">
        欄位 2 
        Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.

      </div>
      <div class="col-md-4 col3">欄位 3 </div>
       <div class="clearfix"></div>
      <div class="col-md-4 col4">
        欄位 4
        Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.

      </div>
      <div class="col-md-4 col5">
        欄位 5
         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_image018

圖 9

移動欄位

Bootstrap還可以讓你利用內建的push、pull樣式來移動欄位。我們看看以下的範例:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link href="Content/bootstrap.min.css" rel="stylesheet" />
  <style>
    body {
      background-color: burlywood;
    }

    .container-fluid {
      background-color: aquamarine;
    }

    .container {
      background-color: antiquewhite;
    }

    .col1 {
      background-color: coral;
      padding: 10px;
    }

    .col2 {
      background-color: darkseagreen;
      padding: 10px;
    }

    .col3 {
      background-color: deepskyblue;
      padding: 10px;
    }
  
    .row {
      padding: 10px;
    }

    div {
      border: 1px solid black;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="row">
      <div class="col-md-3 col1"> 欄位 1 col-md-3 </div>
      <div class="col-md-3 col2"> 欄位 2 col-md-3  </div>
      <div class="col-md-3 col3"> 欄位 3 col-md-3 </div>
    </div>
    <div class="row">
      <div class="col-md-3 col-md-push-1 col1"> 欄位 1 push-1 </div>
      <div class="col-md-3  col2"> 欄位 2 </div>
      <div class="col-md-3 col3"> 欄位 3 </div>
    </div>

    <div class="row">
      <div class="col-md-3  col1"> 欄位 1 </div>
      <div class="col-md-3  col-md-pull-1 col2"> 欄位 2  pull-1</div>
      <div class="col-md-3 col3"> 欄位 3 </div>
    </div>
  </div>


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

其執行結果如下圖,套用「col-md-push-1」的欄位往右水平移動一個位置;而套用「col-md-pull-1」樣式的欄位則往左水平移動了一個位置:

clip_image020

圖 10

顯示與隱藏欄位

有時你可能想要在瀏覽器寬度不夠的情況下,將一些顯示較不重要資訊的欄位隱藏起來,或者反過來,在瀏覽器寬度夠的情況下,使用欄位顯示更多的資訊,此時你便可以利用內建的visible或hidden的樣式。參考以下程式碼:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link href="Content/bootstrap.min.css" rel="stylesheet" />
  <style>
    body {
      background-color: burlywood;
    }

    .container {
      background-color: antiquewhite;
    }

    .col1 {
      background-color: coral;
      padding: 10px;
    }

    .col2 {
      background-color: darkseagreen;
      padding: 10px;
    }

    .col3 {
      background-color: deepskyblue;
      padding: 10px;
    }
  
    .row {
      padding: 10px;
    }

    div {
      border: 1px solid black;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="row">
      <div class="col-md-12 hidden-sm col1"> 欄位 1 hidden-sm </div>
      <div class="col-md-12 hidden-md col2"> 欄位 2 hidden-md </div>
      <div class="col-md-12 hidden-lg col3"> 欄位 3 hidden-lg </div>
    </div>
  </div>


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

 

在瀏覽器寬度小於768的情況下,此範例的執行結果,請參考下圖所示:

clip_image022

圖 11

瀏覽器寬度大於等於768時,自動隱藏第一個欄位(套用hidden-sm),請參考下圖所示:

clip_image024

圖 12

瀏覽器寬度大於等於992時,自動隱藏第二個欄位(套用hidden-md),請參考下圖所示:

clip_image026

圖 13

瀏覽器寬度大於等於1200時,自動隱藏第三個欄位(套用hidden-lg),請參考下圖所示:

clip_image028

圖 14

以下的範例則是套用visible樣式:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link href="Content/bootstrap.min.css" rel="stylesheet" />
  <style>
    body {
      background-color: burlywood;
    }

 
    .col1 {
      background-color: coral;
      padding: 10px;
    }

    .col2 {
      background-color: darkseagreen;
      padding: 10px;
    }

    .col3 {
      background-color: deepskyblue;
      padding: 10px;
    }
  
    .row {
      padding: 10px;
    }

    div {
      border: 1px solid black;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="row">
      <div class="col-md-12 visible-sm col1"> 欄位 1 visible-sm </div>
      <div class="col-md-12 visible-md col2"> 欄位 2 visible-md </div>
      <div class="col-md-12 visible-lg col3"> 欄位 3 visible-lg </div>
    </div>
  </div>


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

 

瀏覽器寬度等於768時,自動顯示第一個欄位(套用visible -sm),請參考下圖所示:

clip_image030

圖 15

瀏覽器寬度大於等於992時,自動顯示第二個欄位(套用visible -md),請參考下圖所示:

clip_image032

圖 16

瀏覽器寬度大於等於1200時,顯示第三個欄位(套用visible -lg),請參考下圖所示:

clip_image034

圖 17

Tags:

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

新增評論




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






NET Magazine國際中文電子雜誌

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

月分類Month List