Статьи

Как создать счет с помощью Twitter Bootstrap, часть 2

Декабрь 2, 2018

В первой части этой серии я показал, как настроить создание счета с помощью Twitter Bootstrap.

Теперь мы собираемся создать наш счет.

Заголовок счета

Откройте файл invoice.html в предпочитаемом вами текстовом редакторе. Замените содержимое здесь следующим кодом. 

<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>INVOICE</h1>
  <h1><small>Invoice #001</small></h1>
</div>
<hr>
next section

Я использовал col-xs-6 В наших первых колонках вы можете добавить свой логотип или свое имя. Просто добавьте изображение логотипа в вашу папку счетов и назовите его logo.png. Если у вас нет логотипа, вы можете удалить тег изображения и заменить текст логотипа здесь своим именем.

Теперь откройте файл invoice.html в браузере Google Chrome, щелкните правой кнопкой мыши в любом месте страницы и нажмите «Печать». Вы увидите следующий результат.

заголовок

Во втором столбце я также использовал text-right Для номера счета я использовал small

Если вы видите другой предварительный просмотр, убедитесь, что вы правильно закомментировали стили печати.

Раздел сведений о клиенте

Далее мы создадим две колонки. Я буду использовать класс Panel для создания контекстных панелей. На первой панели вы можете добавить свои данные (имя, адрес), а на второй панели вы можете добавить данные клиента. Я также буду использовать класс panels Как я описал ранее, для классов доступны разные классы. Я буду использовать основную панель.

Теперь замените текст следующего раздела следующим кодом. 

 col-xs-offset-2

В нашей панели я использовал класс заголовка <div class="row">
<div class="col-xs-5">
<div class="panel panel-default">
<div class="panel-heading">
<h4>From: <a href="#">Your Name</a></h4>
</div>
<div class="panel-body">
<p>
Address <br>
details <br>
more <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="#">Client Name</a></h4>
</div>
<div class="panel-body">
<p>
Address <br>
details <br>
more <br>
</p>
</div>
</div>
</div>
</div> <!-- / end client details section -->

job/project details herepanel-heading Теперь, если вы просматриваете свою страницу в Chrome, вы увидите следующий результат.

Раздел о работе / проекте

Для этого раздела я буду использовать таблицы с panel-bodytable У нас будет пять заголовков для деталей работы. Сервис, описание, часы / кол-во, тариф / цена, итого. Теперь замените текст задания / проекта здесь следующим кодом. 

 table-bordered-       <table class="table table-bordered">
        <thead>
          <tr>
            <th><h4>Service</h4></th>
            <th><h4>Description</h4></th>
            <th><h4>Hrs/Qty</h4></th>
            <th><h4>Rate/Price</h4></th>
            <th><h4>Sub Total</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 Каждый класс увеличивает левое поле столбца на весь столбец.

Замените текст раздела Общая сумма следующим кодом. 

 <div class="row text-right">
  <div class="col-xs-2 col-xs-offset-8">
    <p>
      <strong>
        Sub Total : <br>
        TAX : <br>
        Total : <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-5col-xs-7 Каждый столбец будет иметь элементы div с классом panel-info Первая панель будет использоваться для деталей платежа (банковские реквизиты, электронная почта PayPal или любые другие детали). На второй панели мы добавим контактную информацию (электронная почта, твиттер, номер мобильного телефона) и любые другие детали.

Замените раздел платежных данных следующим кодом. 

 <div class="row">
  <div class="col-xs-5">
    banking details
  </div>
  <div class="col-xs-7">
    contact details
  </div>
</div>

Приведенный выше код будет генерировать макет из двух столбцов. Теперь замените банковские реквизиты следующим кодом. 

 <div class="panel panel-info">
  <div class="panel-heading">
    <h4>Bank details</h4>
  </div>
  <div class="panel-body">
    <p>Your Name</p>
    <p>Bank Name</p>
    <p>SWIFT : -------</p>
    <p>Account Number : 12345678</p>
    <p>IBAN : ------</p>
  </div>
</div>

В приведенном выше коде вы можете видеть, что у нас есть родительский div с классами panel panel-info Первый дочерний элемент div имеет класс panel-headingpanel-body

Теперь замените контактную информацию следующим кодом. 

 <div class="span7">
  <div class="panel panel-info">
    <div class="panel-heading">
      <h4>Contact Details</h4>
    </div>
    <div class="panel-body">
      <p>
          Email : [email protected] <br><br>
          Mobile : +92123456789 <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>payment should be mabe by Bank Transfer</h4>
    </div>
  </div>
</div>

bankdetails

Пользовательские шрифты

Мы создали полный счет с помощью Twitter Bootstrap. Теперь давайте использовать веб-шрифты от Google Fonts, чтобы оживить наш счет. Я собираюсь использовать шрифт Bree Serif от Google.

Добавить следующий код 

 <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">

Я использовал метод @import для использования шрифта Bree Serif из шрифтов Google. Я использовал Bree Serif для тела и всех заголовков. Если вы используете шрифт Bree Serif только для селектора тела, тогда ваш заголовок будет использовать стили Bootstrap по умолчанию для всех заголовков. Я переписал семейство шрифтов Bootstrap для всех заголовков.

окончательный

Сохранить счет в формате PDF

Наш счет завершен. Теперь откройте файл invoice.html в Google Chrome, щелкните правой кнопкой мыши в любом месте веб-страницы, нажмите « Печать» и выберите « Сохранить» на правой боковой панели. Это все. Вы можете скачать исходный код этого проекта через репозиторий Github .

36
Share: