Ссылки

link

active link

link line

active link line

active 2 link line

link underline

link inherit

link active 2

Forms

radio buttons

compact

original

checbox buttons

compact

original

checbox buttons outline style secondary (.custom-checkbox--style-secondary)

compact

original

input text

compact

original

input text GROUP ACTIVE

compact

original

error input text

compact

original

valid input text

compact

original

password text

compact

original

error password text

compact

original

file load

compact

original

input textarea

compact

original

Select

compact

compact not plugin select

original

original not plugin select

quantity input vertical

quantity input vertical left

quantity input horizontal

bredcrumb

Dropdowns

click dropdown

click_slide dropdown

hover dropdown

hover_slide dropdown

style dropdown

Collapse

Accordion

Collapse click

Click open collapse

Multiple targets

Toggle first element Toggle second element Toggle both elements

Tabs

Tooltip

standart tooltip

plugin n-tooltip

plugin n-tooltip cursor click

plugin n-tooltip cursor hover

Pagination

menu modal

left menu

bottom menu

modal

        <div class="modal fade"
         id="exampleModal"
         tabindex="-1"
         role="dialog"
         aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">
                        <i class="modal-title_icon modal-title_icon--left material-icons">error</i>
                        &nbsp;
                        Modal title
                    </div>
                    <button type="button"
                            data-dismiss="modal"
                            class="close modal-dialog_btn-close"
                            aria-label="Close">
                        <i class="material-icons modal-dialog_btn-close-icon">close</i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="modal-text modal-text--center">text</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary modal-footer_btn" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary modal-footer_btn">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    

Card

Example card

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Body card

Header and footer

Image overlays

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card styles

Border

Card groups

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Card groups

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

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

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

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

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

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

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Alert

Examples

Link color

Additional content

Dismissing

Bunch button 2

Open block

block active

block hover

block video youtube

        <div class="js-video-youtube"
             data-path-video="https://www.youtube.com/watch?v=8GJFzFijCRE&t=219s"
             data-width="800"
             data-height="500"></div>
    

scroll top elem

        <button class="btn btn-primary js-scroll-top-elem js-scroll-top-elem_1"
            data-scroll-elem=".js-scroll-top-elem_2"
            data-click-elem=".js-scroll-top-elem_2">
        1 btn, click scroll to elem
    </button>
    

page links

        <ul class="page-links js-specificsize"
            data-textshow="Show more"
            data-texthide="Hide"
            data-media="[900, 2][767, 1][500, 3]"
            data-animation="top"
            data-countmaxline="1">
            <li><a href="#" title="1 link">1 link</a></li>
        </ul>
    

• 1 link
• 2 link
• 3 link
• 4 link
• 5 link
• 6 link
• 7 link
• 8 link
• 9 link
• 10 link
• 11 link
• 12 link
• 13 link
• 14 link
• 15 link

sticky sidebar

spinner

Border spinner

Colors

Growing spinner

Colors

Size

Custom size

Buttons

block spinner

popovers

Example

Dismiss on next click

Four directions

Disabled elements

badge

Example

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Contextual variations

Pill badges

Links

navbar

Color schemes

Placement default

Placement Fixed top

Placement Fixed bottom

Placement Sticky top

Toggler

External content

tables

Examples

Color

Table head options

Striped rows

Bordered table

Hoverable rows

Small table

Contextual classes

Captions

Always responsive

Breakpoint specific

progress

How it works

Labels

Height

Backgrounds

Multiple bars

Striped

Animated stripes

toasts

Calling toast js

        prestashop.divlf_theme.toasts.add(
            {
                delay: 3000,
                autohide: true,
                animation: true,
                style_classes: []
            },
            undefined,
            'title',
            'time',
            true,
            'content'
        )
    

Calling toast error js

        prestashop.divlf_theme.toasts.add(
            {
                delay: 3000,
                autohide: true,
                animation: true,
                style_classes: ['text-white', 'bg-danger']
            },
            undefined,
            'title',
            'time',
            true,
            'content'
        )
    

Toasts

Bootstrap 11 mins ago

Hello, world! This is a toast message.

Bootstrap 11 mins ago

Hello, world! This is a toast message.

Bootstrap 11 mins ago

Hello, world! This is a toast message.

Bootstrap 11 mins ago

Hello, world! This is a toast message.

Bootstrap 11 mins ago

Hello, world! This is a toast message.

Bootstrap 11 mins ago

Hello, world! This is a toast message.

Bootstrap 11 mins ago

Hello, world! This is a toast message.

Bootstrap 11 mins ago

Hello, world! This is a toast message.

Bootstrap 11 mins ago

Hello, world! This is a toast message.

Bootstrap 11 mins ago

Hello, world! This is a toast message.

Bootstrap 11 mins ago

Hello, world! This is a toast message.

Bootstrap 11 mins ago

Hello, world! This is a toast message.

Bootstrap 11 mins ago

Hello, world! This is a toast message.

Bootstrap 11 mins ago

Hello, world! This is a toast message.

Bootstrap 11 mins ago

Hello, world! This is a toast message.

Bootstrap 11 mins ago

Hello, world! This is a toast message.

responsive

Применение атрибутов при изменение блока, к примеру изменения списка товаров

        <div>
            <strong>Desktop:</strong>
            <span data-theme-responsive="_desktop_768_miniature-actions"><span>value desktop</span></span>
        </div>
        <div>
            <strong>Mobile:</strong>
            <span data-theme-responsive="_mobile_768_miniature-actions"></span>
        </div>
    

Применение к id элементам, применяется без обновления страницы

        <div>
            <strong>Desktop:</strong>
            <span id="_desktop_768_miniature-actions"><span>value desktop ID</span></span>
        </div>
        <div>
            <strong>Mobile:</strong>
            <span id="_mobile_768_miniature-actions"></span>
        </div>
    

        <div class="scroll-list js-scroll-list"
             data-display-nav-btn="true"
             data-active-drag-drop="true"
             data-duration-easing="250"
             data-name-btn-left="Left"
             data-name-btn-right="Right"
             data-content-btn-left="Left"
             data-content-btn-right="Right"
             data-items-move="3"
             data-items-move-btn-left="1"
             data-items-move-btn-right="1"
             data-attr-btn-prev='{ "class": "btn btn-primary"}'
             data-attr-btn-next='{ "class": "btn btn-primary"}'
             data-tablet-display-nav-btn="true"
             data-tablet-items-move="1"
             data-tablet-prev-items-move="1"
             data-tablet-next-items-move="1"
             data-mobile-display-nav-btn="true"
             data-mobile-items-move="1"
             data-mobile-prev-items-move="1"
             data-mobile-next-items-move="">
            <div><button class="btn btn-primary">Test list 456 Test list 456</button></div>
            <div><button class="btn btn-secondary">Test list 456 Test list 456</button></div>
            <div><button class="btn btn-success">Test list 456 Test list 456</button></div>
            <div><button class="btn btn-danger">Test list 456 Test list 456</button></div>
            <div><button class="btn btn-warning">Test list 456 Test list 456</button></div>
            <div><button class="btn btn-dark">Test list 456 Test list 456</button></div>
            <div><button class="btn btn-light">Test list 456 Test list 456</button></div>
            <div><button class="btn btn-link">Test list 456 Test list 456</button></div>
            <div><button class="btn btn-link">Test list 456 Test list 456</button></div>
            <div><button class="btn btn-link">Test list 456 Test list 456</button></div>
            <div><button class="btn btn-link">Test list 456 Test list 456</button></div>
        </div>