Bootstrap Jumbotron

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 Jumbotron http://getbootstrap.com/examples/jumbotron/
 *  
 */
  require_once('../classes.php');
  
  /**
   * Classe interne pour créer un formulaire d'authentification
   */
  class SignIn extends htmlForm {
      function __construct() {
          parent::__construct();
          $this->addClass('navbar-form navbar-right');
          $this->setRole('form');
          $this->addInput('text', 'Email');
          $this->addInput('password', 'Password');
          $this->append(new bsButton('Sign in', 'success'))->addAttribute('type', 'submit');
      }
      
      function addInput($type, $placeholder) {
          $input = new htmlElement('input');
          $input->addClass('form-control');
          $input->addAttributes(array('type' => $type, 'placeholder' => $placeholder));
          $this->addGroup($input);
      }
      
      function addGroup($content) {
          $this->addDiv('form-group')->append($content);
          $this->append(' ');
      }
  }
  
  /**
   * Génération du document
   */
  $document = new bsDocument();
  $document->title = 'Jumbotron Template for Bootstrap';
  $document->addStyleSheet('css/jumbotron.css');
  
  $navbar = $document->append(new bsNavbar('Project name'));
  $navbar->navbar->append(new SignIn());
  
  $jumbotron = $document->addDiv('jumbotron')->addDiv('container');
  $jumbotron->addHeader(1, 'Hello, world!');
  $jumbotron->addParagraph('This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.');
  $jumbotron->addParagraph(new bsButtonLink('Learn more »', 'primary', 'lg'));
  
  $container = $document->addDiv('container');
  $row = $container->addDiv('row');

  $col1 = new htmlDiv('col-md-4');
  $col1->addHeader(2, 'Heading');
  $col1->addParagraph('Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.');
  $col1->append(new bsButtonLink('View details »'));  
  
  // Pho permet de réutiliser un objet pour dupliquer son code
  $row->append($col1);
  $row->append($col1);

  $col2 = new htmlDiv('col-md-4');
  $col2->addHeader(2, 'Heading');
  $col2->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.');
  $col2->append(new bsButtonLink('View details »'));
  
  $row->append($col2);
  
  $container->append(new htmlElement('hr'));
  
  $container->append(new htmlElement('footer'))->addParagraph(new htmlTextNode('© Company 2014'));
  
  $document->output();