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

DAY 8

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

蒼鴻鐵鷹練成

老鷹(eagle)

2013-09-23 19:40:58

3280 瀏覽

分享至

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

紅色為公佈欄三字
橘色線為搜尋
藍色圈圈新增
咖啡色線公佈欄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>

大概畫面