Skip navigation

Welcome to CodeIgniter Skeleton!

The page you are looking at is being generated dynamically by CodeIgniter.

If you would like to edit this page you'll find it located at:
application/modules/welcome/views/welcome_message.php

The corresponding controller for this page is found at:
application/modules/welcome/controllers/Welcome.php

If you are exploring CodeIgniter for the very first time, you should start by reading the User Guide.

Page rendered in 0.1126 seconds. CodeIgniter Version 2.1.4

Typography

<h1>

<h2>

<h3>

<h4>

<h5>
<h6>

.lead <small> <strong> <em> <abbr> abbr.initialism <code>

.text-muted .text-primary .text-success .text-info .text-warning .text-danger

.label.label-default .label-primary .label-success .label-info .label-warning .label-danger

.alert .alert-dismissable a.alert-link
.alert .alert-success a.alert-link
.alert .alert-info a.alert-link
.alert .alert-warning a.alert-link
.alert .alert-danger a.alert-link
.well
.well.well-lg
.well.well-sm

.text-left

.text-center

.text-right

<blockquote><p>

<small <cite> small>

blockquote.pull-right p

Someone famous in Source Title
<ul>
  • <li>
  • List item
    • <ul><li>
    • <li></ul>
  • List item

<ol>
  1. List item
  2. List item
    1. List item
    2. List item
  3. List item

ul.list-unstyled
  • List item
  • List item
    • List item
    • List item
  • List item

ul.list-inline
  • List item
  • List item
  • List item

ul.list-group
  • li.list-group-item
  • .badge List item
  • List item
Address
Address
<dl>
<dt>
<dd>
Term
Description
Description
dl.dl-horizontal
Term
Description
Term
Description
Description

Tables

table.table
<tr><th><th></tr>
<tr><td><td></tr>
tdtd
.table-striped
thth
tdtd
tdtd
.table-bordered
thth
tdtd
tdtd
.table-hover
thth
tdtd
tdtd
.table-condensed
thth
tdtd
tdtd
Contextual classes
thththth
td.active td.success td.warning td.danger
tr.active tdtdtdtd
tr.success tdtdtdtd
tr.warning tdtdtdtd
tr.danger tdtdtdtd
div.table-responsive table
thththth
tdtdtdtd
tdtdtdtd

Forms

<form>

...
. .
. .

.help-block: Example block-level help text here.

form.form-horizontal

.form-control-static

<select multiple>

form.form-inline

Buttons

a.btn a.btn.disabled


div.btn-group

.btn-group-justified

<a> 2 3

Images

.img-rounded .img-circle .img-thumbnail

.dropdown ul.dropdown-menu

ul.nav.nav-tabs.nav-justified


ul.nav.nav-pills.nav-justified

Pagination

Jumbotron

.jumbotron .container h1

<p>

Progress bars

.progress .progress-bar
.progress.progress-striped .progress-bar
.progress.progress-striped.active .progress-bar

Panels

.panel.panel-default
.panel-heading

.panel-heading h3.panel-title

.panel-body
.panel.panel-primary .panel-heading
...
.panel.panel-success .panel-heading
...
.panel.panel-info .panel-heading
...
.panel.panel-warning .panel-heading
...
.panel.panel-danger .panel-heading
...

More...

Modals

Via data attributes: data-toggle="modal" data-target="#modal" Launch modal

Via Javascript: $('#modal').modal() Launch modal

Options: backdrop keyboard show remote

Methods: .modal('toggle') .modal('show') .modal('hide')

Events: show.bs.modal shown.bs.modal hide.bs.modal hidden.bs.modal

Dropdowns

Via data attributes: data-toggle="dropdown"


Via Javascript: $('.dropdown-toggle').dropdown()

Methods: .dropdown('toggle')

Events: show.bs.dropdown shown.bs.dropdown hide.bs.dropdown hidden.bs.dropdown

ScrollSpy

Via data attributes: data-spy="scroll" data-target="#navbar-target"

Via Javascript: $('body').scrollspy({ target: '#navbar-target' })

Options: target offset

Methods: .scrollspy('refresh')

Events: activate.bs.scrollspy

Example: assets/js/modules/welcome.js

Togglable tabs

.table-content .tab-pane.active

.table-content .tab-pane

Events: show.bs.tab shown.bs.tab

Tooltips

Usage: $('[data-toggle="tooltip"]').tooltip()


Options: animation html placement selector title trigger delay container

Methods: .tooltip('toggle') .tooltip('show') .tooltip('hide') .tooltip('destroy')

Events: show.bs.tooltip shown.bs.tooltip hide.bs.tooltip hidden.bs.tooltip

Popovers

Usage: $('[data-toggle="popover"]').popover()


Options: animation html placement selector title content trigger delay container

Methods: .popover('toggle') .popover('show') .popover('hide') .popover('destroy')

Events: show.bs.popover shown.bs.popover hide.bs.popover hidden.bs.popover

Collapse

Via data attributes:


Via Javascript: $(".collapse").collapse()

Options: parent toggle

Methods: .collapse('toggle') .collapse('show') .collapse('hide')

Events: show.bs.collapse shown.bs.collapse hide.bs.collapse hidden.bs.collapse


Via data attributes: data-target="#carousel" data-slide-to data-slide

Via Javascript: $('.carousel').carousel()

Options: interval pause wrap

Methods: .carousel('cycle') .carousel('pause') .carousel('number') .carousel('prev') .carousel('next')

Events: slide.bs.carousel slid.bs.carousel

Ajaxify link

Via rel="async" and ajaxify="{$ajax_url}"

Right

Via CIS.Ajax.request('{$ajax_url}', { context: {$the_above_button} })

Trigger

Ajaxify form

Via rel="async" and action="{$ajax_url}"

Ajaxify dialog

$this->response->alert($title, $body) Show alert dialog

$this->response->confirm($title, $body) Show confirm dialog

$this->response->dialog([ ... ]) Show custom dialog

This pagelet also contains script using $this->_load_script() of MY_Controller.
You will see the message "Script executed!" on the browser console.

Ajaxify photo upload

Show photo upload dialog Open photo upload page