[鐵鷹練成]文章區(文章分類管理-view)[2]

DAY 38

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

蒼鴻鐵鷹練成

老鷹(eagle)

2013-10-23 21:22:53

2384 瀏覽

分享至

這次老鷹遲疑了.....
最近老鷹愛上JQM(jQuery Mobile)了....
不過這次既然介紹了Bootstrap,那還是先講Bootstrap吧!

首先先來做個文章分類管理好了!!

直接來看code

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
#color{
     background-color: #666;
     color: #FFF;
}
#color2{
     background-color: #999;
}
#color3{
     background-color: #CCC;
}
#heig{
     height:10px;
}
</style>
<title>管理</title>

<div class="container">
  <table width="1200" border="1" class="table table-striped table-bordered table-condensed">
    <tr>
      <td id="color"><strong>>>>管理</strong></td>
    </tr>
    <tr>
      <td>
      <div align="center">
      <div class="btn-group">
      <button class="btn" type="button">文章分類管理</button>
      <button class="btn" type="button">文章管理</button>
      <button class="btn" type="button">使用者管理</button>
      <button class="btn" type="button">推薦管理</button>
      <button class="btn" type="button">留言板管理</button>
      </div>
      </div>
      </td>
    </tr>
    <tr>
      <td><table width="1200" border="1" class="table table-striped table-bordered table-condensed table-hover">
        <tr>
          <td colspan="3" id="color2"><strong>>>>文章分類管理</strong></td>
          </tr>
        <tr>
          <td colspan="3"><form id="form1" name="form1" method="post" action="" class="form-inline">
          <div id="heig">
            <strong>
            搜尋:
            <label>
              <input type="text" name="like" id="like" />
            </label>
            <label>
              <input type="submit" value="搜尋" class="btn" />
            </label>
            </strong>
            </div>
          </form></td>
          </tr>
        <tr>
          <td colspan="3"><form id="form2" name="form2" method="post" action="" class="form-inline">
            <div id="heig">
            <strong>
          新增分類-- 名稱:
              <label>
                <input type="text" name="class_name" id="class_name" />
              </label>
            英文
            <label>
              <input type="text" name="class_en" id="class_en" />
            </label>
            <label>
              <input type="submit" value="新增" class="btn" />
            </label>
            </strong>
            </div>
          </form></td>
          </tr>
        <tr>
          <td><div align="center"><strong>項次</strong></div></td>
          <td><div align="center"><strong>名稱</strong></div></td>
          <td><div align="center"><strong>英文</strong></div></td>
        </tr>
        <?php foreach($query->result_array() as $key=>$row):?>
        <tr>
          <td><div align="center"><strong>
            <?=$key;?>
          </strong></div></td>
          <td><div align="center"><strong>
            <?=$class_name;?>
          </strong></div></td>
          <td><div align="center"><strong>
            <?=$class_en;?>
          </strong></div></td>
        </tr>
        <?php endforeach;?>
      </table></td>
    </tr>
  </table>
</div>

介面完成圖

好打完收工~~!
繼續研究JQM~~!