Example 1. Layout with three columns

The style is added only for visual selection of columns.

The container class creates a fixed-width layout, the value of which depends on the size of the device. For monitors, the maximum width is 1170 pixels, for smartphones the layout will occupy the entire available width. If you do not need to limit the width of the layout, then instead of the class of container should use container-fluid (example 2).

Example 2. Rubber layout

 

  

   
 4 columns  div>
   
 6 columns  div>
   
 2 columns  div>
   div>
  div> 
  Indents between speakers 
  The columns initially fit snugly together, which is not always useful for the layout.  To add white space between columns, use the class col-xs-offset-N, where N varies from 0 to 12. Indent is added to the left of the current column (Example 3). 
  Example 3. Adding indents 
 

  

   
 3 columns  div>
   
 5 columns  div>
   
 2 columns  div>
   div>
  div> 
  The result of this example in the browser is shown in Fig.  3 
  Fig.  3. Columns with indents between them. 
  Remember that indents are added to the total number of columns, the sum of which should not exceed 12, otherwise the columns will start moving to another line. 
  Column shift 
  Each column can be shifted left or right by a specified number of columns.  Again this is done using classes.  col-xs-pull-N shifts the column to the left by the specified number, and col-xs-push-N shifts to the right (example 4).  Here N can vary from 0 to 12. 
  Example 4. Right column shift 
 

  

   
 3 columns  div>
   
 5 columns  div>
   
 2 columns  div>
   div>
  div> 
  Note that the shift is not an additional column as when using offset, so you do not need to summarize all the values.  You also need to ensure that the speakers do not overlap each other. 
  Nested columns 
  With the layout of the complex layouts of twelve columns may not be enough, moreover, in one column there may be additional ones.  So we will need some column attachments to others.  This is done in a similar way (Example 5). 
  Example 5. Nested columns 
 

  

   
 Title  div>
   

    

     
 Column 1  div>
     
 Column 1-1  div>
     
 Column 1-2  div>
     div>
    div>
   
 Column 2  div>
   div>
  div> 
  To create nested columns again add a 
 with the class row, which contains the desired structure of nested columns.  Thus you can create any complex layouts. 
  Notice that the header fills the entire width of the layout, because it occupies all 12 columns.  An additional container row for such things is not necessary to enter, the transfer of the remaining columns to another row will occur automatically (Fig. 4). 
  Fig.  4. Nested columns 
  Adaptive design is called the way of layout, when the width of the layout of the web page adapts to the width of the device.  The simplest option is proportional zooming, but in fact it is better to change the location of elements and their sizes.  So we get the most optimal view for smartphones, tablets and monitors. 
  In Bootstrap already incorporated the possibility of responsive design.  If you make a simple multi-column layout, and then begin to reduce the width of the browser window, you will notice that the layout itself changes.  But this is not all limited, it is much more interesting to change the layout itself a little so that it best suits the device.  For this purpose, keywords are entered that are found in class names, they are presented in Table.  one. 
  Tab.  1. Keywords 
  Device 
  Name 
  Layout width 
  Smartphone 
  xs 
  Less than 768px 
  The tablet 
  sm 
  768px and more 
  Monitor 
  md 
  992px and more 
  High resolution monitor 
  lg 
  1200px and more 
  To set the width of the speakers for smartphones, it is enough to include the class col-xs-N in the code, for monitors it will already be called col-md-N.  Any classes can be combined with each other, if the class for the selected device is not specified, then it is inherited from the bottom up.  This means that the layout for the smartphone will look the same as the layout for the monitor.  But not the other way around.  That is why the layout always begins with the layout for the smartphone, then the tablet and monitor are already coming. 
  Since we are now focusing on mobile devices, we need to add the following line inside the 
. 
  
  Now our design will scale to the width of the device and look optimal, especially on devices with a small screen. 
  Taking into account this line and new classes we will make a simple layout with two columns (example 1). 
  Example 1. Adaptive layout 
 
 
  
   
   
  To test the layout, it is not necessary to watch it on any given device, it is enough to reduce the width of the browser window and we will immediately see the changes.  In fig.  1-3 shows the result of this example with different window widths. 
  Fig.  1. View on smartphone 
  Fig.  2. View on the tablet 
  Fig.  3. View on the monitor 
  We have considered the simplest case when the arrangement of elements practically does not change relative to each other.  What if you need to rearrange the elements in places or something to remove for small screens?  Directly, this will not work, so let's go for a little trick - add two identical elements in different places and hide one and display the other.  Bootstrap offers two sets of classes for hiding and showing elements depending on the window width - hidden-xs and visible-xs-block.  The principle is the same as when working with columns; instead of xs, we substitute the desired keyword.  Example 2 shows how to “move” the title. 
  Example 2. Changing the position of the header 
 

  

   
 Title  div>
   
 Column 1  div>
   
 Column 2  div>
   
 Title  div>
   div>
  div> 
  The result of this example is shown in Fig.  four. 
  Fig.  4. Heading at the bottom of the columns with a narrow window width. 
  In this example, the class hidden-xs means that the column for smartphones should be hidden, and the visible-xs-block should be shown on the contrary.  When viewed on a wide screen, the title will always be at the top, and at the narrow at the bottom. 
  Bootstrap styles 
  Boostrap contains many ready-made styles for decoration elements.  It is quite simple to apply them, all you need to add to the element is a class defined in the styles.  This reduces the time to develop the project, because you do not have to think about the design of individual elements.  The style of some elements, like the 
 headings, also differs from the original one, this should be taken into account. 
  Color and background 
  The web page is set to white background color, Helvetica Neue, Helvetica, Arial font set, and # 333 text color.  You can also use the specified set of colors to draw attention to the text and create informational messages (Example 1). 
  Example 1. Text colors 
 
 Gray  p>
 
 Main text  p>
 
 Color for success message  p>
 
 Color for information  p>
 
 Warning Color  p>
 
 Color for error messages  p> 
  The result of applying these classes is shown in Fig.  one. 
  Fig.  1. Colors for different messages 
  Similarly, you can change the background color of a text or other element, for example, buttons.  Class names change a little, but the principle will be preserved (Example 2). 
  Example 2. Background elements 
 
 Main text  p>
 
 Color for success message  p>
 
 Color for information  p>
 
 Warning Color  p>
 
 Error message color  p> 
  The result of applying these classes is shown in Fig.  2 
  Fig.  2. Background for different messages 
  Sidebars 
  The pull-left and pull-right classes are used to create sidebars, which align the element, respectively, on the left and right edges.  Inset is a block with pictures and text that is embedded in the main text.  The sidebar is usually located on the left or right edge of the text block, and the main text flows around it from other sides (Example 3). 
  Example 3. Creating a sidebar 
 
 Borsch  h1>
 

   
  Mistress note  small>  h2>
   
 Borsch will taste better if you add a little salt in it.  p>
  div>
 
 Boil meat until cooked.  Wash the beets, peel, 
  нарезать соломкой и тушить с помидорами до полуготовности.

  
Бульон процедить, мясо нарезать кусочками. В бульон добавить 
  нарезанный дольками картофель, довести до кипения, опустить нарезанную 
  соломкой свежую капусту и варить 10-15 минут, добавить пассерованные 
  овощи, болгарский перец, нашинкованный тонкой соломкой, 
  специи и довести до готовности.

