Bootstrap Wrapper Examples [miguel angel torres egea]

Aquesta pàgina és només de lectura. Podeu veure'n el codi font, però no podeu canviar-la. Consulteu el vostre administrador si penseu que això és degut a algun error.
= Bootstrap Wrapper Examples
== alert
[[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/alert]]
<alert type="success">%%<alert type="success">...</alert>%%</alert>
<alert type="info">%%<alert type="info">...</alert>%%</alert>
<alert type="warning">%%<alert type="warning">...</alert>%%</alert>
<alert type="danger">%%<alert type="danger">...</alert>%%</alert>
<alert type="warning" dismiss="true">%%<alert type="warning" dismiss="true">**Warning!** Better check yourself, you're not looking too good.</alert>%%</alert>
<alert type="warning" dismiss="true" icon="fa fa-warning">%%<alert type="warning" dismiss="true" icon="fa fa-warning">**Warning!** Better check yourself, you're not looking too good.</alert>%%</alert>

== badges
[[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/badge]]
Inbox <badge>42</badge>
<btn type="primary">Messages <badge>4</badge></btn>

== Buttons
[[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/button]]
<btn type="default">Default</btn>
<btn type="primary">Primary</btn>
<btn type="success">Success</btn>
<btn type="info">Info</btn>
<btn type="warning">Warning</btn>
<btn type="danger">Danger</btn>
<btn type="link">Link</btn>
<btn type="success" size="lg" icon="glyphicon glyphicon-edit">[[:wiki:welcome]]</btn>
<btn type="primary" size="lg">Large button</btn>
<btn type="default" size="lg">Large button</btn>
 
<btn type="primary">Default button</btn>
<btn type="default">Default button</btn>
 
<btn type="primary" size="sm">Small button</btn>
<btn type="default" size="sm">Small button</btn>
 
<btn type="primary" size="xs">Extra small button</btn>
<btn type="default" size="xs">Extra small button</btn>
<btn type="primary" size="lg" block="true">Block level button</btn>
<btn type="default" size="lg" block="true">Block level button</btn>
<btn type="primary">[[button]]</btn> <btn type="default">[[panel]]</btn>
<btn type="primary" disabled="true">[[button]]</btn> <btn type="default" disabled="true">[[panel]]</btn>

== Callout
[[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/callout]]
<callout>
=== Default Callout ===
This is a default callout.
</callout>
<callout title="Default Callout">
This is a default callout.
</callout>
<callout type="primary" icon="true"> %%<callout type="primary" icon="true"> [...] </callout>%% </callout>
<callout type="success" icon="true"> %%<callout type="success" icon="true"> [...] </callout>%% </callout>
<callout type="info" icon="true"> %%<callout type="info" icon="true"> [...] </callout>%% </callout>
<callout type="warning" icon="true"> %%<callout type="warning" icon="true"> [...] </callout>%% </callout>
<callout type="danger" icon="true"> %%<callout type="danger" icon="true"> [...] </callout>%% </callout>
<callout type="question" icon="true"> %%<callout type="question" icon="true"> [...] </callout>%% </callout>
<callout type="tip" icon="true"> %%<callout type="tip" icon="true"> [...] </callout>%% </callout>
<callout type="success" icon="fa fa-plus"> %%<callout type="success" icon="fa fa-plus"> [...] </callout>%% </callout>
<callout icon="fa fa-user"> %%<callout icon="fa fa-user"> [...] </callout>%% </callout>
<callout icon="fa fa-user" color="blue" title="Custom color + icon"> %%<callout icon="fa fa-user" color="blue" title="Custom color + icon"> [...] </callout>%%</callout>

== Collapse
[[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/collapse]]

<button collapse="foo">Click Me</button>
 
<collapse id="foo" collapsed="true"><well>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</well></collapse>

== Image
[[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/image]]

%%<image shape="rounded">{{:wiki:plugins:pasted:20180608-092540.png?nolink&100|}}</image>%%
<image shape="rounded">
{{:wiki:plugins:pasted:20180608-092540.png?nolink&100|}}
</image>

%%<image shape="circle">{{:wiki:plugins:pasted:20180608-092540.png?nolink&100|}}</image>%%
<image shape="circle">
{{:wiki:plugins:pasted:20180608-092540.png?nolink&100|}}
</image>

%%<image shape="thumbnail">{{:wiki:plugins:pasted:20180608-092540.png?nolink&100|}}</image>%%
<image shape="thumbnail">
{{:wiki:plugins:pasted:20180608-092540.png?nolink&100|}}
</image>

=== leyenda/caption en imágenes
este plugin no es propio de Boostrap Wrapper (si no de imagebox)
%%[{{:wiki:plugins:pasted:20180608-092540.png?nolink&100|}}]%%:
[{{:wiki:plugins:pasted:20180608-092540.png?nolink&100|Leyenda}}]

== Lables
[[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/label]]

<label type="default">%%<label type="default">...</label>%%</label>
<label type="primary">%%<label type="primary">...</label>%%</label>
<label type="success">%%<label type="success">...</label>%%</label>
<label type="info">%%<label type="info">...</label>%%</label>
<label type="warning">%%<label type="warning">...</label>%%</label>
<label type="danger">%%<label type="danger">...</label>%%</label>

== Modal
[[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/modal]]

