# BB-коды

В составе фреймворка PipUI есть компонент с заготовленными стилями для BB-кодов. Всё что необходимо сделать, это выставить необходимую разметку или классы

Жирное начертание шрифта (теги <mark style="color:orange;">`[b][/b]`</mark>)

```html
<span class="bb-bold">Жирное начертание шрифта</span>
```

Наклонный текст (теги <mark style="color:orange;">`[i][/i]`</mark>)

```html
<span class="bb-italic">Наклонный текст</span>
```

Зачеркнутый текст (теги <mark style="color:orange;">`[s][/s]`</mark>)

```html
<span class="bb-strike">Зачеркнутый текст</span>
```

Подчеркнутый текст (теги <mark style="color:orange;">`[u][/u]`</mark>)

```html
<span class="bb-underline">Подчеркнутый текст</span>
```

Выравнивание по левому краю (теги <mark style="color:orange;">`[left][/left]`</mark>)

```html
<div class="bb-text-left">Выравнивание по левому краю</div> 
```

Выравнивание по правому краю (теги <mark style="color:orange;">`[right][/right]`</mark>)

```html
<div class="bb-text-right">Выравнивание по правому краю</div> 
```

Выравнивание по центру (теги <mark style="color:orange;">`[center][/center]`</mark>)

```html
<div class="bb-text-center">Выравнивание по центру</div> 
```

Горизонтальная линия (тег <mark style="color:orange;">`[line]`</mark>)

```html
<div class="bb-line"></div> 
```

Скрытый текст (теги <mark style="color:orange;">`[spoiler="Показать/Скрыть"][/spoiler]`</mark>)

```html
<div class="bb-spoiler">
    <a href="#" rel="nofollow" class="bb-spoiler-trigger" data-collapse="#collapse-trigger-1">Показать/Скрыть</a>
    <div class="bb-spoiler-text collapse" id="collapse-trigger-1">Скрытый текст!</div>
</div>
```

Изображение (теги <mark style="color:orange;">`[img]`</mark>`url`<mark style="color:orange;">`[/img]`</mark>)

```html
<img src="/Themes/Default/img/logo.svg" alt="IMG" class="bb-image" /> 
```

Цитата (теги <mark style="color:orange;">`[quote][/quote]`</mark>)

```html
<div class="bb-quote-wrapper">
    <div class="bb-quote">
        <div class="bb-quote-title">PipUI - 01.01.2019</div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, in.
    </div>
</div>
```

Вставка кода (теги <mark style="color:orange;">`[code][/code]`</mark>)

```html
<div class="bb-code">
    <div class="bb-code-language">Javascript</div>
    <div class="bb-code-text">alert('PipUI');</div>
</div>
```

Вставка **YouTube** проигрывателя (теги <mark style="color:orange;">`[youtube][/youtube]`</mark>)

```html
<div class="bb-youtube">
    <iframe width="510" height="287" src="https://www.youtube.com/embed/eY52Zsg-KVI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
```
