Twitter Bootstrap is a frontend HTML5 framework that allows anyone to easily construct reliable interfaces. At the time of writing, the version of Bootstrap used is version 3.1.1.
We will use Twitter Bootstrap throughout this book to provide the framework for all view files and templates. We will look at how to download Twitter Bootstrap and how to install it in the CodeIgniter filesystem.
Firstly, we will need to download the Twitter Bootstrap files. To do that, perform the following steps:
Open your web browser and go to the Bootstrap download link at http://getbootstrap.com/getting-started. You'll see something similar to what is shown in the following screenshot:
Find the Download Bootstrap link and click on it (as indicated in the preceding screenshot); the download will start automatically.
Once the download is finished, go to its location on your machine and unpack the archived file. Inside the unpacked file, you should see something similar to what is shown in the following structure:
bootstrap/ ├── css/ │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap.css │ └── bootstrap.css.map │ └── bootstrap.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
Move the bootstrap
folder to your CodeIgniter installation so that the file hierarchy looks like the following:
/path/to/web/root/ ├── application/ └── views/ ├── common ├── header.php ├── footer.php ├── system/ ├── bootstrap/ ├── index.php ├── license.txt
In the preceding tree structure, the application
and system
directories are to do with CodeIgniter, as are the index.php
and license.txt
files; however, the bootstrap
directory contains the contents of your Bootstrap download.
I have also indicated the location of the common header.php
and footer.php
files. These files are used throughout the book and act as a wrapper for every other view file.