Documentation

Common Usage

Inclusion

In the header section of php class, use the O2System Bootstrap's component as follows:

use O2System\Bootstrap\Components\{{component}};

Replace {{component}} with O2System Bootstrap Component's Class Name.

Example

use O2System\Bootstrap\Components\Header;

Declaration

Inside of the method's block, create new O2System Bootstrap Factory's component instance.

$variable = new {{component}}();

Example

$myButton = new Header();

Available O2System Bootstrap Component's Class

Here are a set of components could be used in class instantiate. For detail description of each components, please see the component's list section or click one of the component below:

Component's Name	Component's Name	Component's Name
Alert	Article	Badge
Breadcrumb	Button	Calendar
Carousel	Dropdown	Embed
Fieldset	Form	Grid
Group	Header	HTML
Image	Input	Jumbotron
Label	Link	Lists
Media	Modal	Nav
Navbar	Pager	Pagination
Panel	Progress	Slide
Table	Tabs	Tag
Thumbnail	Toolbar	Well

Modifying

All components declared would be rendered by its default attributes. To modify the component, O2System Bootstrap Factory uses some methods attached to the declared component's instance.

Example

// Declare header instance
$myHeader = new Header();

// Modify its title and subtext
$myHeader->setTitle('My Header');
$myHeader->setSubtext( 'My Header Subtext' );

Please refer to available built in methods list for each components used.

Components Class List

Alert

O2System Bootstrap Factory has four kinds of alert; success, info, warning, and danger.

Basic Usage

$alert = new Alert($content, $type);

Parameter

Variable	Type	Requirement	Description
`$content`	`string`	Required	the text content of the alert
`$type`	`string`	Required	the alert type, valid values are: `"danger"`, `"info"`, `"success"`, and `"warning"`,

Basic Example

<?php
use O2System\Bootstrap\Components\Alert;
...
$alertSuccess = new Alert('This is an example of success alert', 'success');
...

Advanced Usage

This component could be manipulated using built in methods created in the class.

Advanced Example

<?php
use O2System\Bootstrap\Components\Alert;
...
$alertSuccess = new Alert('This is an example of success alert', 'success');

//set a title using setTitle() method
$alertSuccess->setTitle('This is a title', 'h2');
...

Built In Method

Below is a set of method could be used to manipulate the basic usage of this component:

Method's Name	Parameter	Param. Requirement	Description
`__clone()`	-	-	to duplicate current allert with current configurations
`isDismissible()`	-	-	to check if the alert is dismissable
`setTitle($title)`	`string $title`	Required	to set alert's title

Article

Not yet available for current stable release

Badge

Badge is numerical indicators of how many items are associated with a link. It is used to easily highlight new or unread items by adding a <span class="badge"> to some other components.

Basic Usage

$alert = new Badge($count, $component);

Parameter

Variable	Type	Requirement	Description
`$count`	`integer`	Required	the number wants to be displayed in the badge
`$component`	`object`	Required	the component where the badge is appeared

Basic Example

<?php
use O2System\Bootstrap\Components\Alert;
use O2System\Bootstrap\Components\Link;
...
//create a badge for a link
$badge = new Badge(40, Link( 'My Link', 'http://myurl.com' ));
...

Advanced Usage

This component could be manipulated using built in methods created in the class.

Advanced Example

<?php
use O2System\Bootstrap\Components\Alert;
use O2System\Bootstrap\Components\Link;
...
$badge = new Badge(30, Link('My Link', '#'));

// set badge value which will update the badge's count to 20
$badge->setValue(20);
...

Built In Method

Below is a set of method could be used to manipulate the basic usage of this component:

Method's Name	Parameter	Param. Requirement	Description
`setValue($count)`	`integer $count`	Required	to set value of the badge
`setContainer($component)`	`string $component`	Required	to set a component to where the badge should appear

Breadcrumbs

Breadcrumb indicates the current page's location within a navigational hierarchy.

Usage

use O2System\Bootstrap\Components\Breadcrumbs;
...
$breadcrumbs = new Breadcrumbs();
...

Button

Generating a bootstrap styled button.

Usage

use O2System\Bootstrap\Components\Button;
...
$button = new Button();
...

Calendar

Not yet available for current stable release

Carousel

Carousel class is a class to create a component for cycling through elements, like a carousel (slideshow).

Usage

use O2System\Bootstrap\Components\Carousel;
...
$carousel = new Carousel();
...

Dropdown

A dropdown is a menu which is toggleable that allows the user to choose one value from a predefined list.

Usage

use O2System\Bootstrap\Components\Dropdown;
...
$dropdown = new Dropdown();
...

Embed

Embed is a class which make it possible for browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

Usage

use O2System\Bootstrap\Components\Embed;
...
$embed = new Embed();
...

Fieldset

Fieldset is used to group related elements in a form and draws a box around the related elements.

Usage

use O2System\Bootstrap\Components\Fieldset;
...
$fieldset = new Fieldset();
...

