over 9 years ago
延續前幾篇的練習，有了基本功能，再來就是美化了，
最常用的前端框架就非bootstrap莫屬
這篇將介紹如何套用bootstrap
下載 Bootstrap
若沒有要特別去做一些調整，就直接點選客製化與下載吧。
下載後解壓縮應該會看到 bootstrap 目錄有底下這些檔案
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── img/
├── glyphicons-halflings.png
└── glyphicons-halflings-white.png
把整個 bootstrap 資料夾複製到 Project 底下，更名為 asset (配合之前的 mod_rewrite )
整個Project架構會像這樣
AppServ/www/account/
├── application/
├── assets/ (bootstrap複製後，改名)
│ ├── css/
│ ├── js/
│ └── img/
├── system/
├── .htaccess
└── index.php
修改 views
在views底下新增templates資料夾，並新增 header.php、footer.php兩個檔案
AppServ/www/account/application/
└── views/
├── account/
│ ├── apply.php
│ └── success.php
└── templates/
├── header.php
└── footer.php
header.php
<html>
<head>
<link href="<?php echo $this->config->base_url('assets/css/bootstrap.min.css');?>" type="text/css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="<?php echo $this->config->base_url('assets/js/bootstrap.min.js');?>"></script>
</head>
<body>
<div class="container">
<h1><?php echo $title;?></h1>
footer.php
</div>
</body>
</html>
修改 Controllers
AppServ/www/account/application/controllers/account.php
public function index()
{
$this->load->helper('form');
$data['title'] = 'Account';
$this->load->view('templates/header',$data);
$this->load->view('account/apply');
$this->load->view('templates/footer');
}
分別在 $this->load->view('account/apply'); 前後
增加 $this->load->view('templates/header',$data); 和 $this->load->view('templates/footer');
demo
在瀏覽器打 localhost/account/account就可以看到 demo 啦
來兩張前後對照圖
套用bootstrap前
套用bootstrap後
更進一步的修改可以參考Bootstrap官網的範例，利用查看網頁原始碼的功能來看每個網站的語法，
或是在[客製化與下載]((http://kkbruce.tw/Bootstrap/Customize#download)改成你想要的樣式！
//這個網站也有幾個useful的example可以參考
