[鐵鷹練成]CI之公佈欄(新增公告)

DAY 9

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

蒼鴻鐵鷹練成

老鷹(eagle)

2013-09-24 21:01:01

4295 瀏覽

分享至

頭暈暈眼沉沉想入眠....

來焦點轉到昨天的CODE上

<button class="btn" type="button">新增公告</button>

轉跳頁面有兩種方法

<!-- 第一種 -->
<button class="btn" type="button" onClick="window.location='網址'">新增公告</button>
<!-- 第二種 -->
<a href="網址"><button class="btn" type="button">新增公告</button></a>

這邊我們在建造一個頁面叫做 AddNews.php
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 id="color"><strong>>>>新增公告</strong></td>
  </tr>
  <tr>
    <td><div align="center">
    <!-- placeholder="標題" 請參考 http://kkbruce.tw/Bootstrap/BaseCSS#forms -->
      <input type="text" name="textfield" placeholder="標題"/>
    </div>     
      <label>
        <div align="center"></div>
      </label></td>
  </tr>
  <tr>
    <td id="color"><div align="center"><strong>內容</strong></div></td>
  </tr>
  <tr>
    <td><div align="center">
      <textarea name="textarea"  cols="45" rows="5"></textarea>
    </div></td>
  </tr>
  <tr>
    <td id="color">
    <!-- class="btn-group" 請參考 http://kkbruce.tw/Bootstrap/Components#buttonGroups   -->
    <div class="btn-group">
    <button class="btn" type="submit">新增公告</button>
    <button class="btn" type="reset">重新填寫</button>
    <button class="btn" type="button">回公佈欄</button>
    </div>
    </td>
  </tr>
</table>
</div>

這樣一個非常簡易的新增畫面就出來了
參考圖: