線上書籍

Home

網頁設計好好玩(下)

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

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

<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>加入


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

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

五、範例

  1. 請用容器container建一個 二等分的頁面
  2. 按鈕範例:http://v3.bootcss.com/css/#buttons​ <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. 按鈕組 <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 样式让图标变得更大。 <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 withicon-spinner and icon-refresh.

    <i class="icon-spinner icon-spin"></i> Spinner icon when loading content...
  6. Bordered & Pulled Icons

    Use icon-border and pull-rightor pull-left for easy pull quotes or article graphics.
     

    <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.