Adding Twitter Bootstrap to CodeIgniter?

2019-03-14 05:05发布

问题:

I have developed website using CodeIgniter that uses MySQL to populate a results page. I would now like to improve all the pages appearances and most places recommend using Bootstrap. I have tried to add Bootstrap to my CodeIgniter project but with no success.

Does anyone know of an up-to-date guide I could follow to complete this?

Thanks

回答1:

A simple way would be to use Bootstrap CDN. For CSS, simply include this line in the <head> section of every webpage (somewhere in your view files, depending on how you have structured them):

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

Bootstrap's plugins depend on jQuery, so you'll need to include jQuery before Bootstrap's JavaScript:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Simple example page:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Your great site!</title>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="jumbotron">
            <div class="container">
                <h1>Hello, world!</h1>
            </div>
        </div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    </body>
</html>


Alternatively you could host the files on your web server. Upload the relevant files to a publicly accessible directory. I'm going to assume that they are in an assets folder, in your web root, like this:

+-- public_html
|  +-- index.php
|  +-- assets
|  |  +-- css
|  |  |  +-- boostrap.css
|  |  +-- js
|  |  |  +-- bootstrap.js
|  |  |  +-- jquery.js
|  (other files/directories...)

To include them in your view files, you can link them like this:

<link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.css"); ?>">

<script type="text/javascript" src="<?php echo base_url("assets/js/jquery.js"); ?>"></script>
<script type="text/javascript" src="<?php echo base_url("assets/js/bootstrap.js"); ?>"></script>

You'll need to have loaded the URL Helper to use the base_url() function.



回答2:

First time using PHP CodeIgniter , Bootstrap and Bitnami mampstack. ( All develope code in local notebook)

1. To extract the file CodeIgniter 3.x and Boostrap 3.x(Twitter) Here my directory :

    /Applications/mampstack-5.4.26-2/apache2/htdocs/TestCoceIginter_Bootstra
    /Applications/mampstack-5.4.26-2/apache2/htdocs/TestCoceIginter_Bootstrap/application
    /Applications/mampstack-5.4.26-2/apache2/htdocs/TestCoceIginter_Bootstrap/assets

2.Modification (Add)

a. application/controller/Welcome.php

    <?php defined('BASEPATH') OR exit('No direct script access allowed');
    class Welcome extends CI_Controller 
    {
    public function __construct() { 
            parent::__construct();
            $this->load->helper('url');

    public function index(){
            $this->load->view('welcome_message');
            }
    }

b.application/views/welcome_message.php

    <?php defined('BASEPATH') OR exit('No direct script access allowed');?>
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Welcome to CodeIgniter</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.css"); ?>">
    <script type="text/javascript" src="<?php echo base_url("assets/js/jquery.min.js"); ?>"></script>
    <script type="text/javascript" src="<?php echo base_url("assets/js/bootstrap.js"); ?>"></script>   
    </head>


回答3:

If you tried to remove the 'index.php' from url like in the official example then you should try this

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteBase /
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ index.php/$1 [NC,L,QSA]
</IfModule>


回答4:

Open the config.php in /CodeIgniter/application/config directory,

And edit it as:

$config['base_url'] = 'http://localhost/your_folder/';