terça-feira, 22 de abril de 2014

Twitter Bootstrap + Hack

Nesse tutorial será utilizado o "Hello World" que foi criado no post Hack Plugin para Vim e um Hello World e também será utilizado o Bootstrap 3.0.

Lembrando que para utilizar a linguagem Hack é necessário ter a HHVM e um servidor web configurado e rodando. Se você ainda não possui esses requisitos veja o post HHVM + Nginx no Ubuntu 13.10 poderá lhe ajudar.


Como já criamos o arquivo index.php no post Hack Plugin para Vim e um Hello World vamos mostrar como incluir arquivos CSS utilizando o Framework Bootstrap.

Primeiramente vamos criar dentro da raiz do site um arquivo chamado header.php.
$ cd /caminho/para/seu/site
$ vim header.php 
Então incluir o código para formar o cabeçalho.
<?hh
echo '<!DOCTYPE html>';
echo '<html>';
        echo '<head>';
                echo '<meta charset="utf-8">';
                echo '<meta http-equiv="X-UA-Compatible" content="IE=edge">';
                echo '<meta name="viewport" content="width=device-width, initial-scale=1"';
                echo '<title>Teste Hack</title>';
                echo '<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"';
                echo '<!--[if lt IE 9]>';
                echo '<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>';
                echo '<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>';
                echo '<![endif]-->';
        echo '</head>';
        echo '<body>';
Agora vamos criar um arquivo chamado footer.php.
$ vim footer.php 
Neste arquivo vamos incluir as seguintes instruções:
<?hh
echo '</body>';
echo '</html>';
Então abrir o arquivo index.php.
$ vim index.php
É necessário fazer um include_once dentro do arquivo index.php.
<?hh
include_once('header.php');

echo '<h1>Hello World</h1>';

include_once('footer.php');
Pronto agora basta acessar o endereço de seu servidor para poder visualizar o resultado.

Nenhum comentário:

Postar um comentário