about 10 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可以參考

← CI 練習- [帳號申請] database 連結 手作 →
 
comments powered by Disqus