Готовому борщу дать настояться в течение 20-25 минут. 
  При подаче к столу добавить сметану, мясо, зелень.
 
  The result of this example is shown in Fig.  3 
  Fig. 3. Вид врезки в тексте 
 Чтобы наша врезка была более заметна, к 
 добавлен класс bg-info, а также ограничена его ширина. Само обтекание в стилях делается с помощью свойства float, которое продолжает воздействовать и на нижние элементы. Для отмены действия float применяется класс clearfix, он добавляется к любому нижележащему элементу. 
  see also 
 Документация по использованию классов в Bootstrap 
 http://getbootstrap.com/css/ 
 Текст в Bootstrap 
 По умолчанию размер шрифта основного текста установлен как 14px, а межстрочное расстояние (значение свойства line-height) — 1.428. Между абзацами текста (элемент 
) введено дополнительное расстояние в 10 пикселей. 
  Headlines 
 Для заголовков применяются знакомые из HTML элементы с 
 по 
. Их стиль немного отличается от исходного (рис. 1). 
  Fig. 1. Вид заголовков текста 
 Заголовки допустимо немного уменьшить самостоятельно, если внутрь вставить элемент , получится такая комбинация. 
Заголовок первого уровня
 
 Такого типа заголовки по виду несколько иные и предназначены для других разделов сайта, например, боковой панели (рис. 2). 
  Fig. 2. Уменьшенные заголовки 
 Лид 
 Лидом в журналистике называют первый абзац статьи привлекающий внимание и дающий краткое представление о содержании статьи. Обычно он по своему виду немного отличается от основного текста. Чтобы указать лид достаточно к абзацу или колонке добавить класс lead, как показано в примере 1. 
 Пример 1. Создание лида 
Дорогой друг! Я расскажу тебе удивительную историю
 про маленького червячка, который жил в яблоке,
 о его путешествии в волшебную страну Нортландия, о том,
 какие опасности подстерегали его на пути, кого он повстречал
 по дороге, какие приключения и испытания прошёл,
 и что он рассказал по возвращению домой.

Итак, сказка про маленького червячка, который жил в яблоке,
 о его путешествии в волшебную страну Нортландия, о том,
 какие опасности подстерегали его на пути, кого он повстречал
 по дороге, какие приключения и испытания прошёл,
 и что он рассказал по возвращению домой.
 
  The result of this example is shown in Fig.  3 
  Fig. 3. Вид лида в браузере 
  Abbreviation 
 Аббревиатура это сложносокращённое слово (колхоз) или слово, полученное из первых букв слов предложения (КГБ). Для обозначения аббревиатур в тексте применяется элемент , а для расшифровки внутрь него добавляется атрибут title (пример 2). 
 Пример 2. Аббревиатура 
CSS —
  набор параметров форматирования, который применяется к элементам
  документа, чтобы изменить их внешний вид. 
 
 Аббревиатура обозначается точечным подчёркиванием, при наведении на слово курсора мыши он меняет свой вид на подсказывающий и появляется всплывающая подсказка, если она есть. 
 При добавлении класса initialism к элементу  для него устанавливается свойство font-size со значением 90%, тем самым аббревиатура выводится уменьшенного размера. 
CSS 
  Quotes 
 Для оформления больших цитат в HTML применяется элемент 
, но Bootstrap немного меняет его оформление (рис. 4). Слева от цитаты отображается серая вертикальная линия, а имя автора или источник цитаты выводится уменьшенным размером и серого цвета. 
  Fig. 4. Вид цитаты в браузере 
 Если сама цитата делается весьма традиционно, то подпись к ней добавляется с помощью элемента  или 
 Пример 3. Добавление цитаты 
 

 
Нельзя сказать человеку: «Ты можешь творить. 
  Так давай, твори». Гораздо вернее подождать, пока он 
  сам не скажет: «Я могу творить, и я буду творить, хотите 
  вы этого или нет».

 
Айзек Азимов

  blockquote> 
 Цитату можно инвертировать, тогда линия будет справа, а текст выравниваться также по правому краю (рис. 5). 
  Fig. 5. Цитата, выравненная по правому краю 
 Просто добавьте класс pull-right к 
