iT邦幫忙

DAY 8
5

[鐵鷹練成]CodeIgniter + Bootstrap系列 第 8

[鐵鷹練成]CI之公佈欄(view 初稿)

這邊要開始講老鷹最弱的前端了!
首先公佈欄大約長像

紅色為公佈欄三字
橘色線為搜尋
藍色圈圈新增
咖啡色線公佈欄list

老鷹就直接上CODE

<?php
/*---------------------------------------*/
//........ 此頁面請放在view資料夾底下.......//
/*---------------------------------------*/
$link = 'http://localhost/test/';
?>

<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>公佈欄</title>
<!--以下是 Bootstrap 的文件包-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<?=$link;?>css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="<?=$link;?>css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="<?=$link;?>js/jquery.js"></script>
<script src="<?=$link;?>js/bootstrap.min.js"></script>
<style>
#heig{
     height:10px;
}
#color{
     background-color: #E5E5E5;
}
</style>


<!--"container"為固定置中,請參考 http://kkbruce.tw/Bootstrap/Scaffolding 佈局篇-->
<div class="container">
<!--class="table table-bordered table-condensed"請參考 http://kkbruce.tw/Bootstrap/BaseCSS#tables -->
  <table width="1200" border="0" class="table table-bordered table-condensed">
    <tr>
      <td colspan="2" bgcolor="#CCCCCC"><div align="center"><strong>公佈欄</strong></div></td>
    </tr>
    <tr>
      <td>
      <!-- 請參考 http://kkbruce.tw/Bootstrap/BaseCSS#forms -->
      <div id="heig">
      <form action="" method="post" name="like" class="form-inline" id="like">
        <strong>搜尋標題: </strong>
        <label>
        <input type="text" name="title"/>
        </label>
        <button class="btn" type="submit">搜尋</button>
      </form>
      </div>
      </td>
      <td>

        <div align="center">       
          <!-- 請參考 http://kkbruce.tw/Bootstrap/BaseCSS#buttons -->
          <button class="btn" type="button">新增公告</button>
      </div></td>
    </tr>
    <tr>
      <td colspan="2"><table width="1200" border="0"  class="table table-bordered table-condensed table-striped table-hover">
        <tr>
          <td id="color"><div align="center"><strong>項次</strong></div></td>
          <td id="color"><div align="center"><strong>分類</strong></div></td>
          <td id="color"><div align="center"><strong>標題</strong></div></td>
          <td id="color"><div align="center"><strong>時間</strong></div></td>
          <td id="color"><div align="center"><strong>管理</strong></div></td>
        </tr>
        <tr>
          <td><div align="center"></div></td>
          <td><div align="center"></div></td>
          <td><div align="center"></div></td>
          <td><div align="center"></div></td>
          <td><div align="center"></div></td>
        </tr>
      </table></td>
    </tr>
  </table>
</div>

大概畫面

老鷹沒有美術天分哭,請見諒!

待續....


上一篇
[鐵鷹練成]CI之公佈欄(資料庫篇)
下一篇
[鐵鷹練成]CI之公佈欄(新增公告)
系列文
[鐵鷹練成]CodeIgniter + Bootstrap31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
SunAllen
iT邦研究生 1 級 ‧ 2013-09-23 19:54:19

前端...我慘到爆怒怒怒

沙發坐到了灑花

謝謝
前端是我的一個痛
JS CSS 美工都是我的弱項!
目前在補足JS這塊,後續要開發APP要用到Orz

0
pajace2001
iT邦研究生 1 級 ‧ 2013-09-23 20:34:00

CI? Continue Integration 嗎?疑惑

PHP CodeIgniterOrz

凍仁翔 iT邦新手 3 級 ‧ 2013-09-24 11:25:04 檢舉

CI? Command Line 毆飛

我要留言

立即登入留言