Requires: phpFox version 4.6.0 or higher.
Since 4.6.0, HTML source code is restructured, defined by coding standard:
- Help developer re-use layout component without writing more HTML source code, defining more CSS, even without writing javascript code.
- Help developer create components that look consistency with others.
- It's easy to maintain and flexible to customize.
FORM Component
In this guide, we introduce how to create layout for standard HTML Form components
- Form group and form control
- Label with class .required
- Help block for form-control
Since 4.6.0, Form component is re-structured to separate row by row, each row contains one element such as email, username, etc.
In order to define a Form element:
- Wrap element in
<div class="form-group">...</div>
- Add a label for element by
<label for="title">Label</div>
- Put field input/select/textarea, ... into Form group, in most of cases it must contain class
form-control
. - If field is required, do not forgot to add class
required
to label element. - If element contains note/description, put text into
<div class="help-block">
For more information, read Bootstrap 3 form style http://getbootstrap.com/css/#forms
Examples:
Text field
<div class="form-group"> <label for="title" class="required">{_p var='what_are_you_selling'}</label> <input class="form-control" type="text" name="val[title]" value="" id="title" maxlength="100" /> <div class="help-block">[Your note here]</div> </div>
Password field
<div class="form-group"> <label for="title" class="required">Password</label> <input class="form-control" type="text" name="val[password]" value="" id="title" maxlength="100" /> <div class="help-block">[Your password note here]</div> </div>
Textarea
<div class="form-group"> <label for="mini_description">{_p var='short_description'}</label> <textarea id="mini_description" class="form-control" rows="3" name="val[mini_description]">{value type='textarea' id='mini_description'}</textarea> </div>
Select Box
<div class="form-group"> <label for="category">{_p var='short_description'}</label> <select name="" class="form-control"> <option>...</option> </select> </div>
Checkbox (inline)
<div class="form-group"> <label>Enable payment?</label> <label class="radio-inline"> <input type="checkbox" name="val[is_sell]" value="1" /> Yes </label> <label class="radio-inline"> <input type="checkbox" name="val[is_sell]" value="0" selected='true' /> No </label> </div>
Checkbox (multi-line)
<div class="form-group"> <label for="postal_code">{_p var='enable_instant_payment'}</label> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label> </div> </div>
Radio (inline)
<div class="form-group"> <label for="postal_code">{_p var='enable_instant_payment'}</label> <label class="radio-inline"> <input type="radio" name="val[is_sell]" value="1" {value type='radio' id='is_sell' default='1'}/> {_p var='yes'} </label> <label class="radio-inline"> <input type="radio" name="val[is_sell]" value="0" {value type='radio' id='is_sell' default='0' selected='true'}/> {_p var='no'} </label> </div>
Radio (multi-line)
<div class="form-group"> <label for="postal_code">{_p var='enable_instant_payment'}</label> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label> </div> </div>
File upload
<div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div>
Utilities
Label
Ref: http://getbootstrap.com/components/#labels
<span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span>
Table Layout
General table layout
Ref : http://getbootstrap.com/css/#tables
<div class="table-responsive"> <table class="table {feature}"> <thead> <tr> <th>Column Name1</th> <th>Column Name2</th> <th>Column Name3</th> </tr> </thead> <tbody> <tr> <td>Text</td> <td>Text</td> <td>Text</td> </tr> </tbody> </table> </div>
Supporting
- Use .table-striped to add zebra-striping to any table row within the <tbody>.
- Add .table-bordered for borders on all sides of the table and cells.
- Add .table-hover to enable a hover state on table rows within a <tbody>.
- Add .table-condensed to make tables more compact by cutting cell padding in half.
- Add .table-admin for styling admincp main table.
- Add .table-main for styling font-end main table.
Alert
ref: http://getbootstrap.com/components/#alerts
<div class="alert alert-success" role="alert">...</div> <div class="alert alert-info" role="alert">...</div> <div class="alert alert-warning" role="alert">...</div> <div class="alert alert-danger" role="alert">...</div>
Alert with heading
<div class="alert alert-success" role="alert"> <h4>Requires JavaScript alert plugin</h4> For fully functioning, dismissible alerts, you must use the alerts JavaScript plugin. </div>
Dismissible alerts
ref: http://getbootstrap.com/components/#alerts-dismissible
<div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div>
Link in alert
href: http://getbootstrap.com/components/#alerts-links
<div class="alert alert-success" role="alert"> <a href="#" class="alert-link">...</a> </div> <div class="alert alert-info" role="alert"> <a href="#" class="alert-link">...</a> </div> <div class="alert alert-warning" role="alert"> <a href="#" class="alert-link">...</a> </div> <div class="alert alert-danger" role="alert"> <a href="#" class="alert-link">...</a> </div>