Как создать счет-фактуру через Twitter Bootstrap, Часть 1
Эта статья является 1 из 2 частей цикла «Как создать счет-фактуру через Twitter Bootstrap»:
- Как создать счет-фактуру через Twitter Bootstrap, Часть 1
- Как создать счет-фактуру через Twitter Bootstrap, Часть 2
Несколько дней назад у меня возникла необходимость создать счет-фактуру. Я хотел найти среди онлайн-сервисов Google соответствующий раздел, чтобы можно было быстро выписать документ.
Я нашел один сайт, создал простой счет, но, когда я нажал на кнопку «Сохранить в PDF», система потребовала от меня зарегистрироваться. Сказать по правде, я не был готов регистрироваться, просто чтобы скачать счет в PDF.
Я давно пользуюсь Bootstrap, и мне очень нравится этот замечательный фреймворк, поэтому я просто решил посмотреть, смогу ли я создать счет-фактуру через него.
Это заняло у меня некоторое время, зато я научился это делать. В этой статье я поделюсь своим опытом с вами.
Twitter Bootstrap - очень популярная система для создания веб-сайтов, она предлагает для этих целей большие возможности. В ней вы можете очень быстро создать несложный сайт, но в этой статье я покажу, как сделать кое-что другое.
Я расскажу вам, как в Twitter Bootstrap создать счет-фактуру и сохранить его в виде PDF-файла.
Что нам потребуется
Нам нужен будет текстовый редактор для редактирования файлов HTML. Вы можете использовать любой текстовый редактор по вашему выбору, я буду пользоваться SublimeText.
Нам также необходим фреймворк Twitter Bootstrap и браузер Google Chrome, так как он позволяет сохранять веб-страницы в формате PDF-файлов.
Ссылки для скачивания:
- Скачать Bootstrap 3
- Скачать Bootstrap 2.3.2
- Браузер Google Chrome
- SublimeText
Приступим
Создаем на компьютере новую папку и называем ее «Счет-фактура». Теперь открываем архив Bootstrap, в корневой директории находятся папки CSS, JS и папка шрифтов. Для нашего проекта нам потребуются CSS-файлы Bootstrap. Просто скопируйте папку CSS в нашу новую папку счета-фактуры.
В папке CSS вы увидите четыре CSS-файла. Нам нужен будет файл bootstrap.css, остальные, если хотите, можно удалить.
Откройте текстовый редактор, создайте новый файл и сохраните его под именем invoice.html в нашей папке счета, а затем добавьте в него следующий код.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>INVOICE Template</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
content here
</div> <!-- /row -->
</div> <!-- /container -->
</body>
</html>Это базовый код для нашего файла. В нашем проекте счета-фактуры мы будем использовать очень мелкую сетку. Для этого мы применим класс col-xs-*.
Почему мы используем неадаптивную сетку
Чтобы сохранить наш счет в формате PDF, мы будем использовать браузер Google Chrome. Если мы применим среднюю сетку, при выводе на печать Chrome сдвинет столбцы относительно друг друга. Как показано на рисунке ниже.
Как видите, средняя сетка в браузере выглядит хорошо, но когда мы пытаемся распечатать нашу страницу, Chrome сдвигает столбцы. Теперь вы понимаете, почему нам нужно использовать дополнительный класс col-xs-*.
Альтернативный метод: использование неадаптивного CSS из Bootstrap 2
Если вы знакомы с Bootstrap 2, то можете использовать его в качестве альтернативы. Он поддерживает неадаптивные стили CSS. Bootstrap 2 изначально не был предназначен для создания страниц под мобильные устройства. Поэтому чтобы сделать веб-страницы адаптивными, вам нужно было добавлять дополнительную таблицу стилей.
Если вы хотите использовать Bootstrap 2, тогда для создания столбцов вы можете использовать классы span* (замените * на номер от 1 до 12 для соответствующей ширины столбца). В нашем примере мы будем создавать макет с тремя одинаковыми столбцами.
<div class="row">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>Внимание: Если вы хотите применить Bootstrap 2, то вам придется использовать две таблицы стилей: первую из Bootstrap 2 для неадаптивной сетки, вторую - из Bootstrap 3 для Панелей. Потому что Панели - это элемент нового Bootstrap 3.
Что мы собираемся применить
Bootstrap 3, «Мелкая сетка» и «Панели». Я буду применять Bootstrap 3, потому что для создания панелей я использую класс .panel. В Bootstrap доступны различные панели, вы можете использовать любую из них. Я задействую классы panel-primary и panel-info.
Также в системе доступны такие классы, как .panel-default .panel-success .panel-danger .panel-warning .panel-info.
Есть еще несколько классов, с помощью которых можно задавать панели: .panel .panel-default .panel-body.panel-title .panel-heading .panel-footer .panel-collapse.
Несколько важных замечаний по стилям для печати Bootstrap
Имейте в виду, что Bootstrap удаляет некоторые стили при выводе на печать. Например, делает полностью прозрачным фон, удаляет текст-тень, тени рамок. Что касается ссылок, то после текста ссылки будет отображаться URL-адрес ссылки.
Это означает, что при печати веб-страницы из браузера Google Chrome не будет виден цвет фона, и ссылки также не будут выделяться цветом.
Как перенастроить стили Bootstrap для печати
Вы можете найти стили печати Bootstrap в строке 33 файла bootstrap-min.css, а также стили печати задаются в строках с 217-ой по 290-ю.
В файле bootstrap.css выделяем весь код от:
@media print {
* {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
box-shadow: none !important;
}и до конца страки 290:
.table {
border-collapse: collapse !important;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #ddd !important;
}
}и нажимаем Ctrl+/. Все стили печати будут вынесены в комментарии.
Теперь мы задали все необходимые элементы. Во второй части данной статьи мы создадим наш счет-фактуру и сохраним его в формате PDF.