Form

Form is a component that allows a user to enter data that is sent to a server for processing.

Usage

use O2System\Bootstrap\Components\Form;
...
$form = new Form();
...

Grid

Grid is used for creating page layouts through a series of rows and columns that house the content.

Usage

use O2System\Bootstrap\Components\Grid;
...
$grid = new Grid();
...

Group

Group is a component which collect a series of other components all together into a div block.

Usage

use O2System\Bootstrap\Components\Group;
...
$group = new Group();
...

Header

Header is A simple shell for an h1 to appropriately space out and segment sections of content on a page.

Usage

use O2System\Bootstrap\Components\Header;
...
$header = new Header();
...

HTML

Not yet available for current stable release

Image

Image is a component to wrap an image file.

Usage

use O2System\Bootstrap\Components\Image;
...
$image = new Image();
...

Input

Input is a text field where user could insert short occurrence of text to be processed within a form.

Usage

use O2System\Bootstrap\Components\Input;
...
$input = new Input();
...

Jumbotron

Jumbotron is a lightweight, flexible component that can optionally extend the entire viewport to showcase key content of a site.

Usage

use O2System\Bootstrap\Components\Jumbotron;
...
$jumbotron = new Jumbotron();
...

Label

Label is a text component which explains an text field component, for example input or textarea, but not limited to be used with other components.

Usage

use O2System\Bootstrap\Components\Label;
...
$label = new Label();
...

Link

Link is a hyperlinks which could be clicked to jump to another document or point of anchor within the same document.

Usage

use O2System\Bootstrap\Components\Link;
...
$link = new Link();
...

Lists

List is a component that wrapped items into an ordered or unordered list.

Usage

use O2System\Bootstrap\Components\Lists;
...
$lists = new Lists();
...

Media

Media component is an abstract element used as the basis for building more complex and repetitive media objects (like video, music, etc).

Usage

use O2System\Bootstrap\Components\Media;
...
$media = new Media();
...

Modal

Not yet available for current stable release.

Nav

Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states.

Usage

use O2System\Bootstrap\Components\Nav;
...
$nav = new Nav();
...

Navbar

Navbar is a navigation header that is placed at the top of the page.

Usage

use O2System\Bootstrap\Components\Navbar;
...
$navbar = new Navbar();
...

Pager

Pager is a form of pagination and provides previous and next buttons but has more advanced features than Pagination component.

Usage

use O2System\Bootstrap\Components\Pager;
...
$pager = new Pager();
...

Pagination

Pagination provides pagination links for a site or app with the multi-page pagination component, or the simpler Pager alternative.

Usage

use O2System\Bootstrap\Components\Pagination;
...
$pagination = new Pagination();
...

Panel

Panel is a boxed component consists of header, body and footer section. Panel is useful to put components into a box which is easy to be read.

Usage

use O2System\Bootstrap\Components\Panel;
...
$panel = new Panel();
...

Progress

Progress provides up-to-date feedback on the progress of a workflow or action with simple yet flexible bars.

Usage

use O2System\Bootstrap\Components\Progress;
...
$progress = new Progress();
...

Slide

Slide provides more advanced functionality than what Carousel component has. Decription, caption, link, and content might be modified based on the need.

Usage

use O2System\Bootstrap\Components\Slide;
...
$slide = new Slide();
...

Table

Class Table provides bootstrap styled table.

Usage

use O2System\Bootstrap\Components\Table;
...
$table = new Table();
...

Tabs

Tabs is a small flap or strip of material attached to or projecting from something, used to hold or manipulate it, or for identification and information.

Usage

use O2System\Bootstrap\Components\Tabs;
...
$tabs = new Tabs();
...

Tag

Tag provides most of HTML tags available to be used with the other components. Attributes might be inserted as well.

Usage

use O2System\Bootstrap\Components\Tag;
...
$tag = new Tag();
...

Thumbnail

Thumbnail is a smaller sized image previewing the real sized image.

Usage

use O2System\Bootstrap\Components\Thumbnail;
...
$thumbnail = new Thumbnail();
...

Toolbar

Toolbar combines set of button group into button toolbar for more complex component.

Usage

use O2System\Bootstrap\Components\Toolbar;
...
$toolbar = new Toolbar();
...

Well

Well component gives a simple effect on an element with an inset effect.

Usage

use O2System\Bootstrap\Components\Well;
...
$well = new Well();
...

Interface

Besides the usage of basic method listed above, the components could be modified using the methods provided in the Interface classes listed below.

The interface has already been declared inside every component's class based on the need. Not every interface class is loaded. Therefore the usage of interface method must apply to what interface class declared in the component's class.

Example

<?php

// import the needed class
use O2System\Bootstrap\Components\Header;

class Example
{
    // instantiate the component
    $header    = new Header();

    // use the method taken from the FactoryInterface 
    // which already declared in the Header component's class
    $header->getAttributes();
    ...
}