Tad 教材網 - 線上書籍

:::

\[1061\] XOOPS佈景設計
==================

### [![](http://tad0616.net/uploads/dl.gif)](https://www.tad0616.net/uploads/tad_book3/file/42/04.pdf) 一、 BootStrap網站

1. 官網：<http://getbootstrap.com/>
2. 正體中文手冊：<https://kkbruce.tw/bs3>
3. 簡體中文手冊：<http://v3.bootcss.com/>
4. 範例：<http://www.candoapp.net/>
5. 向量圖：<http://www.flaticon.com/>
6. 線上語法測試：<https://codepen.io/pen/>
 
### 二、 BootStrap（v3.3.7）基本頁面

1. <http://v3.bootcss.com/getting-started/#download>
2. 下載BootStrap並解壓，得到三個資料夾，和index.html放在一起即可。
3. 基本頁面直接複製網站上範例，將語言改為<html lang="zh-Hant-TW">
4. X-UA-Compatible用來指定IE瀏覽器的渲染模式 ，不分大小寫，必須用在 head 中，必須在除 title 外的其他 meta 之前使用。IE=edge指定IE用最新的渲染模式解析頁面。
5. 建議下載jquery：<https://jquery.com/download/>，並存放於js目錄中
6. 預設引入jquery在最下方，但若搭配其他jquery使用時，移致上方會比較沒問題。
7. 基本用法，幾乎全靠class=”樣式名稱”來套用。
 
### 三、 格線系統

1. 容器：「.container」最大寬度為1170px左右；「.container-fluid」則是滿版容器。
2. 同一個頁面中可以同時分開使用，但不可互相套嵌使用。
3. 格線系統：將畫面分成12格（等份），透過行 (row) 與欄 (column) 的組合建立頁面佈局。 ```
  <pre class="brush:xml;gutter:false;">
  <div class="container">
      <div class="row">
          <div class="col-md-3"><h2>XOOPS 網站架設</h2></div>
          <div class="col-md-3"><h2>XOOPS 模組開發</h2></div>
          <div class="col-md-3"><h2>XOOPS 佈景設計</h2></div>
          <div class="col-md-3"><h2>XOOPS 維護升級</h2></div>
      </div>
  </div>
  ```
4. .col-sm-6代表佔6格的欄位（column），sm代表只要螢幕解析度大於768px，就分成左右兩欄之意。若寫成.col-md-6就代表螢幕要992px以上，才分左右兩欄，若是遇到992以下螢幕，則自動變成單欄式。 <table bordercolor="#000000" cellspacing="0" class="table table-hover table-bordered table-striped table-condensed" width="100%"> <colgroup> <col width="51*"></col> <col width="51*"></col> <col width="51*"></col> <col width="51*"></col> <col width="51*"></col> </colgroup> <thead> <tr> <th> </th> <th>手機 (<768px)
  
   </th> <th>平板 (≧768px)
  
   </th> <th>桌面顯示器 (≧992px)
  
   </th> <th>大屏幕 (≧1200px)
  
   </th> </tr> </thead> <tbody> <tr> <th>容器最大寬度
  
   </th> <td>None （自動）
  
   </td> <td>750px
  
   </td> <td>970px
  
   </td> <td>1170px
  
   </td> </tr> <tr> <th>類前綴
  
   </th> <td>.col-xs-
  
   </td> <td>.col-sm-
  
   </td> <td>.col-md-
  
   </td> <td>.col-lg-
  
   </td> </tr> <tr> <th>每欄欄寬
  
   </th> <td>自動
  
   </td> <td>~62px
  
   </td> <td>~81px
  
   </td> <td>~97px
  
   </td> </tr> </tbody> </table>
5. col-可以同時使用，例如以下就是指定：.col-md-3指定當螢幕992px以上時每欄3格 ，共分成4欄；.col-sm-6指定當螢幕小於992但大於768時每欄6格，分成左右2欄。 ```
  <pre class="brush:xml;gutter:false;">
  <div class="col-md-3 col-sm-6"><h2>XOOPS 網站架設</h2></div>
  ```
