Vous pouvez consulter la page originale sur le site Bootstrap.
Ci-dessous, le même code généré à partir de l'extension Bootstrap de Pho.
<?php
/*
* Bootstrap Carousel http://getbootstrap.com/examples/carousel/
*
*/
require_once('../classes.php');
$document = new bsDocument();
$document->title = 'Carousel Template for Bootstrap';
$document->addStyleSheet('css/carousel.css');
$document->addScriptFile('js/docs.min.js', true);
// Navbar
$navbar = $document->addDiv('navbar-wrapper')->addDiv('container')->append(new bsNavbar('Project name', 'navbat-static-top'));
$navbar->addItems(array(
'Home' => '#',
'About' => '#about',
'Contact' => '#contact',
'Dropdown' => array(
'Action' => '#',
'Another action' => '#',
'Something else here' => '#',
'divider' => '-',
'Nav header' => '',
'Separated link' => '#',
'One more separated link' => '#',
),
));
// Carousel
$carousel = $document->append(new bsCarousel('myCarousel'));
$page1 = $carousel->addPage('data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==', 'First slide');
$page1->addHeader(1, 'Example headline');
$page1->addParagraph(new htmlTextNode('Note: If you\'re viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.'));
$page1->addParagraph(new bsButtonLink('Sign up today', 'primary', 'lg'));
$page2 = $carousel->addPage('data:image/gif;base64,R0lGODlhAQABAIAAAGZmZgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==', 'Second slide');
$page2->addHeader(2, 'Another example headline.');
$page2->addParagraph('Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.');
$page2->addParagraph(new bsButtonLink('Learn more', 'primary', 'lg'));
$page3 = $carousel->addPage('data:image/gif;base64,R0lGODlhAQABAIAAAFVVVQAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==', 'Third slide');
$page3->addHeader(1, 'One more for good measure.');
$page3->addParagraph('Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.');
$page3->addParagraph(new bsButtonLink('Browse gallery', 'primary', 'lg'));
// Marketing messaging and featurettes
$circle = new htmlImage('data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==', 'Generic placeholder image');
$circle->addClass('img-circle')->addStyle('width', '140px')->addstyle('height', '140px');
$viewDetail = new bsButtonLink('View details ยป');
$marketing = $document->addDiv('container marketing');
$row = $marketing->addDiv('row');
$col1 = $row->addDiv('col-lg-4');
$col2 = $row->addDiv('col-lg-4');
$col3 = $row->addDiv('col-lg-4');
$col1->append($circle);
$col1->addHeader(2, 'Heading');
$col1->addParagraph('Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.');
$col1->addParagraph($viewDetail);
$col2->append($circle);
$col2->addHeader(2, 'Heading');
$col2->addParagraph('Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.');
$col2->addParagraph($viewDetail);
$col3->append($circle);
$col3->addHeader(2, 'Heading');
$col3->addParagraph('Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.');
$col3->addParagraph($viewDetail);
// START THE FEATURETTES
class featurette extends htmlDiv {
function __construct($head, $muted, $image, $textFirst) {
parent::__construct('row featurette');
if ($textFirst) {
$col1 = $this->addDiv('col-md-7');
$col2 = $this->addDiv('col-md-5');
} else {
$col2 = $this->addDiv('col-md-5');
$col1 = $this->addDiv('col-md-7');
}
$h2 = $col1->addHeader(2, $head.' ');
$h2->addClass('featurette-heading');
$h2->append(new htmlSpan($muted, 'text-muted'));
$col1->addParagraph('Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.', 'lead');
$col2->append($image);
}
}
$divider = new htmlElement('hr');
$divider->addClass('featurette-divider');
$image = new htmlElement('img');
$image->addClass('featurette-image img-responsive');
$image->addAttributes(array('data-src' => "holder.js/500x500/auto", 'alt' => "Generic placeholder image"));
$marketing->append($divider);
$marketing->append(new featurette(
'First featurette heading.',
"It'll blow your mind.",
$image,
true
));
$marketing->append($divider);
$marketing->append(new featurette(
"Oh yeah, it's that good.",
"See for yourself.",
$image,
false
));
$marketing->append($divider);
$marketing->append(new featurette(
"And lastly, this one.",
"Checkmate.",
$image,
true
));
$marketing->append($divider);
// FOOTER
$footer = $marketing->append(new htmlElement('footer'));
$footer->addParagraph(new htmlLink('Back top top'), 'pull-right');
$copy = $footer->addParagraph(new htmlTextNode('© 2014 Company, Inc. · '));
$copy->append(new htmlLink('Privacy'));
$copy->append(new htmlTextNode(' · '));
$copy->append(new htmlLink('Terms'));
$document->output();