<btn type="primary" size="lg" modal="modal-demo">Launch demo modal</btn>
 
<modal id="modal-demo" title="Modal title">
=== Text in a modal ===
 
Duis mollis, est non commodo luctus, nisi erat porttitor ligula. [...]
</modal>
<btn type="primary" modal="modal-large">Large modal</btn> <btn type="primary" modal="modal-small">Small modal</btn>

<btn type="primary" modal="modal-remote">GIT</btn>

<modal id="modal-remote" remote=":development:git:start"></modal>
<modal id="modal-large" size="lg" title="Large modal">...</modal>
<modal id="modal-small" size="sm" title="Small modal">...</modal>

== Panel
[[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/panel]]

<panel type="default">Basic panel example</panel>
<panel type="default" title="Panel title">
Panel content
</panel>
<panel type="default" title="Panel title" subtitle="Panel subtitle">
Panel content
</panel>
<panel type="primary" title="Panel title">Panel content</panel>
<panel type="success" title="Panel title">Panel content</panel>
<panel type="info" title="Panel title">Panel content</panel>
<panel type="warning" title="Panel title">Panel content</panel>
<panel type="danger" title="Panel title">Panel content</panel>
<panel type="default" title="Panel title" no-body="true">
<panel-body>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</panel-body>
^ # ^ First Name ^ Last Name ^ Username ^
^ 1 | Mark       | Otto	     | @mdo     |
^ 2 | Jacob      | Thornton  | @fat     |
^ 3 | Larry      | the Bird  | @twitter |
</panel>
<panel type="default" title="Panel title" no-body="true">
^ # ^ First Name ^ Last Name ^ Username ^
^ 1 | Mark       | Otto	     | @mdo     |
^ 2 | Jacob      | Thornton  | @fat     |
^ 3 | Larry      | the Bird  | @twitter |
</panel>
<panel type="default" title="Panel title" subtitle="Panel subtitle" icon="glyphicon glyphicon-home">
Panel content
</panel>

== Popovers
[[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/popover]]

<popover title="Popover title" content="And here's some amazing content. It's very engaging. Right?"><btn type="danger" size="lg">Click to toggle popover</btn></popover>

<popover placement="right" content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
<btn>Popover on right</btn>
</popover>
 
<popover placement="top" content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
<btn>Popover on top</btn>
</popover>
 
<popover placement="bottom" content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
<btn>Popover on bottom</btn>
</popover>
 
<popover placement="left" content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
<btn>Popover on left</btn>
</popover>
<popover trigger="focus" title="Dismissible popover" content="And here's some amazing content. It's very engaging. Right?"><btn type="danger" size="lg">Dismissible popover</btn></popover>
<popover html="true" title="**Dismissible** popover" content="And here's some amazing content. \\ **It's very engaging**. \\ Right?">Dismissible Popover</popover>

== ProgressBar
[[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/progress-bar]]

<progress>
<bar value="60"></bar>
</progress>
<progress>
<bar value="60" showvalue="true"></bar>
</progress>
<progress>
<bar value="40" type="success"></bar>
</progress>
 
<progress>
<bar value="20" type="info"></bar>
</progress>
 
<progress>
<bar value="60" type="warning"></bar>
</progress>
 
<progress>
<bar value="80" type="danger"></bar>
</progress>

<progress>
<bar value="40" type="success" striped="true"></bar>
</progress>
 
<progress>
<bar value="20" type="info" striped="true"></bar>
</progress>
 
<progress>
<bar value="60" type="warning" striped="true"></bar>
</progress>
 
<progress>
<bar value="80" type="danger" striped="true"></bar>
</progress>

<progress>
<bar value="45" type="info" striped="true" animate="true"></bar>
</progress>

<progress>
<bar value="35" type="success" striped="true"></bar>
<bar value="20" type="warning" striped="true"></bar>
<bar value="10" type="danger" striped="true"></bar>
</progress>

== Text
[[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/text]]

<TEXT align="left">Left aligned text.</TEXT>
<TEXT align="center">Center aligned text.</TEXT>
<TEXT align="right">Right aligned text.</TEXT>
<TEXT align="justify">Justified text.</TEXT>
<TEXT align="nowrap">No wrap text.</TEXT>

<text transform="lowercase">Lowercased text.</text>

<text transform="uppercase">Uppercased text.</text>

<text transform="capitalize">Capitalized text.</text>

<text type="muted"> Texto de ejemplo para ver efecto </text>

<text type="primary"> Texto de ejemplo para ver efecto </text>

<text type="success"> Texto de ejemplo para ver efecto </text>

<text type="info"> Texto de ejemplo para ver efecto </text>

<text type="warning"> Texto de ejemplo para ver efecto </text>

<text type="danger"> Texto de ejemplo para ver efecto </text>

<text background="primary"> Texto de ejemplo para ver efecto </text>

<text background="success"> Texto de ejemplo para ver efecto </text>

<text background="info"> Texto de ejemplo para ver efecto </text>

<text background="warning"> Texto de ejemplo para ver efecto </text>

<text background="danger"> Texto de ejemplo para ver efecto </text>

== Tooltips
[[http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper/tooltip]]

<tooltip title="Sample Text" location="bottom">Lorem ipsum</tooltip> dolor sit amet...