6. 有時候，某些欄位內容較多 ```
  <pre class="brush:xml;gutter:false;">
  <div class="clearfix visible-sm-block"></div>
  ```
7. 若是一個row裡面的col超過12時，會再獨立另一個row出來。
8. 注意，只要是放在col-xx中，就一定會有所謂的gutter（欄和欄之間的間距）
9. 「.col-md-4 .col-md-offset-4」-offset代表跳過4格，會出現在中間佔4格
10. 當螢幕大於992時，欄位左右交替（右推左拉），文字會變成在右邊（往右推6格），圖片在左邊（往左拉6格）；當螢幕小於992時，就會變成文字在上，圖片在下的單欄模式： ```
  <pre class="brush:xml;gutter:false;">
  <div class="row">
      <div class="col-md-6 col-md-push-6">文字</div>
      <div class="col-md-6 col-md-pull-6">圖片</div>
  </div>
  ```
 
### 四、 排版

1. <http://v3.bootcss.com/css/#type>
2. Bootstrap將<body>和所有段落元素的font-size預設為 14px，line-height預設為 1.428。<p>元素的margin-bottom預設了 1/2 行高（即 10px）
3. 段落中內容對齊（在表格中無效）：.text-left（靠左對齊）；.text-center（置中對齊）；.text-right（靠右對齊）；.text-justify（分散對齊）；.text-nowrap（不換行）
4. 向左浮動是.pull-left；向右浮動是.pull-right；要清除浮動則用.clearfix
5. 顯示某元件可套用.show，隱藏某元件則用.hidden
6. [練習素材](https://www.tad0616.net/uploads/tad_book3/file/42/images.zip)
7. 自己設定[字型](https://www.tad0616.net/uploads/tad_book3/file/42/setofont.zip)的CSS（[字型網站](http://www.ztxz.org/)）： ```
  <pre class="brush:css;">
  @font-face {
      font-family: myfont;
      src: url('setofont.ttf');
  }
  ```
 
### 五、 表格

1. .table 賦予表格基本的樣式，橫底線，較舒服的排版，可搭配底下表格樣式一起使用。
2. .table-striped（套用斑馬紋）；.table-bordered（加上框線）；.table-hover（滑鼠滑過變色）；.table-condensed（較緊湊表格）；.table-responsive（自適應表格）
3. 套用表格行<tr>或儲存格<td>的顏色，請參考「顏色」單元。
 
### 六、 水平表單

1. 表單基本結構如下，.form是一般表單；.form-horizontal是水平表單；.form-inline是行內表單。至於role是無障礙用的，詳細請見：<http://www.zhangxinxu.com/wordpress/?p=2277> ```
  <pre class="brush:xml;gutter:false;">
  <form action="#" class="form-horizontal" role="form">
      <div class="form-group">
          <label class="col-sm-2 control-label">標籤</label>
          <div class="col-sm-10">
              <input type="text" class="form-control">
          </div>
      </div>
  </form>
  ```
2. 每組表單可套用.form-group，可同時搭配.has-success（綠）.has-warning（黃）.has-error（紅）來呈現不同表單狀態。若有使用.has-feedback還可以在有.form-control的框中插入圖示。 ```
  <pre class="brush:xml;gutter:false;">
  <div class="form-group has-success has-feedback">
      <label class="col-sm-2 control-label">姓名：</label>
      <div class="col-sm-10">
          <input type="text" name="user_name" class="form-control" placeholder="請輸入姓名">
          <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
  </div>
  ```
3. 調整表單大小：較大表單組.form-group-lg，較小表單組.form-group-sm
4. 除了radio及chechbox外，其他表單均可加入.form-control美化之。
5. radio及chechbox選項可用<label>包住，並用.radio-inline或.chechbox-inline來將選項水平化。
6. 在表單中若只是要呈現一般文字，可套用.form-control-static看起來較美觀。
7. .help-block可用於表單的說明文字
 
### 七、 按鈕

1. <a><button><input type=”button”>都可以套用.btn來做出按鈕，強烈建議使用<button>以便在各種瀏覽器達到一致的外觀。
2. 按鈕的六種顏色外觀，請參考「顏色」單元，若要將按鈕做成連結可用.btn-link。
3. 預設尺寸外的其他三種尺寸：.btn-lg、.btn-sm 或 .btn-xs；另外，.btn-block可以做滿版按鈕。
 
### 八、 輸入框組

1. 利用.input-group可將幾個表單元件或文字組合在一起，文字或其他輸入框用span.input-group-addon來附加，按鈕則用span.input-group-btn包住。 ```
  <pre class="brush:xml;gutter:false;">
  <div class="input-group">
    <span class="input-group-addon">關鍵字</span>
    <input type="text" class="form-control">
    <span class="input-group-btn">
      <button class="btn btn-primary" type="button">搜尋</button>
    </span>
  </div>
  ```
 
### 九、 圖片

1. 圖片可用.img-responsive使之自適應，若要讓套用.img-responsive的圖片置中，請搭配.center-block，而非.text-center。
2. 圖片還有三種樣式：（圓角）.img-rounded；（圓形）.img-circle；（外框）.img-thumbnail
 
### 十、 自適應工具

1. 搭配 hidden-\*及 visible-\*，可設定在哪些尺寸下哪些元件要隱藏，哪些要顯示，詳情請看<http://v3.bootcss.com/css/#responsive-utilities>
2. 下例在小尺寸螢幕中，會以另一張不同比例的圖來顯示： ```
  <pre class="brush:xml;gutter:false;">
  <img src="images/header.jpg" alt="logo" class="img-responsive hidden-xs">
  <img src="images/header_xs.jpg" alt="logo" class="img-responsive visible-xs-block">
  ```
 
### 十一、 圖示

1. 建議使用Font Awesome取代內建圖示：<http://fontawesome.io>，下載解壓，將其中的CSS和Fonts等目錄放至和index.html同一層即可，並於index.html引入css檔。 ```
  <pre class="brush:xml;gutter:false;">
  <link href="css/font-awesome.min.css" rel="stylesheet">
  ```
2. 套用圖示，.fa-5x是放大5倍，用.fa-fw可固定寬度，另aria-\*是用於其他裝置，如螢幕閱讀器，跟一般人的畫面顯示幾乎沒有關係。 ```
  <pre class="brush:xml;gutter:false;">
  <i class="fa fa-desktop fa-5x" aria-hidden="true"></i>
  ```
3. 可利用.fa-stack 組合不同圖示 ```
  <pre class="brush:xml;gutter:false;">
  <span class="fa-stack fa-5x">
    <i class="fa fa-circle-thin fa-stack-2x text-info"></i>
    <i class="fa fa-desktop fa-stack-1x"></i>
  </span>
  ```
4. 插圖部份用<http://www.flaticon.com>的向量圖示會更好。
 
### 十二、 標籤與徽章

1. 利用.label可以做出圓角文字標籤，其顏色請參考「顏色」單元 ```
  <pre class="brush:xml;gutter:false;">
  <span class="label label-primary">標籤內容</span>
  ```
2. 利用.badge通常用來顯示數字，類似FB未讀資訊那種。若放在按鈕中，會以反白顯示。 ```
  <pre class="brush:xml;gutter:false;">
  <span class="badge">12</span>
  ```
 
### 十三、 頁面標題

1. 利用.page-header搭配<h1>主標題<small>副標題，可做出精美標題組 ```
  <pre class="brush:xml;gutter:false;">
  <div class="page-header">
    <h1>點兩下電腦工作室 <small>只要點兩下滑鼠，這個世界就能連起更多友善的網</small></h1>
  </div>
  ```
 
### 十四、 縮圖組及媒體組

1. 利用.thumbnail將圖文包住，文字部份用.caption包住，會產生一組上圖下文帶框的縮圖組。 ```
  <pre class="brush:xml;gutter:false;">
  <div class="thumbnail">
      <img src="圖">
      <div class="caption">
          <h3>標題</h3>
          <p>內文</p>
      </div>
  </div>
  ```
2. 利用.media將圖文包住，圖片用.media-left，文字部份用.media-body 包住，會產生一組左圖右文的媒體組。當圖使用.media-right時，應置於.media-body之後，會變成右圖左文。 ```
  <pre class="brush:xml;gutter:false;">
  <div class="media">
    <div class="media-left">
      <a href="#"><img src="圖"></a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">媒體標題</h4>
      內文
    </div>
  </div>
  ```
 
### 十五、 警告提示框組、well框及巨幕

1. 利用.alert搭配各種alert顏色，可做出精美圓角外框的警告或提示框組，若裡面有連結，可在連結中用 .alert-link，即可以為連結設置與當前警告框相符的顏色。 ```
  <pre class="brush:xml;gutter:false;">
  <div class="alert alert-info">
    相關內容
  </div>
  ```
2. .well一樣是圓角框，只能設大小如.well-lg無法設顏色，一律為淺灰色。 ```
  <pre class="brush:xml;gutter:false;">
  <div class="well">
    相關內容
  </div>
  ```
3. .jumbotron用於醒目的需求下，除了有灰色框外，裡面的內容會被放大。 ```
  <pre class="brush:xml;gutter:false;">
  <div class="jumbotron">
    <h1>標題</h1>
    <p>文字</p>
  </div>
  ```
 
### 十六、 列表組

1. 利用清單元件搭配.list-group及.list-group-item，即可產生類似表格的圓角列表組。 ```
  <pre class="brush:xml;gutter:false;">
  <ul class="list-group">
    <li class="list-group-item">列表1</li>
    <li class="list-group-item">列表2</li>
  </ul>
  ```
2. 可搭配<a>連結或<button>按鈕來使用。.list-group-item亦可套用顏色 ```
  <pre class="brush:xml;gutter:false;">
  <div class="list-group">
    <a href="#" class="list-group-item active">選項1</a>
    <a href="#" class="list-group-item">選項2</a>
  </div>
  ```
 
### 十七、 面板組

1. 利用.panel搭配.panel-heading及.panel-title或 .panel-body或.panel-footer，即可產生類似表格的圓角面板組。其中可搭配列表組或表格一起使用。 ```
  <pre class="brush:xml;gutter:false;">
  <div class="panel panel-primary">
    <div class="panel-heading"><h3 class="panel-title">面板標題</h3></div>
    <div class="panel-body">面板內容</div>
    <div class="panel-footer">面板註腳</div>
  </div>
  ```
 
### 十八、 選單

1. <http://v3.bootcss.com/components/#nav>
2. 用清單<ul>搭配.nav來做成純選單，.nav-tabs及.nav-pills可定義其外觀，.nav-stacked可做成垂直選單，.nav-justified則可把選項分散對齊。 ```
  <pre class="brush:xml;gutter:false;">
  <ul class="nav navbar-nav">
      <li><a href="#">首頁</a></li>
      <li><a href="service">服務項目</a></li>
      <li><a href="#about">關於我們</a></li>
      <li><a href="#contact">聯繫我們</a></li>
      <li><a href="#map">工作室位置</a></li>
  </ul>
  ```
3. 若要將其中的「服務項目」選項做成下拉選單，需加入： ```
  <pre class="brush:xml;gutter:false;">
  <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Page 1 <span class="caret"></span></a>
      <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
     </ul>
  </li>
  ```
 
### 十九、 各種組件顏色總整理

<table bordercolor="#000000" cellspacing="0" class="table table-hover table-bordered table-striped table-condensed" width="100%"> <colgroup> <col width="28*"></col> <col width="25*"></col> <col width="22*"></col> <col width="24*"></col> <col width="17*"></col> <col width="24*"></col> <col width="25*"></col> <col width="24*"></col> <col width="41*"></col> <col width="26*"></col> </colgroup> <tbody> <tr valign="TOP"> <th bgcolor="#ffffff"> </th> <th bgcolor="#ffffff">前景色

</th> <th bgcolor="#ffffff">背景色

</th> <th bgcolor="#ffffff">按鈕

</th> <th bgcolor="#ffffff">表格

</th> <th bgcolor="#ffffff">表單

</th> <th bgcolor="#ffffff">標籤

</th> <th bgcolor="#ffffff">警告

</th> <th bgcolor="#ffffff">列表

</th> <th bgcolor="#ffffff">面板

</th> </tr> <tr valign="TOP"> <th bgcolor="#ffffff">muted灰

</th> <td bgcolor="#ffffff">.text-muted

</td> <td bgcolor="#ffffff"> </td> <td bgcolor="#ffffff">.btn-default

</td> <td bgcolor="#ffffff">.active

</td> <td bgcolor="#ffffff"> </td> <td bgcolor="#ffffff">label-default

</td> <td bgcolor="#ffffff"> </td> <td bgcolor="#ffffff"> </td> <td bgcolor="#ffffff"> </td> </tr> <tr valign="TOP"> <th bgcolor="#ffffff">primary深藍

</th> <td bgcolor="#ffffff">.text-primary

</td> <td bgcolor="#ffffff">.bg-primary

</td> <td bgcolor="#ffffff">.btn-primary

</td> <td bgcolor="#ffffff"> </td> <td bgcolor="#ffffff"> </td> <td bgcolor="#ffffff">label-primary

</td> <td bgcolor="#ffffff"> </td> <td bgcolor="#ffffff"> </td> <td bgcolor="#ffffff">panel-primary

</td> </tr> <tr valign="TOP"> <th bgcolor="#ffffff">success綠

</th> <td bgcolor="#ffffff">.text-success

</td> <td bgcolor="#ffffff">.bg-success

</td> <td bgcolor="#ffffff">.btn-success

</td> <td bgcolor="#ffffff">.success

</td> <td bgcolor="#ffffff">.has-success

</td> <td bgcolor="#ffffff">label-success

</td> <td bgcolor="#ffffff">alert-success

</td> <td bgcolor="#ffffff">list-group-item-success

</td> <td bgcolor="#ffffff">panel-success

</td> </tr> <tr valign="TOP"> <th bgcolor="#ffffff">info淺藍

</th> <td bgcolor="#ffffff">.text-info

</td> <td bgcolor="#ffffff">.bg-info

</td> <td bgcolor="#ffffff">.btn-info

</td> <td bgcolor="#ffffff">.info

</td> <td bgcolor="#ffffff"> </td> <td bgcolor="#ffffff">label-info

</td> <td bgcolor="#ffffff">alert-info

</td> <td bgcolor="#ffffff">list-group-item-info

</td> <td bgcolor="#ffffff">panel-info

</td> </tr> <tr valign="TOP"> <th bgcolor="#ffffff">warning橘黃

</th> <td bgcolor="#ffffff">.text-warning

</td> <td bgcolor="#ffffff">.bg-warning

</td> <td bgcolor="#ffffff">.btn-warning

</td> <td bgcolor="#ffffff">.warning

</td> <td bgcolor="#ffffff">.has-warning

</td> <td bgcolor="#ffffff">label-warning

</td> <td bgcolor="#ffffff">alert-warning

</td> <td bgcolor="#ffffff">list-group-item-warning

</td> <td bgcolor="#ffffff">panel-warning

</td> </tr> <tr valign="TOP"> <th bgcolor="#ffffff">danger紅

</th> <td bgcolor="#ffffff">.text-danger

</td> <td bgcolor="#ffffff">.bg-danger

</td> <td bgcolor="#ffffff">.btn-danger

</td> <td bgcolor="#ffffff">.danger

</td> <td bgcolor="#ffffff">.has-error

</td> <td bgcolor="#ffffff">label-danger

</td> <td bgcolor="#ffffff">alert-danger

</td> <td bgcolor="#ffffff">list-group-item-danger

</td> <td bgcolor="#ffffff">panel-danger

</td> </tr> </tbody> </table>

### 二十、導覽列

1. <http://v3.bootcss.com/components/#nav>
2. 我們可以將原來的選單，利用<nav>括大成導覽列，其架構如下（.navbar-fixed-top是將選單固定在上方）： ```
  <pre class="brush:xml;gutter:false;">
  <nav class="navbar navbar-fixed-top">
      <div class="container">
          <div class="navbar-header">
              選單標題
          </div>
          原本<ul>選單
      </div>
  </nav>
  ```
3. 若需要修改選項顏色，可自行加入CSS樣式表
  
   ```
  <pre class="brush:css;gutter:false;">
  /*選單項目*/
  ul.nav>li>a {
      color: white;
  }
  
  /*滑鼠移過選單項目時*/
  ul.nav>li>a:hover {
      background-color: transparent;
      border-bottom: 3px solid #ff7f00;
  }
  
  /*焦點在項目上時*/
  ul.nav>li>a:focus {
      background-color: transparent;
      border-bottom: 3px solid red;
  }
  
  /*開啟下拉選單時*/
  ul.nav>li.open>a,
  ul.nav>li.open>a:hover {
      background-color: transparent;
      color: yellow;
  }
  ```
4. 若點選選項，卻遮住，可以在標題上方加入空白已避免被固定選單遮住：
  
   ```
  <pre class="brush:css;gutter:false;">
  .page-header{
    padding-top:60px;
  }
  ```
5. 「選單標題」可套用.navbar-brand
  
   ```
  <pre class="brush:xml;gutter:false;">
  <a class="navbar-brand" href="#">點兩下電腦工作室</a>
  ```
6. 若要做成自適應選單，則將選單包起來，並給一個ID（id="myNavbar"），搭配.collapse navbar-collapse，利用.navbar-right可以讓選單靠右邊。
7. 而原本標題部份須加上一個切換按鈕button，並設定其啟動事件為data-toggle="collapse"，作用目標剛指定的選單ID（data-target="#myNavbar"）：
  
   ```
  <pre class="brush:xml;gutter:false;">
  <nav class="navbar navbar-fixed-top" id="navbar-spy">
      <div class="container">
          <div class="navbar-header">
              選單標題
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
          </div>
  
          <div class="collapse navbar-collapse" id="myNavbar">
              <ul class="nav navbar-nav navbar-right">
                  <li><a href="#">首頁</a></li>
                  ...略...
              </ul>
          </div>
      </div>
  </nav>
  ```
8. 若縮小後，由於透明背景看不到切換按鈕，可以，自行加入切換按鈕的樣式設定： ```
  <pre class="brush:css;gutter:false;">
  .navbar-toggle .icon-bar{
      background-color: #fff;
  }
  ```
 
### 二十一、滑動監視

1. 指選單可根據目前頁面位置自動切換到對應選項。
2. <nav>加上一個ID，例如： ```
  <pre class="brush:xml;gutter:false;">
  <nav class="navbar navbar-fixed-top" id="navbar-spy">
  ```
3. <body> 須加入data-target，將目標鎖定在剛剛設定的ID上，並透過data-spy來指定啟動事件： ```
  <pre class="brush:xml;gutter:false;">
  <body data-target="#navbar-spy" data-spy="scroll">
  ```
 
### 二十二、自動縮小選單

1. 當畫面捲動時，透明背景的導覽列會看不清楚，故當畫面捲動時，可改變一下選單的CSS設定，我們先設定一個新的選單樣式： ```
  <pre class="brush:css;gutter:false;">
  .mini_menu {
      padding-bottom: 10px;
      background: #000 url('images/min-header.jpg') top left /cover;
      border-bottom: 1px solid #156785;
      box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.4);
  }
  ```
2. 接著加入javascript，讓瀏覽器偵測，一旦有捲動，就套用新的樣式外觀：
  
   ```
  <pre class="brush:jscript;gutter:false;">
  <script>
    $(function() {
        $(window).scroll(scroll_style);
    });
  
    function scroll_style() {
        var window_top = $(window).scrollTop();
        if (window_top > 2) {
            $(".navbar").addClass("mini_menu");
        } else {
            $(".navbar").removeClass("mini_menu");
        }
    }
  </script>
  ```
 
### 二十三、簡易滾動視差

1. 先設置一個固定背景圖的樣式，如： ```
  <pre class="brush:css;gutter:false;">
  .parallax {
      background: #ffffff url('images/bg.jpg') center center/cover no-repeat fixed;
      min-height: 300px;
      padding: 30px 0px;
  }
  ```
2. 接著將該樣式套用到div上，並包住 container容器即可。
  
   ```
  <pre class="brush:xml;gutter:false;">
  <div class="parallax">
      <div class="container">
      </div>
  </div>
  ```

:::