Bootstrap is a widely used responsive html framework. It is based on grid layout and is easier to understand and easier to implement. Bootstrap is an awesome framework to use in web projects. You can read more here twitter bootstrap.
Download the latest version of Bootstrap and extract it. There will be three folders namely css, fonts and js. css folder contains the minified and uncompressed .css files, fonts folder contains icon files and js folder contains the minified and uncompressed .js files.
Now create a folder called assets in the codeIgniter root folder in the server. It will be like: C:/Program files/wamp/www/codeIgniter/assets/. Copy the three folders css, js and fonts that we downloaded into the assets folder. If you are working in ubuntu, you might want to change permission of the newly created assets folder and its subfolders like this chmod 755 -R /var/www/codeIgniter/assets.
Now create a templates folder in application/views and create two files header.php and footer.php in it. The beauty of this setup is we can include this header and footer in every page and in case any editing is required we need to edit in one file.
Put these in the header.php
page_one.php
pages.php
Okay so this is how you can use bootstrap in codeIgniter. Happy bootstrapping.. :)
Download the latest version of Bootstrap and extract it. There will be three folders namely css, fonts and js. css folder contains the minified and uncompressed .css files, fonts folder contains icon files and js folder contains the minified and uncompressed .js files.
Now create a folder called assets in the codeIgniter root folder in the server. It will be like: C:/Program files/wamp/www/codeIgniter/assets/. Copy the three folders css, js and fonts that we downloaded into the assets folder. If you are working in ubuntu, you might want to change permission of the newly created assets folder and its subfolders like this chmod 755 -R /var/www/codeIgniter/assets.
Now create a templates folder in application/views and create two files header.php and footer.php in it. The beauty of this setup is we can include this header and footer in every page and in case any editing is required we need to edit in one file.
Put these in the header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap example</title>
<link href="<?php echo base_url("assets/css/bootstrap.min.css"); ?>" rel="stylesheet">
<link rel="stylesheet" href="<?php echo base_url("assets/css/font-awesome.min.css");?>">
</head>
<body>
<div id="content">
Put these in the footer.php </div>
<!-- Scripts -->
<script src="<?php echo base_url("assets/js/jquery-1.10.2.min.js");?>"></script>
<script src="<?php echo base_url("assets/js/bootstrap.min.js");?>"></script>
</body>
</html>
It is important to use the function base_url() to output the location of files. It ensures cross-platform compatibility.
Now create a folder called pages in application/views folder and create a file page_one.php and put the code in it. You can have your own bootstrap code in it.
page_one.php
<div class="container-fluid text-center">
<h1>Hello, world!</h1>
<h3><p class="text-center">This was a simple tutorial to show how bootstrap framework can be used
alongside codeIgniter framework. hope you guys enjoyed it and learned something new! Cheers..</p>
</h3>
<p><a class="btn btn-primary btn-lg" role="button">Learn more »</a></p>
<hr>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Article contents goes here. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Article contents goes here </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Article contents goes here</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© Company 2013</p>
</footer>
</div> <!-- /container -->
Now create and write the controller code in pages.php in application/controllers folderpages.php
<?php
class Pages extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->helper('url_helper');
}
public function load($page)
{
$this->load->view('templates/header');
$this->load->view('pages/'.$page);
$this->load->view('templates/footer');
}
}
Now if you point the browser to your webroot followed by index.php/load/page_one then you will see a simple, clean html page developed using bootstrap framework.
In my case the address is localhost/codeIgniter/index.php/load/page_one.Okay so this is how you can use bootstrap in codeIgniter. Happy bootstrapping.. :)
No comments:
Post a Comment