. 
...
 
 Листинг 
 Нам часто приходится выкладывать листинги программ и указывать переменные. В HTML для этого есть несколько готовых элементов —  обозначает отдельные переменные,  — строчный фрагмент кода, а 
 используется для многострочного кода (пример 4). 
 Пример 4. Вывод программы 
Функция checkParent() вызывается 
  с параметрами src и dest.

function checkParent (src, dest) {
  while (src != null) {
    if (src.tagName == dest) 
      src = src.parentElement
     }
   return null
}
 
  The result of this example is shown in Fig.  6 
  Fig. 6. Вид кода программы в браузере 
The 
 element occupies a height equal to its content, which can be inconvenient for large listings. 
To limit the height, it is enough to add the pre-scrollable class, then the height will be equal to 350 pixels and a vertical scroll bar will appear.
 Images in Bootstrap 
There are several classes for processing images - img-rounded, img-circle and img-thumbnail. To change the display style of pictures, simply add one of these classes to the 
  but. Original image 
  b. img-rounded 
  at. img-circle 
 img-thumbnail 
  Fig. 1. Change image style 
 The img-rounded class rounds the corners of the image, img-circle makes it round, and img-thumbnail adds a frame around the image. 
 Example 1 shows how to display a photo and set its style. 
 Example 1. Round picture 

 
  
  
  
  
   head>
  
  

   

    
   div>
    
 Real combat cat. Why fighting, you ask?
     So after all only dangerous animals keep on a leash, 
     so that they do not harm anyone.  div>
     div>
    div>
  
  
   body>
  html> 
Any output images have original dimensions, but for adaptive design it is better when the width of the picture adapts to the width of the column. To do this, it is enough to add the img-responsive class to the 
  Fig. 2. View photos while reducing the size of the window 
 Bootstrap lists 
On websites, lists are used both for their intended purpose - to display lists, as well as to create different navigation. This is due to the fact that the elements of the lists themselves have a strict hierarchy and allow you to make a nested structure, in addition, the appearance of lists is easy to manage through styles.
 Horizontal list 
 Такой список обычно используется для создания меню, к элементу 
 для этого нужно только добавить класс list-inline (пример 1). 
 Пример 1. Горизонтальное меню 
 
 
  Sepulki   li> 
  Sepulcaria   li> 
 < a href = #> Clearing   li>  ul> 
  This is how the menu looks like (fig. 1).  The style of the middle link changes when you hover over it. 
  Fig.  1. Horizontal list 
  Definition list 
  The list of definitions consists of two elements - the term and its definition.  The list itself is created with the help of the 
 container, the term with the 
 element, and its definition with the help of 
 (example 2). 
  Example 2. List of definitions 
 

   
 Sepul  dt>
   
 An important element of the Ardrit civilization from the planet Enteropia.  dd>
   
 Sepulcaria  dt>
   
 Sepulency devices.  dd>
   
 Clearing  dt>
   
 Occupation of ardrites from the planet Enteropia.  dd>
  dl> 
  Bootstrap proposes to make such a list clearer by horizontal arrangement of the term and definition.  To the 
 element, it is enough to add the class dl-horizontal (example 3). 
  Example 3. Horizontal definition list 
 

   
 Sepul  dt>
   
 An important element of the Ardrit civilization from the planet Enteropia.  dd>
   
 Sepulcaria  dt>
   
 Sepulency devices.  dd>
   
 Clearing  dt>
   
 Occupation of ardrites from the planet Enteropia.  dd>
  dl> 
  The result of this example is shown in Fig.  2 
  Fig.  2. Horizontal definition list 
  If the term is too long, it will be cut off and an ellipsis will be added to it.  Also, when reducing the window size, the list view changes to the traditional one (Fig. 3). 
  Fig.  3. List of definitions 
  Bootstrap tables 
  For a basic table layout, it’s enough to include the table class in the 
 element.  The view of the table arranged through the styles is shown in fig.  one. 
  Fig.  1. Table 
  There are no frames around the table, the rows of the table are separated from each other by lines.  To the table was a grid, add a class table-bordered (example 1). 
  Example 1. Grid 
 
 do not stand out in this way. 
  Fig.  3. Selecting a row in a table 
  For convenient presentation of tabular data, it makes sense to make the rows of the table alternate, so that the background color of even and odd lines differs (Fig. 4).  This type of table is often called a zebra. 
  Fig.  4. Alternating lines 
  This format is again done by adding the class table-striped to the 

  

   

    
  th> 
 2021  th> 
 2022  th> 
 2023  th>
    tr>
   thead>
  

   

    
 Rubies  td> 
 43  td> 
 51  td> 
 79  td>
    tr>
   

    
 Emeralds  td> 
 28  td> 
 34  td> 
 48  td>
    tr>
   

    
 Sapphires  td> 
 29  td> 
 57  td> 
 36  td>
    tr>
   tbody>
  table> 
  Notice that the class table we save and add new classes to it.  The result of this example is shown in Fig.  2 
  Fig.  2. Grid 
  You can add one more table-hover class to our collection, and then when you hover over a row in the table, it will be highlighted in gray (Fig. 3).  Lines inside 
 element.  All of the above can be combined in one table. 
 
  Buttons in Bootstrap 
  Buttons are used not only as elements of forms, it is possible to turn a link into a button, giving it a rectangular appearance.  It will still remain a link with all available functionality, but in its design it will resemble the same button.  Similarly, the opposite - the button is permissible to give the appearance of the link. 
  To create buttons, add the btn class to the ,  or  element.  The second class is needed to change the style of the button.  Example 1 shows the possible options for the buttons and for what purposes they are intended. 
  Example 1. Buttons 
  Default Button  button>
  Main button  button>
  Information  button>
  Warning  button>
  Error  button>
  Button as link  button> 
  The result of this example is shown in Fig.  one. 
  Fig.  1. Different buttons 
  When you hover the cursor on the button, it becomes slightly darker. 
  Button sizes 
  If you need to make the button larger or smaller, then three additional classes are used for this.  The btn-lg class sets a large button, the btn-sm button is small, and the btn-xs button is very small (example 2). 
  Example 2. Buttons of different sizes 
  Big button  button>
  Default Size  button>
  Small button  button>
  Very small  button> 
  The result of this example is shown in Fig.  2 
  Fig.  2. Buttons of different sizes 
  The button can be made and block, occupying all the width available to it.  Add to it only the btn-block class, the result will be the next button (Fig. 3). 
  Fig.  3. Block button 
  The code for creating such buttons is shown in Example 3. 
  Example 3. Block buttons 
  100% wide button  button>
  Another such button  button> 
  Button lock 
  For the button to stop working, for the  and  elements, it suffices to add the attribute disabled.  Bootstrap itself will change the style of such buttons, showing clearly that it is useless to click on them.  For links designed as buttons, you must enable the class disabled, as shown in Example 4. 
  Example 4. Locked buttons 
  Normal button  button>
  You do not click!  button>
 
  Blocked link  
  The result of this example is shown in Fig.  four. 
  Fig.  4. Type of normal and inactive buttons 
  Bootstrap Icons 
  Bootstrap includes several dozen icons that can be used in the text, for buttons, in forms, in navigation and in other places.  The icons are made in the form of font characters, so they can be scaled in large limits without degrading the quality and occupy at the same time a small amount.  To add the desired icon, an empty element  is usually used, inside which we write the class of the icon.  For example, like adding a magnifying glass symbol to a button, it usually symbolizes a search. 
    i>  button> 
  Example 1 shows the creation of a toolbar with buttons and icons on them. 
  Example 1. Toolbar 
 

  

      i> 
      i> 
      i> 
      i> 
   div>
  

      i> 
      i> 
   div>
  div> 
  The result of this example is shown in Fig.  one. 
  Fig.  1. View of buttons with icons 
  see also 
  List of all icons and classes for them 
  http://getbootstrap.com/components/#glyphicons 
  Forms in Bootstrap 
  Layout forms - this is one of the strengths of Bootstrap.  The framework not only helps to arrange the elements of the forms in the desired order, but also provides for changing the type of elements and their interaction with the user. 
  Let's take a look at a typical form for logging into the site and, using its example, we will analyze how the Boostrap works for forms.  Example 1 shows the creation of a basic form without adding additional classes. 
  Example 1. Login form 
 

  

   
 Site login  legend>
   
  Login  label>  p>
   
   p>
   
  Password  label>  p>
   
   p>
   
   Remember me  label>  p>
   
  Login  button>  p>
   fieldset>
  form> 
  The form looks boring (Fig. 1), because any design is not yet included. 
  Fig.  1. Type of original form 
  To begin with, we will add the form-control class to the text field and password field, this will change the style of the text fields.  Next, you need to group the title and the field behind it, so that the distance between them is less than usual.  Add a  and  inside the 
 element with the form-group class.  In addition, we will change the checkbox with the text by adding them inside the 
 with the checkbox class and set another button type.  Example 2 shows shape changes. 
  Example 2. Application of classes 
 
  

   
 Site login  legend>
   

     Login  label>
    
    div>
   

     Password  label>
    
    div>
   

      Remember me  label>
    div>
    login  button>
   fieldset>
  form> 
  As a result, the form looks different (Fig. 2). 
  Fig.  2. Type of form 
  Single line form 
  To make the form more compact, it is enough to add the form-inline class to the 
 element.  The elements of the form will then stretch out in one line (Fig. 3).  Also from the code should be removed 
 and 
. 
  Fig.  3. Single line form 
  Example 3 shows the creation of such a form. 
  Example 3. Single line form 
 
  

    Login  label>
   
   div>
  

    Password  label>
   
   div>
  

     Remember me  label>
   div>
   login  button>
  form> 
  When reducing the size of the window, the form will cease to be one-line and take the initial form shown in Fig.  2 
  Horizontal shape 
  This type of form is often found on sites when the field and the label to it are located on the same line (Fig. 4). 
  Fig.  4. Type of horizontal form 
  To create a form of this type, several actions are required: 
  add form-horizontal to ; 
  add a control-label to , then the field label will be aligned to the right and along the central horizontal axis of the field; 
  wrap  and  in a 
 with the form-group class; 
  use modular grid. 
  We have already dealt with a 12-column modular grid, apply these skills to manage the design of the form.  The label will occupy two columns, and the width of the field itself - the remaining ten columns.  Instead of adding an additional 
, add the class col-sm-2 directly to the , so the number of code elements will be slightly reduced.  As for the checkbox and the button, we add the class col-sm-offset-2 to them, it will shift the fields right below the text field (example 4). 
  Example 4. Horizontal shape 
 

  

    Login  label>
   

    
    div>
   div>
  

    Password  label>
   

    
    div>
   div>
  

   

      Remember me  label>
    div>
   div>
  

   

     login  button>
    div>
   div>
  form> 
  In the classes, we used the sm prefix to make the form look traditional on smartphones (Fig. 2), and on horizontal screens - as horizontal. 
  Bootstrap components 
  Components Bootstrap - a collection of tools used in the design of sites.  Each component, as a rule, includes a set of several HTML elements, styles for them and, if necessary, scripts providing user interaction.  The following are some of the popular Bootstrap components. 
  Button group 
  Combines several buttons into one group, which is displayed as a whole, without gaps between the buttons. 
  Drop down menu 
  It contains a button, when clicked, a list appears with links. 
  Tabs 
  On sites, tabs are used where compact and vividly assemble information into blocks. 
  Bread crumbs 
  On sites, bread crumb navigation is used to show the path to the current document and its position in the site hierarchy. 
  Pagination