Как создать счет-фактуру через Twitter Bootstrap, Часть 2
Эта статья является 2 из 2 частей цикла «Как создать счет-фактуру через Twitter Bootstrap»:
- Как создать счет-фактуру через Twitter Bootstrap, Часть 1
- Как создать счет-фактуру через Twitter Bootstrap, Часть 2
В первой части этой серии я показал, как подготовить различные элементы для создания счета-фактуры через Twitter Bootstrap.
Теперь мы создадим сам счет.
Шапка счета
Откройте в текстовом редакторе файл invoice.html. Замените строку Content here следующим кодом:
<div class="col-xs-6">
<h1>
<a href="https://twitter.com/tahirtaous">
<img src="logo.png">
Logo here
</a>
</h1>
</div>
<div class="col-xs-6 text-right">
<h1>Счет-фактура</h1>
<h1><small>Счет-фактура #001</small></h1>
</div>
<hr>
next sectionЯ использовал класс col-xs-6, чтобы создать два одинаковых столбца. В первом столбце вы можете добавить свой логотип или имя.
Просто добавьте изображение с логотипом в папку счета-фактуры и назовите файл logo.png. Если у вас нет логотипа, вы можете удалить тег изображения и заменить текст Logo Here вашим именем.
Теперь откройте файл invoice.html в браузере Google Chrome, щелкните правой кнопкой мыши в любом месте страницы и нажмите на «Печать». Вы увидите следующее:
Для второго столбца я также использовал класс text-right для выравнивания текста (Шапка счета) по правому краю. Для номера счета-фактуры я использовал класс small.
Если вы видите в превью печати что-то другое, проверьте, вынесли ли вы в комментарии все стили печати по умолчанию.
Раздел реквизитов клиента
После этого мы создадим еще две колонки. Для создания контекстных панелей я буду использовать класс panels. В первой панели вы можете добавить свои данные (имя, адрес), а во второй можно вставить реквизиты клиента. Я также использую col-xs-offset-2, чтобы задать интервал между двумя панелями.
Как я писал ранее, в Bootstrap для панелей доступны различные классы. Я буду использовать основную панель.
Теперь замените текст Next section следующим кодом:
<div class="row">
<div class="col-xs-5">
<div class="panel panel-default">
<div class="panel-heading">
<h4>From: <a href="#">Ваше имя</a></h4>
</div>
<div class="panel-body">
<p>
Адрес <br>
реквизиты <br>
прочее <br>
</p>
</div>
</div>
</div>
<div class="col-xs-5 col-xs-offset-2 text-right">
<div class="panel panel-default">
<div class="panel-heading">
<h4>To : <a href="#">Имя клиента</a></h4>
</div>
<div class="panel-body">
<p>
Адрес <br>
реквизиты <br>
прочее <br>
</p>
</div>
</div>
</div>
</div> <!-- / конец раздела реквизитов клиента -->
job/project details hereВ нашей панели я использовал panel-heading для заголовка, panel-body - для основного раздела.
Раздел описания проекта/выполненных работ
Для этого раздела я буду использовать Таблицы через класс table-bordered. У нас будет пять заголовков для описания проекта. Услуга, Описание, Часы / Кол-во, Расценка / Цена, Итого. Теперь замените текст job/project details here следующим кодом:
<table class="table table-bordered">
<thead>
<tr>
<th><h4>Услуга</h4></th>
<th><h4>Описание</h4></th>
<th><h4>Часы/Кол-во</h4></th>
<th><h4>Расценка/Цена</h4></th>
<th><h4>Итого</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr>
<tr>
<td>Template Design</td>
<td><a href="#">Details of project here</a></td>
<td class="text-right">10</td>
<td class="text-right">75.00</td>
<td class="text-right">$750.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
</tbody>
</table>
Total amount sectionТеперь нам нужно добавить раздел Всего к оплате. Для этой секции я создал новую строку класса text-right. Эта строка имеет два столбца, каждый класса col-xs-2. Первый столбец дополнительно содержит класс col-xs-offset-8.
Благодаря использованию класса col-xs-2 мы можем сдвигать столбцы вправо. Каждый класс увеличивает отступ текста слева по всему столбцу.
Замените текст Total amount section следующим кодом:
<div class="row text-right">
<div class="col-xs-2 col-xs-offset-8">
<p>
<strong>
Итого : <br>
Налог : <br>
Всего к оплате : <br>
</strong>
</p>
</div>
<div class="col-xs-2">
<strong>
$1200.00 <br>
N/A <br>
$1200.00 <br>
</strong>
</div>
</div>
payment details sectionВот, как теперь документ выглядит на предварительном просмотре:
Последний раздел: Форма оплаты
И наконец, нам нужно создать последний раздел нашего документа. В нем мы зададим структуру, состоящую из двух столбцов. Первый столбец будет иметь класс col-xs-5, второй - класс col-xs-7.
Каждый столбец будет содержать блоки div класса panel-info. Первая панель будет использоваться для платежных реквизитов (банковских реквизитов, адреса электронной почты PayPal или любых других реквизитов).
Во второй панели мы добавим контактную информацию (электронная почта, Twitter, номер мобильного телефона) или любую другую информацию.
Замените текст payment details section следующим кодом:
<div class="row">
<div class="col-xs-5">
banking details
</div>
<div class="col-xs-7">
contact details
</div>
</div>Приведенный выше код будет генерировать структуру столбцов. Теперь замените текст banking details следующим кодом:
<div class="panel panel-info">
<div class="panel-heading">
<h4>Банковские реквизиты</h4>
</div>
<div class="panel-body">
<p>Ваше имя</p>
<p>Название банка</p>
<p>Код банка</p>
<p>Номер счета : 12345678</p>
</div>
</div>В этом коде у нас содержится родительский блок класса panel panel-info, затем два дочерних блока. Первый класса panel-heading и второй содержит классы panel-body.
Далее заменяем текст banking details кодом:
<div class="span7">
<div class="panel panel-info">
<div class="panel-heading">
<h4>Контактная информация</h4>
</div>
<div class="panel-body">
<p>
Email : you@example.com <br><br>
Mobile : +72123456789 <br> <br>
Twitter : <a href="https://twitter.com/tahirtaous">@TahirTaous</a> | SitePoint : <a href="http://www.sitepoint.com/author/ttaous/">http://www.sitepoint.com/author/ttaous/</a>
</p>
<h4><small>Счет должен быть оплачен только банковским переводом</h4>
</div>
</div>
</div>
Пользовательские шрифты
Мы завершили создание счета-фактуры через Twitter Bootstrap. Теперь давайте применим веб-шрифты из Google Fonts, чтобы несколько оживить его дизайн. Я хочу использовать шрифт Bree Serif от Google Fonts.
Добавьте следующий код:
<style>
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
body, h1, h2, h3, h4, h5, h6{
font-family: 'Bree Serif', serif;
}
</style>Далее вставьте следующую строку сразу после таблицы стилей в разделе шапки документа:
<link href="css/bootstrap.css" rel="stylesheet">Чтобы использовать шрифт Bree Serif от Google Fonts я применил метод @import. Я использовал Bree Serif для тела документа и названий разделов.
Если вы используете Bree Serif только для селектора тела документа, то в вашем заголовке будут применены стили Bootstrap по умолчанию. Я заменяю все шрифты Bootstrap для строк товарных позиций.
Сохраняем счет-фактуру в формате PDF
Теперь наш счет-фактура полностью готов. Откройте файл invoice.html в браузере Google Chrome, щелкните правой кнопкой мыши в любом месте страницы, нажмите кнопку «Печать» и выберите пункт «Сохранить» на правой боковой панели. Вот и все.