Composants Bootstrap (version 3.3)

Il est possible d’utiliser directement le code html de tous les composants Bootstrap ainsi que les classes CSS.

Mais pour « simplifier » la syntaxe, le thème prévoit certains raccourcis (shortcodes) qui permettent de garder la syntaxe markdown entre les balises (ce que ne permet pas le html seul).

Accordion

[g-accordion id=accordion1 name=accordion1]
[g-accordion-item id=accordion_item1 header_id=accordion_header1 title="Open me"]

Anim pariatur cliche **reprehenderit**, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

[/g-accordion-item]
[g-accordion-item id=accordion_item2 header_id=accordion_header2 title="Open me too"]

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

[/g-accordion-item]
[/g-accordion]

Alertes

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

[g-alert name=alert1 type=warning]
# Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

[Take this action](#) {.btn .btn-danger}
[Or do this](#) {.btn .btn-default}
[/g-alert]

Carousel

Les images doivent être envoyées dans votre dossier Images. Ensuite, vous devez ajouter un bloc [g-carousel id="carousel1" name="carousel1"] > [/g-carousel] pour votre carrousel, puis un bloc [g-carousel-item image="image1.jpg"] > [/g-carousel-item] par image.

Dans cet exemple, nos images se nomment image1.jpg, image1.jpg et image1.jpg. Le texte est facultatif.

[g-carousel id="carousel1" name="carousel1"]

[g-carousel-item image="image1.jpg"]
**Duis mollis**, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
[/g-carousel-item]

[g-carousel-item image="image2.jpg"]
Cras mattis consectetur purus sit amet fermentum.
[/g-carousel-item]

[g-carousel-item image="image3.jpg"]
Cras mattis consectetur purus sit amet fermentum.
[/g-carousel-item]
[/g-carousel]

Collapse

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

[g-collapse id="collapse1" name=collapse1 button_label="Collapse" attributes="aria-expanded:false,aria-controls:collapse"]
[g-well name=well2]
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
[/g-well]
[/g-collapse]

[g-dropdown name=dropdown1 label="Dropdown"]
    [g-dropdown-item icon_type="fontawesome" ]
        [g-link url="http://example.com" menu="Products" icon="cog"][/g-link]
        [g-link url="http://example.com" menu="Contacts" icon="gavel"][/g-link]
    [/g-dropdown-item]
[/g-dropdown]

Jumbotron

[g-jumbotron name="jumbotron1" image="image1.jpg"]
# Gravstrap theme

Gravstrap Theme helps you to start a new Grav CMS site with Bootstrap support and several ready to use modules. It is also perfect to start a new Bootstrap custom theme, to create your unique design.

[/g-jumbotron]

List group

Cras mattis consectetur purus sit amet fermentum.

[g-listgroup name=listgroup1]

[g-listgroup-item badge=12 active=true]
Cras mattis consectetur purus sit amet fermentum.
[/g-listgroup-item]

[g-listgroup-item badge=15]
Cras mattis consectetur purus sit amet fermentum.
[/g-listgroup-item]

[g-listgroup-item disabled=true]
Cras mattis consectetur purus sit amet fermentum.
[/g-listgroup-item]

[g-listgroup-item badge=2]
Cras mattis consectetur purus sit amet fermentum.
[/g-listgroup-item]
[/g-listgroup]

[g-button button_label="Launch demo modal" button_type="primary" button_attributes="data-toggle:modal,data-target:#myModal"][/g-button]

[g-modal id="myModal" name="modal" title="Awesome"]
Cras **mattis** consectetur purus sit amet fermentum.

[g-modal-buttons]
[g-button button_type="primary" button_label="Click Me" remove=true][/g-button]
[g-button button_label="Close Me" button_attributes="data-dismiss:modal"][/g-button]
[/g-modal-buttons]

[/g-modal]

[g-navbar id="navbar3" name="navbar3" centering=none brand_text="Brand"]
    [g-navbar-menu name=menu00 alignment="center" submenu="internal,components"][/g-navbar-menu]
    [g-navbar-menu name=menu01 icon_type="fontawesome" alignment="right" attributes="class: my-class,rel:my-rel"]
        [g-link url="https://framasphere.org" icon_type="fontawesome" icon="asterisk"][/g-link]
        [g-link url="https://framapiaf.org" icon="retweet"][/g-link]
        [g-link url="https://framagit.org" icon="git"][/g-link]
    [/g-navbar-menu]
[/g-navbar]

Titre Sous-titre

[g-pageheader title="Titre" subtitle="Sous-titre"][/g-pageheader]

Panel

Title

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

[g-panel heading_title="Title"]
Anim pariatur cliche **reprehenderit**, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
[/g-panel]

Progressbar

Php

[g-progressbar label="Php" type="success" value="80" min="0" max="100"][/g-progressbar]

Splitbutton

[g-splitbutton name=splitbutton1 label="Splitbutton" type=default]
    [g-splitbutton-item icon_type="fontawesome" ]
        [g-link url="https://framasphere.org" menu="Diaspora" icon="asterisk"][/g-link]
        [g-link url="https://framapiaf.org" menu="Mastodon" icon="retweet"][/g-link]
    [/g-splitbutton-item]
[/g-splitbutton]

Tab

[g-tab name=tab1 attributes="class:myclass,rel:myrel"]

[g-tab-item name="tab_item1" attributes="class:myclass,rel:myrel"]
**Cras mattis** consectetur purus sit amet fermentum.
[/g-tab-item]

[g-tab-item name="tab_item2"]
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
[/g-tab-item]
[/g-tab]

Thumbnail

Avec des liens :

[g-thumbnail name=thumbnail1]
[g-thumbnail-item image="image1.jpg" url="https://frama.site"][/g-thumbnail-item]
[g-thumbnail-item image="image2.jpg" url="https://frama.site"][/g-thumbnail-item]
[g-thumbnail-item image="image3.jpg" url="https://frama.site"][/g-thumbnail-item]
[/g-thumbnail]

Avec du contenu :

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Take this action

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Take this action

[g-thumbnail name=thumbnail2]
[g-thumbnail-item image="image1.jpg" class="col-md-6"]
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

[Take this action](#) {.btn .btn-default}
[/g-thumbnail-item]

[g-thumbnail-item image="image2.jpg" class="col-md-6"]
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

[Take this action](#) {.btn .btn-default}
[/g-thumbnail-item]

[/g-thumbnail]

Well

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

[g-well name=well1]
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
[/g-well]

Composants Bootstrap

Composants Bootstrap (version 3.3)

Accordion

Alertes

Carousel

Collapse

Jumbotron

List group

Navbar

Page header

Panel

Progressbar

Splitbutton

Tab

Thumbnail

Well

results matching ""

No results matching ""