I will be leading you how to merge bootstrap into your codeIgniter project. There are two ways that you can bootstrap in your project.
Method 1 - Load bootstrap online
In this method you have to give links of following libraries inside the head tag in view pages.
Method 2 - Download and load bootstrap
You can download Bootstrap and merge it with your project.
Step 1 : Download Lastest Bootstrap and Jquery into your computer.
Step 2 : Create a folder called asserts in your codeIgniter project folder.
Step 3 : Extract it and copy css, fonts, js folders to assets folder.
Step 4 : Copy jquery.js file to assets folder.
Then there are two ways that you can call these libraries
Method 1 - Import in head tag every view file.
Create a folder in views called template and inside that create php files called header.php and footer.php and page.php. In the header.php you can put common contain from <html> to <body> tag for whole project. You can send title which is stored in the head title tag, as a variable. The header.php will be as follows
Then you can combine header and footer inside page.php with the requested view file as follows.
Have nice coding !!!
Like us on facebook
Method 1 - Load bootstrap online
In this method you have to give links of following libraries inside the head tag in view pages.
//css <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> //jquery <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> //javascript <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Method 2 - Download and load bootstrap
You can download Bootstrap and merge it with your project.
Step 1 : Download Lastest Bootstrap and Jquery into your computer.
Step 2 : Create a folder called asserts in your codeIgniter project folder.
Step 3 : Extract it and copy css, fonts, js folders to assets folder.
Step 4 : Copy jquery.js file to assets folder.
Then there are two ways that you can call these libraries
Method 1 - Import in head tag every view file.
<link rel="stylesheet" href="/assets/css/bootstrap.css" /> <link rel="stylesheet" href="/assets/css/custom.css" /> <link href="/assets/css/bootstrap.min.css" rel="stylesheet">We have to import js files for jquery and bootstrap just before the </body> tag
<footer> <script type="text/javascript" src="/assets/js/jquery-3.1.1.js"></script> <script type="text/javascript" src="/assets/js/bootstrap.js"></script> </footer>Method 2 - Create a template to load bootstrap.
Create a folder in views called template and inside that create php files called header.php and footer.php and page.php. In the header.php you can put common contain from <html> to <body> tag for whole project. You can send title which is stored in the head title tag, as a variable. The header.php will be as follows
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/assets/css/bootstrap.css" /> <link rel="stylesheet" href="/assets/css/custom.css" /> <link href="/assets/css/bootstrap.min.css" rel="stylesheet"> <title><?php echo $title?></title> </head> <body>Then in the footer.php we can put from </body> to </html>. It is as follows.
<script type="text/javascript" src="/assets/js/jquery-3.1.1.js"> </script> <script type="text/javascript" src="/assets/js/bootstrap.js"> </script> </body> </html>Those script tags are the js files of jQuery and bootstrap. Since those code segments are common for the whole project, you can put before </body>
Then you can combine header and footer inside page.php with the requested view file as follows.
<?php $this->load->view('template/header'); ?>
<?php $this->load->view($template);?>
<?php $this->load->view('template/footer'); ?>
First this will load the header.php that you have already created. Then the requested header file will be loaded. $template is the requested view file, which will be called by the controller. As an example let’s see how we called the login page till now$this->load->view('login');
You can replace this with$data['template'] = 'login';
$data['title']='User Login';
$this->load->view('template/page', $data);
In here, $data[template] is the requested view, $data[title] is the relevant title for the view. Template/page is the page.php file in the template folder that you have created. for the view pages at the head, we have to import bootstrap and set meta data<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/assets/css/bootstrap.css" /> <link href="/assets/css/bootstrap.min.css" rel="stylesheet"> <title>User Login</title> </head>
Have nice coding !!!
Like us on facebook
Comments
Post a Comment