0
Bootstrap forExtensionDevelopersAndrea TarrMetaScale / Sears HoldingsNovember 2012
Outline• Introduction to                               November 2012  Bootstrap• Using Bootstrap in  Joomla               ...
Bootstrap Introduction•   What problem is Joomla trying to solve?                                                      Nov...
The Problem• The need for a consistent style sheet for extensions                                                         ...
What is Bootstrap?•   Basic set of CSS for layout                                                                       No...
How does it work?<!DOCTYPE html>                                                                 November 2012<html lang="...
Exploring Bootstrap• To see examples online                                                                  November 2012...
Using Bootstrap inJoomla Extensions•   CSS Class names have changed                                           November 201...
Grid System - Static                                                 November 2012                                        ...
Grid System – Static Nesting• Children add up to the parent                                                 November 2012<...
Grid System - Fluid                                                 November 2012                                         ...
Grid System – Fluid Nesting• Children add up to 12                                                 November 2012<div class...
Grid System in Joomla• Backend leftnav/list views                                        November 2012  • span2/span10  • ...
Responsive classes       Bootstrap for Developers •     Joomla World Conference •      November 201214                    ...
Special Text Designations<p class="muted">Fusce dapibus, mauris nibh.</p>                                                 ...
Other Useful Classes•   <div class="pull-right">...</div>                                                             Nove...
TablesAll Tables                                                  November 2012• <table class="table">Additional table cla...
•                                  •                                  •                                  •                ...
Forms• Bootstrap standard with left-adjusted, label above                                                               No...
Forms: Radio/Checkbox• Add class .radio or .checkbox on the label for the                                                 ...
Yes/No Radio Button XML<field                                                          November 2012name="link_titles"type...
Forms: Addons• To add text or a button before or after the input                                                          ...
Forms: Addon Buttons• Use button with class .btn instead of the span to                                                   ...
Forms: Sizing• Add class to inputs for relative sizing                                                                    ...
Forms: Misc• To make an input read only                                                                       November 201...
Buttons     Bootstrap for Developers •     Joomla World Conference •    November 201226     Andrea Tarr
Buttons: Sizing•   Optional: Add a sizing button class                                                  November 2012•   ....
ml#navs                                                                                               Navigation          ...
Examples in Joomla• Some changes                                        November 2012• Manager Example  •   Chosen select ...
Administrator Changes• JHtml::_(behavior.tooltip); becomes                                                     November 20...
Manager Example     Bootstrap for Developers •     Joomla World Conference •    November 201231     Andrea Tarr
Set up the Managerdefined(_JEXEC) or die;                                                          November 2012JHtml::add...
Drag & Drop Ordering$listOrder = $this->escape($this->state->get(list.ordering));                                         ...
Sorting: Script<script type="text/javascript">                                                                        Nove...
Sidebar & Start Main Div<form action="url here" method="post" name="adminForm"                                            ...
Searching<!-- The main container for the component starts with the Search &                                               ...
Sort Filter & Display #<div class="btn-group pull-right hidden-phone">                                                    ...
Sort Filter & Display #<div class="btn-group pull-right">                                                                 ...
Manager Table• <table class="adminlist"> becomes                                                                  November...
Order Field: Field<tr class="row<?php echo $i % 2; ?>" sortable-group-id="<?php echo                                      ...
Doing the something<span class="sortable-handler hasTooltip <?php echo                                                    ...
Batch Modal Sub-layout$published = $this->state->get(filter.state);                                                       ...
Modal footer<div class="modal-footer">                                                                 November 2012  <but...
Creating $sidebar inview.html.php$this->addToolbar();                                                   November 2012$this...
Example Edit Screen     Bootstrap for Developers •     Joomla World Conference •    November 201245     Andrea Tarr
Overview• Simplified example of an edit form in the backend                                                               ...
Set up the form<!--simplified edit layout -->                                                             November 2012<fo...
List the tab navigation<!-- List of Tabs -->                                                              November 2012<ul...
List Content in Each Tab<div class="tab-content">                                                                         ...
Tab Content in sub-layouts<?php echo $this->loadTemplate(params); ?>                                                      ...
Hidden inputs and end divs      <input type="hidden" name="task" value="" />                                              ...
Right sidebar<!-- Begin Sidebar -->                                                  November 2012<div class="span2">     ...
Form Controls Groups<div class="control-group">                                                              November 2012...
</form>                                        </fieldset>                                     </div><!-- End Sidebar --> ...
Detail on using sub-layoutsfor tab contents•   You can use sub-layouts for tab pane content                               ...
Tab Nav <li> Loop<?php                                                                      November 2012$fieldSets = $thi...
Sub-layout tab pane<div class="tab-pane" id="publishing">                                                         November...
Sub-layout<?php                                                                                         November 2012$fiel...
Resources• Download basic bootstrap                                                                      November 2012  • ...
Questions ?     Bootstrap for Developers •     Joomla World Conference •    November 201260     Andrea Tarr
Credits                                            • Background photo by the_tahoe_guy     Bootstrap for Developers •     ...
Upcoming SlideShare
Loading in...5
×

Bootstrap for Extension Developers JWC 2012

