育將電腦工作室 - 線上書籍

13. 第十三週 GOOGLE表單(下)

15. 第十五週綜合練習 next

網頁設計好好玩(下)
==========

一、複製空白框架，建立一個 ex20160530.html

二、複製index.html 的NAV，並加上一個，index.html先改完，再複製。

```
<pre class="brush:as3;">

<li><a href="ex20160530.html">Font-Awesome</a></li>
```

三、Font-Awesome中文網站

<http://www.bootcss.com/p/font-awesome/>

四、安裝

下載：<https://github.com/FortAwesome/Font-Awesome/archive/v3.2.1.zip>

請存至 class目錄下，並解壓縮，且將資料改名為 「Font-Awesome」

在ex20160530.html 的<head> </head>加入

<link href="css/bootstrap.min.css" rel="stylesheet"> 的後面

```
<pre class="brush:as3;">

<link rel="stylesheet" href="class/Font-Awesome/css/font-awesome.min.css">
```

五、範例

1. 請用容器container建一個 二等分的頁面
2. 按鈕範例：[http://v3.bootcss.com/css/#buttons](http://v3.bootcss.com/css/#buttons) ```
  <pre class="brush:as3;">
  
    
    <div class="container">
      <h3 class="text-center">按鈕</h3>
      <hr>
      <div class="row">
        <div class="col-md-6">
          <p>
            <a class="btn btn-default" href="#"><i class="icon-repeat"></i> 重新載入</a>
            <a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-large"></i> 結帳</a>
            <a class="btn btn-danger" href="#"><i class="icon-trash icon-large"></i> 刪除</a>
           </p>
        </div>
  
        <div class="col-md-6">
          <p>
            <a class="btn btn-lg btn-primary" href="#"><i class="icon-comment"></i> 評論</a>
            <a class="btn btn-sm btn-warning" href="#"><i class="icon-cog"></i> 設定</a>
            <a class="btn btn-xs btn-info" href="#"><i class="icon-info-sign"></i> 資訊</a>
            <a class="btn " href="#"><i class="icon-facebook-sign"></i> FB</a>
          </p>
        </div>
      </div>
      <hr>
    </div>
  ```
3. 按鈕組 ```
  <pre class="brush:as3;">
  
  
    <div class="container">
      <h3 class="text-center">按鈕組</h3>
      <hr>
      <div class="row">
        <div class="col-md-6">
          <div class="well" style="padding: 8px 0;">
            <ul class="nav">
              <li class="active"><a href="#"><i class="icon-home"></i> Home</a></li>
              <li><a href="#"><i class="icon-book"></i> Library</a></li>
              <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
              <li><a href="#"><i class="icon-cogs"></i> Settings</a></li>
            </ul>
          </div>
        </div>
        <div class="col-md-6">
          <div class="btn-toolbar">
            <div class="btn-group">
              <a class="btn" href="#"><i class="icon-align-left"></i></a>
              <a class="btn" href="#"><i class="icon-align-center"></i></a>
              <a class="btn" href="#"><i class="icon-align-right"></i></a>
              <a class="btn" href="#"><i class="icon-align-justify"></i></a>
            </div>
            <div class="btn-group">
              <a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a>
              <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="icon-caret-down"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
                <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
                <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
                <li class="divider"></li>
                <li><a href="#"><i class="i"></i> Make admin</a></li>
              </ul>
            </div>
          </div>
  
        </div>
      </div>
      <hr>
    </div>
  ```
4. 通过应用 `icon-large` (增大 33%), `icon-2x`, `icon-3x` 或 `icon-4x` 样式让图标变得更大。 ```
  <pre class="brush:as3;">
  <p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
  <p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
  <p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
  <p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
  ```
5. #### Animated Spinner
  
  Use the `icon-spin` class to get any icon to rotate. Works best with`icon-spinner` and `icon-refresh`.
  
   ```
  <pre class="brush:as3;">
  <i class="icon-spinner icon-spin"></i> Spinner icon when loading content...
  ```
6. #### Bordered & Pulled Icons
  
  Use `icon-border` and `pull-right`or `pull-left` for easy pull quotes or article graphics.
  
   ```
  <pre class="brush:as3;">
  <i class="icon-quote-left icon-4x pull-left icon-muted"></i>
  Use a few of the new styles together ... lots of new possibilities.
  ```
7.

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown