README

创建和操作HTML标签作为对象。

安装

安装HTMLElements的最佳方式是使用 Composer

$ composer require stigma/html-elements

然后，使用出色的Composer自动加载功能

<?php
require '/../vendor/autoload.php';

use Stigma\HTMLElements\HTMLBuilder;

首先，让我们创建页面

$page = HTMLBuilder::page('HTMLElements Sample Page');

向HTML头部添加元数据

// Add some Metadata
$page->head()->addMeta(['http-equiv' => 'X-UA-Compatible', 'content' => 'IE=edge']);
$page->head()->addMeta(['name' => 'viewport', 'content' => 'width=device-width, initial-scale=1']);
$page->head()->addMeta(['name' => 'description', 'content' => 'Some HtmlElements samples']);

从URL或从原始字符串包含CSS

// Lets include the Bootstrap CSS
$page->head()->addLink(['rel' => 'stylesheet', 'href' => 'https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/css/bootstrap.min.css' ]);
$page->head()->addLink(['rel' => 'stylesheet', 'href' => 'https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/css/bootstrap-theme.min.css' ]);

// Creates a custom style
$raw = 'body { padding-top: 50px; } '. PHP_EOL .'.starter-template { padding: 40px 15px; text-align: center; }';
$page->head()->add( HTMLBuilder::style() )->text( $raw );

创建完整的Bootstrap导航元素

// Now, we will build a <nav>
$nav = $page->body()->add( HTMLBuilder::nav(['class' => 'navbar navbar-inverse navbar-fixed-top']) );

// The first div.container
$container = $nav->add( HTMLBuilder::div(['class' => 'container']) );

// Inside the div.container, adds a div.navbar-header
$nav_header = $container->add( HTMLBuilder::div(['class' => 'navbar-header']) );

// Now, adds a button to div.navbar-header
$button = $nav_header->add( HTMLBuilder::button(['class'=>'navbar-toggle collapsed', 'data-toggle'=>'collapse', 'data-target'=>'#navbar', 'aria-expanded'=>'false', 'aria-controls'=>'navbar']) );

// Adds some button children
$button->add( HTMLBuilder::span(['class' => 'sr-only']) )->text('Toggle navigation');
$button->add( HTMLBuilder::span(['class' => 'icon-bar']) );
$button->add( HTMLBuilder::span(['class' => 'icon-bar']) );
$button->add( HTMLBuilder::span(['class' => 'icon-bar']) );

// Adds an anchor to div.navbar-header
$nav_header->add( HTMLBuilder::anchor(['class' => 'navbar-brand', 'href' => '#']) )->text('HtmlElements Bootstrap Sample');

// Adds the div.navbar to div.container
$navbar = $container->add( HTMLBuilder::div(['id' => 'navbar', 'class' => 'collapse navbar-collapse']) );

// Creates the navbar list
$ul = $navbar->add( HTMLBuilder::ul(['class' => 'nav navbar-nav']) );
$ul->add( HTMLBuilder::li(['class' => 'active']) )->add( HTMLBuilder::anchor(['href' => '#']) )->text('Home');
$ul->add( HTMLBuilder::li() )->add( HTMLBuilder::anchor(['href' => '#about']) )->text('About');
$ul->add( HTMLBuilder::li() )->add( HTMLBuilder::anchor(['href' => '#contact']) )->text('Contact');

编写页面内容

// We don't need a reference to next div.container
$page->body()->add( HTMLBuilder::div(['class' => 'container']) );

// We need reference the next div.starter-template
$temp = $page->body()->getChildAt(1)->add( HTMLBuilder::div(['class' => 'starter-template']) );

$temp->add( HTMLBuilder::heading(1) )->text('Bootstrap starter template');
$temp->add( HTMLBuilder::p(['class' => 'lead']) )->text('This entire page has been built with HTMLElements.');

现在，添加JavaScript文件

// Bootstrap wants the script to be added on end of body, so...
$page->body()->add( HTMLBuilder::script(['src' => 'https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.12.4/jquery.min.js']) );
$page->body()->add( HTMLBuilder::script(['src' => 'https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/js/bootstrap.min.js']) );

最后，输出页面

echo $page;

贡献

错误报告 & 功能请求

如果您发现错误，请通过 创建问题 并提供复现错误的步骤。

如果您想请求新功能，请随时 创建问题。

开发

想要贡献？这很棒！

我们正在寻找能够编写测试的人。

团队

Leandro Antonello

许可

本项目受 MIT许可 许可，版权所有 © 2017 Leandro Antonello