3,093

Published on

How to take advantage of the bootstrap framework in your Joomla 3.x extension so you can leave the designing to the designers.

Published in: Technology
3 Comments
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,093
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
86
Comments
3
Likes
5
Embeds 0
No embeds

No notes for slide
  • twitter.github.com/bootstrapSave to jz
  • 1170 &amp; 764
  • 1170 &amp; 764
  • 1170 &amp; 764
  • mention .hidden-phone class on elements and table columns to improve phone UX
  • Adding &quot;adminlist&quot;
  • Transcript of "Bootstrap for Extension Developers JWC 2012"

    1. 1. Bootstrap forExtensionDevelopersAndrea TarrMetaScale / Sears HoldingsNovember 2012
    2. 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. 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. 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 isnt 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. 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. 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. 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. 8. Using Bootstrap inJoomla 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. 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. 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. 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. 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. 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. 14. Responsive classes Bootstrap for Developers • Joomla World Conference • November 201214 Andrea Tarr
    15. 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. 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. 17. TablesAll 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-hoverStandard Admin tables• class="adminlist table table-striped" 17
    18. 18. • • • • .info .error .success .warning Tables: Row Classes Bootstrap for Developers • Joomla World Conference • November 201218 Andrea Tarr
    19. 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. 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. 21. Yes/No Radio Button XML<field November 2012name="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. 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. 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. 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. 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. 26. Buttons Bootstrap for Developers • Joomla World Conference • November 201226 Andrea Tarr
    27. 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. 28. ml#navs Navigation • http://twitter.github.com/bootstrap/components.ht Bootstrap for Developers • Joomla World Conference • November 201228 Andrea Tarr
    29. 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. 30. Administrator Changes• JHtml::_(behavior.tooltip); becomes November 2012 JHtml::_(bootstrap.tooltip);• For dropdowns, useJHtml::_(formbehavior.chosen, select); Joomla World Conference • Bootstrap for Developers • Andrea Tarr 30
    31. 31. Manager Example Bootstrap for Developers • Joomla World Conference • November 201231 Andrea Tarr
    32. 32. Set up the Managerdefined(_JEXEC) or die; November 2012JHtml::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. 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. 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. 35. Sidebar & Start Main Div<form action="url here" method="post" name="adminForm" November 2012id="adminForm"><!-- if there is is a side bar, display the sidebar as span2 andstart the main-container as span10. Otherwise, just start themain-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. 36. Searching<!-- The main container for the component starts with the Search & November 2012Sorting 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"><iclass="icon-search"></i></button> <button class="btn hasTooltip" type="button" title="Clear"onclick="document.id(filter_search).value=;this.form.submit();"><iclass="icon-remove"></i></button> 36 </div>
    37. 37. Sort Filter & Display #<div class="btn-group pull-right hidden-phone"> November 2012 <label for="limit" class="element-invisible">Label</label> <?php echo $this->pagination->getLimitBox(); ?></div><div class="btn-group pull-right hidden-phone"> Joomla World Conference • <label for="directionTable" class="element-invisible">Label</label> Bootstrap for Developers • <select name="directionTable" id="directionTable" class="input-medium" onchange="Joomla.orderTable()"> <option value="">Order desc</option> Andrea Tarr <option value="asc" <?php if ($listDirn == asc) echoselected="selected"; ?>>Asc</option> <option value="desc" <?php if ($listDirn == desc) echoselected="selected"; ?>>Desc</option> </select> 37</div>
    38. 38. Sort Filter & Display #<div class="btn-group pull-right"> November 2012 <label for="sortTable" class="element-invisible">Sortby</label> <select name="sortTable" id="sortTable"class="input-medium" onchange="Joomla.orderTable()"> Joomla World Conference • Bootstrap for Developers • <option value="">Sort by..</option> <?php echoJHtml::_(select.options, $sortFields, value, text, $listOrder);?> </select> Andrea Tarr</div></div><!-- End Filter bar --><div class="clearfix"> </div> 38
    39. 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. 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. 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. 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 echoJText::_(COM_MYCOMPONENT_BATCH_OPTIONS);?></h3> Andrea Tarr </div> <div class="modal-body"> (form control-groups go here) 42 </div>
    43. 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 -->
    44. 44. Creating $sidebar inview.html.php$this->addToolbar(); November 2012$this->sidebar = JHtmlSidebar::render();parent::display($tpl); Joomla World Conference • Bootstrap for Developers • Andrea Tarr 44
    45. 45. Example Edit Screen Bootstrap for Developers • Joomla World Conference • November 201245 Andrea Tarr
    46. 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. 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. 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. 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. 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. 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. 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. 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. 54. </form> </fieldset> </div><!-- End Sidebar --> End the sidebar & form Bootstrap for Developers • Joomla World Conference • November 201254 Andrea Tarr
    55. 55. Detail on using sub-layoutsfor 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. 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. 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. 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. 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. 60. Questions ? Bootstrap for Developers • Joomla World Conference • November 201260 Andrea Tarr
    61. 61. Credits • Background photo by the_tahoe_guy Bootstrap for Developers • Joomla World Conference • November 201261 Andrea Tarr
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×