Document

Shortcodes

– icon:

Use Font Awesome, the iconic font designed for Bootstrap. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Cú pháp:

[icon name="icon-glass" type="icon-4x" tag="i" color="red" ]

– name: là tên icon của font

– type: hiển thị kích thước của icon (icon-4x/icon-3x/icon-2x)

– tag: là tên thẻ html để hiển thị icon

– color: nhập tên màu hiển thị

Ví dụ:

 

 -Button:

Cú pháp:

[button id="" class="btn" type="primary" target="" href="#" tag="span"]link[/button]

– type: Được dùng để thể hiện kích cỡ và màu button,

– tag: là tên thẻ html để hiển thị button

– target và href: được sử dụng khi tag=”a”

Ví dụ:
Primary Danger Warning Success Info Inverse

Size
Utilize the extra button types type=”large”, type=”small”, or type=”mini ” for sizing.
Ví dụ:

[button id="" class="btn-primary" type="large" target="" href="#" tag="span"]Large[/button]
Large Small Mini

– Alert:

Alerts Styles for success, warning, and error messages

Cú pháp:

[alert class="alert" type="success" dismiss="true" tag="div"][/alert]

– type: kiểu hiển thị

– dismiss: “true” hiển thị nút (“false” ko hiển thị)

Ví dụ:
Default alert

[alert class="alert" type="block" dismiss="true" tag="div"]Wrap any text and an optional dismiss button in .alert for a basic warning alert message.[/alert]
Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

Dismiss buttons

[alert class="alert" type="block" dismiss="false" tag="div"]Wrap any text and an optional dismiss button in .alert for a basic warning alert message.[/alert]
Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

Success

[alert class="alert" type="success" dismiss="true" tag="div"]Add optional classes to change an alert's connotation.[/alert]
Add optional classes to change an alert’s connotation.

Error or danger

[alert class="alert" type="error" dismiss="true" tag="div"]Add optional classes to change an alert's connotation.[/alert]
Add optional classes to change an alert’s connotation.

Information

[alert class="alert" type="info" dismiss="true" tag="div"]Add optional classes to change an alert's connotation.[/alert]
Add optional classes to change an alert’s connotation.
– Google maps

[googlemaps title="Envato Office" location="Hoan Kiem District, Hanoi, Vietnam" zoom="10" Width="100%" height=350]

 

Slideshow:

Là 1 shortcode hiển thị các attachment với xử lý hiệu ứng là carousel của bootstrap

Cú pháp:

[slideshow ids="" caption="" size="" interval="" event="" class=""]

– ids: là các id của attachment,

– caption: ẩn/hiện chú thích (true/false)

– size: kích thước hiển thị ảnh (thumbnail/medium/large)

– interval: The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.

– evenl: là sự kiên chuyển đổi ảnh (slide/slid)

– class:

Ví dụ:

 

– Collapse:

Get base styles and flexible support for collapsible components like accordions and navigation.

Cú pháp:

[collapses class="collapses" tag="div"]
[collapse title="Section 1"]Accordion Content 1[/collapse]
[collapse title="Section 2"]Accordion Content 2[/collapse]
[collapse title="Section 3"]Accordion Content 3[/collapse]
[/collapses]

– class: as “name” above function.
– tag: html tag name to render icon.

– title: là tiêu đề của từng phần với nội dung là nội dung của [collapse]

Ví dụ:

Accordion Content 1
Accordion Content 2
Accordion Content 3

 

– Tabs

Cú pháp:

[tabs possition="top" class="tabs" tag="div"]
[tab title="Section 1"]Tab Content 1[/tab]
[tab title="Section 2"]Tab Content 2[/tab]
[tab title="Section 3"]Tab Content 3[/tab]
[/tabs]

– position: Hiển thị vị trí của tiêu đề so với lội dung (top/right/bottom/left)

– class: as “name” above function.
– tag: html tag name to render icon.

– title: là tiêu đề của từng phần với nội dung là nội dung của [tab]

Ví dụ

Tab Content 1
Tab Content 2
Tab Content 3

Leave a Reply

Your email address will not be published. Required fields are marked *