2. Outline
• Introduction to
November 2012
Bootstrap
• Using Bootstrap in
Joomla
Developers • Andrea Tarr •
extensions
Joomla World Conference
Bootstrap for Extension
• Examples in
Joomla
2
3. Bootstrap Introduction
• What problem is Joomla trying to solve?
November 2012
• What is Bootstrap?
• How does it work?
• Exploring Bootstrap
Joomla World Conference •
Bootstrap for Developers •
Andrea Tarr
3
4. The Problem
• The need for a consistent style sheet for extensions
November 2012
• Core extension are the current de facto style sheet
• 3pd & custom extensions make up what they need
that isn't in core – and they all do it differently
• Templates have to code for specific extensions to
Joomla World Conference •
Bootstrap for Developers •
maintain the look and feel of the web site
• Result is that many extensions look like iframes
unrelated to the site
Andrea Tarr
• This is the case in both the frontend and the
backend
4
5. What is Bootstrap?
• Basic set of CSS for layout
November 2012
• CSS styles for UI elements such as menus & buttons
• CSS styles for responsive design
• Integrated JavaScript widgets (jQuery) for UI
elements such as accordions
Joomla World Conference •
Bootstrap for Developers •
• A set of icons that can be used
• Minified versions of the CSS & JS available
• Includes the ability to use LESS files to create the CSS
Andrea Tarr
• Can work with different HTML markup
• Has docs showing HTML code, but the better code
is in the actual examples folder 5
6. How does it work?
<!DOCTYPE html>
November 2012
<html lang="en">
<head>
<title>My Web Site</title>
<!-- Bootstrap -->
Joomla World Conference •
<link href="css/bootstrap.min.css" rel="stylesheet">
Bootstrap for Developers •
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
Andrea Tarr
<body>
<h1>My Web Site</h1>
<p>This is a paragraph</p>
</body> 6
</html>
7. Exploring Bootstrap
• To see examples online
November 2012
• http://twitter.github.com/bootstrap/
• To download Bootstrap to your computer
• Download button at twitter.github.com/bootstrap
• Full source at https://github.com/twitter/bootstrap
Joomla World Conference •
Bootstrap for Developers •
• Call the docs folder in browser
• To see mockup examples for Joomla
• http://kyleledbetter.com/jui
Andrea Tarr
7
8. Using Bootstrap in
Joomla Extensions
• CSS Class names have changed
November 2012
• jQuery is available
• Grid System
• Classes
Joomla World Conference •
• Navigation
Bootstrap for Developers •
• Tables
• Forms
Andrea Tarr
8
9. Grid System - Static
November 2012
Joomla World Conference •
Bootstrap for Developers •
<div class="row">
Andrea Tarr
<div class="span4">...</div>
<div class="offset2 span6">...</div>
</div> 9
10. Grid System – Static Nesting
• Children add up to the parent
November 2012
<div class="row">
<div class="span4">
<div class="row">
Joomla World Conference •
<div class="span1">...</div>
Bootstrap for Developers •
<div class="span3">...</div>
</div>
Andrea Tarr
</div>
<div class="offset2 span6">...</div>
</div> 10
11. Grid System - Fluid
November 2012
Joomla World Conference •
Bootstrap for Developers •
<div class="row-fluid">
Andrea Tarr
<div class="span4">...</div>
<div class="offset2 span6">...</div>
</div> 11
12. Grid System – Fluid Nesting
• Children add up to 12
November 2012
<div class="row-fluid">
<div class="span4">
<div class="row-fluid">
Joomla World Conference •
<div class="span3">...</div>
Bootstrap for Developers •
<div class="span9">...</div>
</div>
Andrea Tarr
</div>
<div class="offset2 span6">...</div>
</div> 12
13. Grid System in Joomla
• Backend leftnav/list views
November 2012
• span2/span10
• Example: Article Manager
• Backend edit views
Andrea Tarr
Bootstrap for Developers •
Joomla World Conference •
• span10/span2
• Example: Article Edit
• Dashboards
• span2/span6/span4
• Example: Control Panel
13
14. Responsive classes
Bootstrap for Developers •
Joomla World Conference • November 2012
14
Andrea Tarr
15. Special Text Designations
<p class="muted">Fusce dapibus, mauris nibh.</p>
November 2012
<p class="text-warning">Etiam porta euismod.</p>
<p class="text-error">Donec auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. </p>
Joomla World Conference •
<p class="text-success">Duis erat porttitor ligula.</p>
Bootstrap for Developers •
Andrea Tarr
15
16. Other Useful Classes
• <div class="pull-right">...</div>
November 2012
• <div class="pull-left">...</div>
• Clear with clearfix class
• (JUI) Hide labels with element-invisible class
Joomla World Conference •
Bootstrap for Developers •
Andrea Tarr
16
17. Tables
All Tables
November 2012
• <table class="table">
Additional table classes to add
Joomla World Conference •
• .table-striped
Bootstrap for Developers •
• .table-condensed
• .table-border
Andrea Tarr
• .table-hover
Standard Admin tables
• class="adminlist table table-striped" 17
18. •
•
•
•
.info
.error
.success
.warning
Tables: Row Classes
Bootstrap for Developers •
Joomla World Conference • November 2012
18
Andrea Tarr
19. Forms
• Bootstrap standard with left-adjusted, label above
November 2012
• Optional classes for different types of forms
• Inline form
• .form-inline
• Horizontal form (normal Joomla backend)
Joomla World Conference •
Bootstrap for Developers •
• .form-horizontal
• wrap label/control in .control-group
• .control-label on label
Andrea Tarr
• wrap controls in .controls
• wrap multiple actions in .form-actions to show
horizontally
• Use input types 19
20. Forms: Radio/Checkbox
• Add class .radio or .checkbox on the label for the
November 2012
control
• Use the type of radio or checkbox on the input
• To display radio/checkbox label inline
• Add class .inline to the label
Joomla World Conference •
Bootstrap for Developers •
Andrea Tarr
20
21. Yes/No Radio Button XML
<field
November 2012
name="link_titles"
type="radio"
class="btn-group"
Joomla World Conference •
label="JGLOBAL_LINKED_TITLES_LABEL"
Bootstrap for Developers •
description="JGLOBAL_LINKED_TITLES_DESC"
labelclass="control-label">
<option value="">JGLOBAL_USE_GLOBAL</option>
Andrea Tarr
<optionvalue="0">JNO</option>
<option value="1">JYES</option>
</field> 21
22. Forms: Addons
• To add text or a button before or after the input
November 2012
<div class="input-prepend">
Joomla World Conference •
Bootstrap for Developers •
<span class="add-on">@</span>
<input class="span2"
id="prependedInput" size="16" type="text"
placeholder="Username">
Andrea Tarr
</div>
<div class="input-append">
<input class="span2" id="appendedInput" size="16"
type="text"><span class="add-on">.00</span>
22
</div>
23. Forms: Addon Buttons
• Use button with class .btn instead of the span to
November 2012
attach a button to a control
Joomla World Conference •
Bootstrap for Developers •
<div class="input-append">
<input class="span2" id="appendedInputButton"
Andrea Tarr
size="16" type="text">
<button class="btn" type="button">Go!</button>
</div> 23
24. Forms: Sizing
• Add class to inputs for relative sizing
November 2012
• .input-mini
• .input-small
• .input-medium
• .input-large
Joomla World Conference •
Bootstrap for Developers •
• .input-xlarge
• .input-xxlarge
• You can also use the span classes
Andrea Tarr
• .span1, .span4, .span6, etc.
• If using multiple spans on multiple lines, wrap each row
in .control-row.
24
25. Forms: Misc
• To make an input read only
November 2012
• Add the disabled attribute (not a class)
• <input id="thisInput" type="text" disabled
placeholder="Disabled input here...">
• Show read only text as if it is a form element
Joomla World Conference •
Bootstrap for Developers •
• .uneditable-input
• <span class="input-xlarge uneditable-input">Some
value here</span
Andrea Tarr
• Help text
• .help-inline
• .help-block
• <input type="text"><span class="help-inline">Inline help 25
text</span>
26. Buttons
Bootstrap for Developers •
Joomla World Conference • November 2012
26
Andrea Tarr
27. Buttons: Sizing
• Optional: Add a sizing button class
November 2012
• .btn-large
• .btn-small
• .btn-mini
Joomla World Conference •
• .btn-block
Bootstrap for Developers •
Andrea Tarr
27
28. ml#navs
Navigation
• http://twitter.github.com/bootstrap/components.ht
Bootstrap for Developers •
Joomla World Conference • November 2012
28
Andrea Tarr
29. Examples in Joomla
• Some changes
November 2012
• Manager Example
• Chosen select dropdowns
• Sidebar
• Filters
Joomla World Conference •
Bootstrap for Developers •
• Sorting
• Drag & Drop
• Edit Example
Andrea Tarr
• Tabbing Content
29
30. Administrator Changes
• JHtml::_('behavior.tooltip'); becomes
November 2012
JHtml::_('bootstrap.tooltip');
• For dropdowns, use
JHtml::_('formbehavior.chosen', 'select');
Joomla World Conference •
Bootstrap for Developers •
Andrea Tarr
30
31. Manager Example
Bootstrap for Developers •
Joomla World Conference • November 2012
31
Andrea Tarr
32. Set up the Manager
defined('_JEXEC') or die;
November 2012
JHtml::addIncludePath(JPATH_COMPONENT.'/helpers
/html');
JHtml::_('bootstrap.tooltip');
Joomla World Conference •
Bootstrap for Developers •
JHtml::_('behavior.multiselect');
JHtml::_('formbehavior.chosen', 'select');
Andrea Tarr
$user = JFactory::getUser();
$userId = $user->get('id');
32
33. Drag & Drop Ordering
$listOrder = $this->escape($this->state->get('list.ordering'));
November 2012
$listDirn = $this->escape($this->state->get('list.direction'));
$canOrder = $user->authorise('core.edit.state',
'com_mycomponent.category');
$saveOrder = $listOrder == 'a.ordering';
Joomla World Conference •
Bootstrap for Developers •
if ($saveOrder) {
$saveOrderingUrl = 'index.php?option=com_mycomponent
&task=mycomponent.saveOrderAjax&tmpl=component';
Andrea Tarr
JHtml::_('sortablelist.sortable', 'mycomponentList',
'adminForm', strtolower($listDirn), $saveOrderingUrl);
}
$sortFields = $this->getSortFields(); 33
34. Sorting: Script
<script type="text/javascript">
November 2012
Joomla.orderTable = function() {
table = document.getElementById("sortTable");
direction = document.getElementById("directionTable");
order = table.options[table.selectedIndex].value;
Joomla World Conference •
Bootstrap for Developers •
if (order != '<?php echo $listOrder; ?>') {
dirn = 'asc';
} else {
Andrea Tarr
dirn = direction.options[direction.selectedIndex].value;
}
Joomla.tableOrdering(order, dirn, '');
} 34
</script>
35. Sidebar & Start Main Div
<form action="url here" method="post" name="adminForm"
November 2012
id="adminForm">
<!-- if there is is a side bar, display the sidebar as span2 and
start the main-container as span10. Otherwise, just start the
main-container, which will default to the the full span12. -->
Joomla World Conference •
Bootstrap for Developers •
<?php if(!empty( $this->sidebar)): ?>
<div id="j-sidebar-container" class="span2">
<?php echo $this->sidebar; ?>
</div>
Andrea Tarr
<div id="j-main-container" class="span10">
<?php else : ?>
<div id="j-main-container">
<?php endif;?> 35
36. Searching
<!-- The main container for the component starts with the Search &
November 2012
Sorting across the top (Orange should be JText strings) -->
<div id="filter-bar" class="btn-toolbar">
<div class="filter-search btn-group pull-left">
<label for="filter_search" class="element-invisible">Search</label>
<input type="text" name="filter_search" id="filter_search"
Joomla World Conference •
placeholder="Search" value="<?php echo $this->escape($this->state-
Bootstrap for Developers •
>get('filter.search')); ?>" title="Search" />
</div>
<div class="btn-group pull-left">
Andrea Tarr
<button class="btn hasTooltip" type="submit" title="Submit"><i
class="icon-search"></i></button>
<button class="btn hasTooltip" type="button" title="Clear"
onclick="document.id('filter_search').value='';this.form.submit();"><i
class="icon-remove"></i></button> 36
</div>
38. Sort Filter & Display #
<div class="btn-group pull-right">
November 2012
<label for="sortTable" class="element-invisible">Sort
by</label>
<select name="sortTable" id="sortTable"
class="input-medium" onchange="Joomla.orderTable()">
Joomla World Conference •
Bootstrap for Developers •
<option value="">Sort by..</option>
<?php echo
JHtml::_('select.options', $sortFields, 'value', 'text', $listOrder);?>
</select>
Andrea Tarr
</div>
</div><!-- End Filter bar -->
<div class="clearfix"> </div>
38
39. Manager Table
• <table class="adminlist"> becomes
November 2012
<table class="table table-striped" id="xxxxxxList">
• Use class="adminlist table table-striped" if you want
backward compatibility
• If you want to hide columns on a phone add class
Joomla World Conference •
Bootstrap for Developers •
hidden-phone
Andrea Tarr
39
40. Order Field: Field
<tr class="row<?php echo $i % 2; ?>" sortable-group-id="<?php echo
November 2012
$item->catid?>">
<td class="order nowrap center hidden-phone">
<?php if ($canChange) :
$disableClassName = '';
$disabledLabel = '';
Joomla World Conference •
if (!$saveOrder) :
Bootstrap for Developers •
$disabledLabel = JText::_('JORDERINGDISABLED');
$disableClassName = 'inactive tip-top';
endif; ?>
Andrea Tarr
(do something here if you can edit and reorder)
<?php else : ?>
<span class="sortable-handler inactive" >
<i class="icon-menu"></i>
</span> 40
<?php endif; ?>
</td>
41. Doing the something
<span class="sortable-handler hasTooltip <?php echo
November 2012
$disableClassName?>"
title="<?php echo $disabledLabel?>">
<i class="icon-menu"></i>
</span>
Joomla World Conference •
Bootstrap for Developers •
<input type="text" style="display:none"
name="order[]" size="5"
value="<?php echo $item->ordering;?>"
Andrea Tarr
class="width-20 text-area-order " />
41
42. Batch Modal Sub-layout
$published = $this->state->get('filter.state');
November 2012
?>
<div class="modal hide fade" id="collapseModal">
<div class="modal-header">
<button type="button" role="presentation"
Joomla World Conference •
Bootstrap for Developers •
class="close" data-dismiss="modal">x</button>
<h3><?php echo
JText::_('COM_MYCOMPONENT_BATCH_OPTIONS');?>
</h3>
Andrea Tarr
</div>
<div class="modal-body">
(form control-groups go here)
42
</div>
43. Modal footer
<div class="modal-footer">
November 2012
<button class="btn" type="button" onclick
="document.id('batch-category-id').value
='';document.id('batch-access').value
='';document.id('batch-language-id').value
Joomla World Conference •
=''" data-dismiss="modal">
Bootstrap for Developers •
<?php echo JText::_('JCANCEL'); ?>
</button>
<button class="btn btn-primary" type="submit"
Andrea Tarr
onclick="Joomla.submitbutton('mycomponent.batch');">
<?php echo JText::_('JGLOBAL_BATCH_PROCESS'); ?>
</button>
</div> 43
</div><!-- End collapseModal -->
45. Example Edit Screen
Bootstrap for Developers •
Joomla World Conference • November 2012
45
Andrea Tarr
46. Overview
• Simplified example of an edit form in the backend
November 2012
• Set up as tabbed content in a span10 section on
the left with a span2 sidebar that remains constant
on the right.
Joomla World Conference •
Bootstrap for Developers •
Andrea Tarr
46
47. Set up the form
<!--simplified edit layout -->
November 2012
<form action="url here" method="post"
name="adminForm" id="mycomponent-form"
class="form-validate">
<div class="row-fluid">
Joomla World Conference •
Bootstrap for Developers •
<!-- Begin Main -->
<div class="span10 form-horizontal">
Andrea Tarr
<fieldset>
47
48. List the tab navigation
<!-- List of Tabs -->
November 2012
<ul class="nav nav-tabs">
<li class="active"><a href="#details" data-
toggle="tab">Details</a></li>
<li><a href="#publishing" data-
Joomla World Conference •
Bootstrap for Developers •
toggle="tab">Publishing</a></li>
<li>...</li>
</ul>
Andrea Tarr
48
49. List Content in Each Tab
<div class="tab-content">
November 2012
<div class="tab-pane active" id="details">
<div class="control-group">
<div class="control-label"><?php echo $this->form->getLabel('title'); ?></div>
<div class="controls"><?php echo $this->form->getInput('title'); ?></div>
</div>
<div class="control-group">
<div class="control-label"><?php echo $this->form->getLabel('url'); ?></div>
Joomla World Conference •
Bootstrap for Developers •
<div class="controls"><?php echo $this->form->getInput('url'); ?></div>
</div>
<div class="control-group">
...
</div>
Andrea Tarr
</div>
<div class="tab-pane" id="publishing">
...
</div>
49
additional tab-pane divs ....
50. Tab Content in sub-layouts
<?php echo $this->loadTemplate('params'); ?>
November 2012
<?php echo $this->loadTemplate('metadata'); ?>
Joomla World Conference •
Bootstrap for Developers •
Andrea Tarr
50
51. Hidden inputs and end divs
<input type="hidden" name="task" value="" />
November 2012
<?php echo JHtml::_('form.token'); ?>
</div><!-- end tab-content -->
</div><!-- end span10 -->
Joomla World Conference •
Bootstrap for Developers •
Andrea Tarr
51
52. Right sidebar
<!-- Begin Sidebar -->
November 2012
<div class="span2">
<h4>Details</h4>
<hr />
Joomla World Conference •
<fieldset class="form-vertical">
Bootstrap for Developers •
Andrea Tarr
52
53. Form Controls Groups
<div class="control-group">
November 2012
<div class="controls">
<?php echo $this->form->getValue('title'); ?>
</div>
</div>
<div class="control-group">
Joomla World Conference •
<div class="control-label">
Bootstrap for Developers •
<?php echo $this->form->getLabel('state'); ?>
</div>
<div class="controls">
Andrea Tarr
<?php echo $this->form->getInput('state'); ?>
</div>
</div>
<div class="control-group">
... 53
</div>
54. </form>
</fieldset>
</div><!-- End Sidebar -->
End the sidebar & form
Bootstrap for Developers •
Joomla World Conference • November 2012
54
Andrea Tarr
55. Detail on using sub-layouts
for tab contents
• You can use sub-layouts for tab pane content
November 2012
• Examples: edit_metadata & edit_params
• Add a foreach loop to the tab navigation
• Add a load to the layouts in the tab content
Joomla World Conference •
Bootstrap for Developers •
Andrea Tarr
55
56. Tab Nav <li> Loop
<?php
November 2012
$fieldSets = $this->form->getFieldsets('params');
foreach ($fieldSets as $name => $fieldSet) : ?>
<li>
<a href="#params-<?php echo $name;?>" data-toggle=
"tab"><?php echo JText::_($fieldSet->label);?></a>
</li>
Joomla World Conference •
Bootstrap for Developers •
<?php endforeach; ?>
<?php
$fieldSets = $this->form->getFieldsets('metadata');
foreach ($fieldSets as $name => $fieldSet) : ?>
Andrea Tarr
<li>
<a href="#metadata-<?php echo $name;?>" data-toggle=
"tab"><?php echo JText::_($fieldSet->label);?></a>
</li>
<?php endforeach; ?> 56
57. Sub-layout tab pane
<div class="tab-pane" id="publishing">
November 2012
...
</div>
Joomla World Conference •
<?php echo $this->loadTemplate('params'); ?>
Bootstrap for Developers •
<?php echo $this->loadTemplate('metadata'); ?>
Andrea Tarr
57
58. Sub-layout
<?php
November 2012
$fieldSets = $this->form->getFieldsets('params');
foreach ($fieldSets as $name => $fieldSet) :?>
<div class="tab-pane" id="params-<?php echo $name;?>">
<?php if (isset($fieldSet->description) && trim($fieldSet->description)) :
echo '<p class="alert alert-info">'.$this->escape(JText::_($fieldSet->
description)).'</p>';
Joomla World Conference •
Bootstrap for Developers •
endif; ?>
<?php foreach ($this->form->getFieldset($name) as $field) : ?>
<div class="control-group">
<div class="control-label"><?php echo $field->label; ?></div>
Andrea Tarr
<div class="controls"><?php echo $field->input; ?></div>
</div>
<?php endforeach; ?>
</div><!-- end tab-pane -->
<?php endforeach; ?> 58
59. Resources
• Download basic bootstrap
November 2012
• http://twitter.github.com/bootstrap/
• The full bootstrap source
• https://github.com/twitter/bootstrap
• Tutorials
Joomla World Conference •
Bootstrap for Developers •
• http://webdesign.tutsplus.com/series/twitter-bootstrap-
101/
• Tutorials on YouTube
Andrea Tarr
• http://www.youtube.com/watch?v=DgwtRpf60xI
• Joomla JUI
• http://kyleledbetter.com/jui
59
60. Questions ?
Bootstrap for Developers •
Joomla World Conference • November 2012
60
Andrea Tarr
61. Credits
• Background photo by the_tahoe_guy
Bootstrap for Developers •
Joomla World Conference • November 2012
61
Andrea Tarr
Hinweis der Redaktion
twitter.github.com/bootstrapSave to jz
1170 & 764
1170 & 764
1170 & 764
mention .hidden-phone class on elements and table columns to improve phone UX