SEO para Google

Cómo integrar Twitter Bootstrap y Codeigniter

Venimos con una de nuestras guías y tutoriales sobre Codeigniter vamos a integrar Twitter Bootstrap en Codeigniter de la forma más sencilla y rápida posible.

Si has llegado hasta aquí  seguro que ya sabes que Codeigniter es uno de los frameworks MVC (Modelo-Vista-Controlador) más en alza actualmente, por su parte, Bootstrap, que fue realizado por el equipo de frontends de Twitter, es quizá (y pongo quizá por se políticamente correcto) el mejor framwork para fronend existente en la actualidad.

Combinar ambos frameworks hará que programar sea mejor que el sexo para ti. ¡A gozar!

Qué necesitas

Aunque es bastante obvio, esto es lo que necesitas tener listo para usar Bootstrap y Codeigniter juntos y en sintonía:

  • Una instalación de Codeigniter, si quieres, te enseñamos cómo instalar codeigniter y ponerlo a funcionar en este tutorial.
  • Descargar Twitter Bootstrap 3, en su web oficial.
  • jQuery. descarga esta librería de javascript aquí.

Bootstrap + Codeigniter paso a paso

Paso 1. – Crear un directorio para Bootstrap

Crea una carpeta llamada “assets” (es lo que te recomendados, si quieres ponerle otro nombre puedes) al mismo nivel que la carpeta application de Codeigniter, en esta carpeta tendremos todo el contenido de nuestro Bootstrap.

Assets para Bootstrap

Esta es la estructura que deben tener los directorios

Paso 2. – Añadir el contenido

Al descomprimir Boostrap encontramos tres carpetas: css, fonts y js. Como necesitamos de la librería jQuery para que Bootstrap funcione vamos a meter el .js que hemos descargado de jQuery dentro de la carpeta js. Te recomiendo que utilices la versión minify, ahorras tiempo de carga…

Carpeta assets

Así quedará la carpeta assets

Paso 3. – Subir las librerías

Ahora subimos todo el contenido, las tres carpetas de antes, a la carpeta assets. Con esto tendremos casi todo listo.

Paso 4. – Enlazar desde las vistas

Que el último paso, tenemos que enlazar las librerías desde todas las vistas en las que queramos usar Bootstrap, para ello simplemente tenemos que incluir la siguiente etiqueta dentro del <head> de las vista.

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

Con esta llamamos al css de Bootstrap.
Y añadiendo antes de </body>lo siguiente para cargar las funciones de javascript:

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

Fíjate en que el archivo de jQuery corresponda con el tuyo, en mi caso la versión actual es la 1.11.3, pero cuando tú leas esto quizá haya cambiado.

Con esto ya podemos empezar a usar Bootstrap en nuestro proyecto de Codeigniter.

8 comments for “Cómo integrar Twitter Bootstrap y Codeigniter

  1. 14 marzo, 2016 at 10:20 pm

    Gracias por la ayuda

  2. 7 junio, 2016 at 4:42 pm

    Excelente, muchas gracias.

  3. ade
    9 junio, 2016 at 7:09 pm

    Muy interesante 🙂

  4. valar
    14 junio, 2016 at 2:55 pm

    Una guía precisa y consisa…
    LIKE! +1

  5. :)
    28 junio, 2016 at 7:59 am
  6. Victor
    3 septiembre, 2016 at 4:32 am

    Muy útil la guía, ¡muchas gracias!

  7. 11 septiembre, 2016 at 4:42 am

    No hay que olvidarse antes cargar en autoload:

    $autoload[‘helper’] = array(‘url’);

    se encuentra en : application/config/autoload.php

    • fruiz
      22 septiembre, 2016 at 11:33 am

      ¡Muchas gracias por la aportación Alberto!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *