Справка

Справочник по оформлению страниц и примеры кода для вставки элементов страниц.

Заголовок страницы

Использовать на странице только один раз.

Образец заголовка страницы

<class="bd-title" id="content">Образец заголовка страницы</h1>

Аннотация страницы

Аннотация страницы располагается под заголовком страницы.

Текст аннотации.

Заголовки

Заголовок Пример
<h2 id="heading1"></h2>
Заголовок 1 уровня
<h3 id="heading2"></h3>
Заголовок 2 уровня
<h4 id="heading3"></h4>
Заголовок 3 уровня
<h5 id="heading4"></h5>
Заголовок 4 уровня
<h6 id="heading5"></h6>
Заголовок 5 уровня

Карточка человека

Карточка применяется для выделения краткой информации о человеке — политическом деятеле, учёном и др. В мобильной версии карточка не отображается.

...
Гру Ха́рлем Бру́нтланн

Норвежский общественный и политический деятель, премьер-министр Норвегии в промежутке 1981–1996 годов, министр окружающей среды Норвегии в 1974–1979 годах. В 1998–2003 годах занимала должность Генерального директора ВОЗ. С 1 мая 2007 года является Специальным посланником Генерального секретаря ООН по проблеме изменения климата.

Википедия

Блок с вкладками

Применяется для компактного размещения контента, например, для отображения разных мнений или совместного размещения таблицы и изображения и др.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Цитата

Выделение цитаты.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Списки

Можно использовать три вида списков.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
      1. Phasellus iaculis neque
      2. Purus sodales ultricies
      3. Vestibulum laoreet porttitor sem
      4. Ac tristique libero volutpat at
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Аббреиатуры

Добавление аббревиатуры.

attr

<p><abbr title="attribute">attr</abbr></p>

Форматирование текста

Выделение текста.

Выделение текста цветом.

Полужирный текст.

Курсивный текст.

For example, <section> should be wrapped as inline.

Таблицы

Простые таблицы.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell

Таблица 1. Подпись к таблице.

Сворачивающийся блок

Применяется для сворачивания какой-либо информации, если она является дополнительной.

Show components requiring JavaScript
  • Alerts for dismissing
  • Buttons for toggling states and checkbox/radio functionality
  • Carousel for all slide behaviors, controls, and indicators
  • Collapse for toggling visibility of content
  • Dropdowns for displaying and positioning (also requires Popper.js)
  • Modals for displaying, positioning, and scroll behavior
  • Navbar for extending our Collapse plugin to implement responsive behavior
  • Tooltips and popovers for displaying and positioning (also requires Popper.js)
  • Scrollspy for scroll behavior and navigation updates

Видео

Вставка видео

Видео 1. Подпись к видео.

Изображение

Вставка изображения.

Изображение 1. Подпись к изображению.

Блок с термином

Информационный блок применяются для выделения определения термина

Кадастровая стоимость земельного участка

— стоимость земельного участка, устанавливаемая в результате государственной кадастровой оценки земель для целей налогообложения и иных случаев, предусмотренных названным Кодексом и федеральными законами; средний уровень К.с. по муниципальному району (городскому округу) утверждают органы исполнительной власти субъектов РФ.

Галерея изображений

Карусель из нескольких изображений

<div class="bd-example">
  <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>First slide label</h5>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Second slide label</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Third slide label</h5>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

Модальное окно

Применяется для размещения объемного текста во всплывающем по клику окне.

Подсказка

Поясняющий текст во всплывающем окне.

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Схемы

Текстовые схемы.


                        bootstrap/
                        ├── css/
                        │   ├── bootstrap-grid.css
                        │   ├── bootstrap-grid.css.map
                        │   ├── bootstrap-grid.min.css
                        │   ├── bootstrap-grid.min.css.map
                        │   ├── bootstrap-reboot.css
                        │   ├── bootstrap-reboot.css.map
                        │   ├── bootstrap-reboot.min.css
                        │   ├── bootstrap-reboot.min.css.map
                        │   ├── bootstrap.css
                        │   ├── bootstrap.css.map
                        │   ├── bootstrap.min.css
                        │   └── bootstrap.min.css.map
                        └── js/
                            ├── bootstrap.bundle.js
                            ├── bootstrap.bundle.js.map
                            ├── bootstrap.bundle.min.js
                            ├── bootstrap.bundle.min.js.map
                            ├── bootstrap.js
                            ├── bootstrap.js.map
                            ├── bootstrap.min.js
                            └── bootstrap.min.js.map

Разметка для блога

1. Создать файл в папке _posts с именем год-месяц-день-заголовок.md

2. Начать файл с конструкции:


---
layout: post
title: Заголовок поста
video: id видео для заголовка при необходимости
---
                

3. Абзацы разделяются пустой строкой. Первый абзац — аннотация страницы.

4. Заголовки:


# H1
## H2
### H3
#### H4
##### H5
###### H6

5. Выделение текста:


*Курсивный текст*
**Полужирный текст**
Полужирный курсивный или их сочетание **полужирный _полужирный+курсивный_**.
 ~~Перечеркнутый текст~~
 `Моноширный текст, выделенный цветом`

6. Списки


Нумерованный список: любые цифры с точкой.

Ненумерованный список: дефис.

Отступ:
⋅⋅⋅Текст с отступом

Отступ нескольких строк:
⋅⋅⋅Строка 1⋅⋅
⋅⋅⋅Строка 2⋅⋅
⋅⋅⋅Строка 3
    

7. Ссылки


[Текст ссылки](URL ссылки)

8. Вставка изображения


![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")

Изображение-ссылка
[![Bootstrap themes grid](/assets/img/2018/02/themes-grid.png)]({{ site.themes }}/)

9. Простые таблицы


| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

10. Цитата


> Blockquotes are very handy in email to emulate reply text.

11. Горизонтальный разделитель


    --- три или более дефисов

12. Видео


[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)

Более подробно о возможностях оформления в Bootstrap документации.