Difference between revisions of "Guides"

From Supercomputación y Cálculo Científico UIS
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
__NOTOC__
 
__NOTOC__
 
<div class="thumbnail img-thumbnail">http://wiki.sc3.uis.edu.co/images/a/a8/Logo_sc33.png</div>  
 
<div class="thumbnail img-thumbnail">http://wiki.sc3.uis.edu.co/images/a/a8/Logo_sc33.png</div>  
−
 
+
<p><div class="btn btn-primary"><i class="fa  fa-long-arrow-left"></i> [[Wiki SC3]]</div></p>
 
  <div class="column clearfix">
 
  <div class="column clearfix">
 
       <div class="col-md-14">
 
       <div class="col-md-14">
Line 15: Line 15:
 
         <div class="panel-body">
 
         <div class="panel-body">
 
             <div class="panel-heading">
 
             <div class="panel-heading">
−
                 <h3 class="panel-title">Alertas</h3>
+
                 <h3 class="panel-title">Cabecera SC3</h3>
 
           </div>
 
           </div>
−
 
+
          <p>&nbsp;</p>
−
 
+
        <pre><div class="thumbnail img-thumbnail">http://wiki.sc3.uis.edu.co/images/a/a8/Logo_sc33.png</div></pre>
−
 
 
 
         </div>
 
         </div>
 
     </div>           
 
     </div>           
 
</div>
 
</div>
−
 
−
 
−
 
  
 
<div class="col-md-14">
 
<div class="col-md-14">
Line 31: Line 27:
 
         <div class="panel-body">
 
         <div class="panel-body">
 
             <div class="panel-heading">
 
             <div class="panel-heading">
−
                 <h3 class="panel-title">Barras de Navegación - Alfabéticas</h3>
+
                 <h3 class="panel-title">Cuadros de Información</h3>
 
           </div>
 
           </div>
  
 +
<p>&nbsp;</p>
 +
<pre>
 +
<div class="col-md-4">
 +
<div class="panel panel-info-white-border">
 +
<div class="panel-heading">
 +
<h3 class="panel-title">info Box</h3>
 +
</div>
 +
<div class="panel-body">
 +
<p>Test</p>
 +
<div class="btn btn-default">Read More</div>
 +
</div>
 +
</div>
 +
</div>
 +
</pre>
 +
<p>&nbsp;</p>
  
 +
<div class="col-md-4">
 +
<div class="panel panel-info-white-border">
 +
<div class="panel-heading">
 +
<h3 class="panel-title">info Box</h3>
 +
</div>
 +
<div class="panel-body">
 +
<p>Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.</p>
 +
<div class="btn btn-default">Read More</div>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="col-md-4">
 +
<div class="panel panel-success-white-border">
 +
<div class="panel-heading">
 +
<h3 class="panel-title">success Box</h3>
 +
</div>
 +
<div class="panel-body">
 +
<p>Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.</p>
 +
<div class="btn btn-default">Read More</div>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="col-md-4">
 +
<div class="panel panel-neutral-white-border">
 +
<div class="panel-heading">
 +
<h3 class="panel-title">neutral Box</h3>
 +
</div>
 +
<div class="panel-body">
 +
<p>Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.</p>
 +
<div class="btn btn-default">Read More</div>
 +
</div>
 +
</div>
 +
</div>
  
 
         </div>
 
         </div>
 
     </div>           
 
     </div>           
 
</div>
 
</div>
−
 
  
  
Line 46: Line 91:
 
         <div class="panel-body">
 
         <div class="panel-body">
 
             <div class="panel-heading">
 
             <div class="panel-heading">
−
                 <h3 class="panel-title">Botones</h3>
+
                 <h3 class="panel-title">Alertas</h3>
 
           </div>
 
           </div>
 +
<p>&nbsp;</p>
 +
<pre>
 +
<div class="col-md-4">
 +
<div class="alert alert-XXXXXX fade in">
 +
<p>
 +
<strong>Algún texto</strong>
 +
</p>
 +
<div class="btn btn-neutral-light">Take this action</div>
 +
<div class="btn btn-meadow">Or do this</div>
 +
</div>
 +
</div>
 +
</pre>
 +
 +
<p>Para los diferentes tipo de cajas de alerta se debe cambiar '''XXXXXX''' por las siguientes alternativas:
 +
<ul>
 +
<li>success</li>
 +
<li>info</li>
 +
<li>danger</li>
 +
<li>default</li>
 +
<li>light</li>
 +
<li>lighter</li>
 +
<li>dark</li>
 +
<li>darker</li>
 +
<li>warning</li>
 +
</ul>   
 +
</p>
 +
<p>&nbsp;</p>
 +
 +
<div class="col-md-4">
 +
<div class="alert alert-success fade in">
 +
<p>
 +
<strong>Success</strong>
 +
</p>
 +
<p>&nbsp;</p>
 +
<div class="btn btn-neutral-light">Take this action</div>
 +
<div class="btn btn-neutral">Or do this</div>
 +
</div>
 +
</div>
 +
 +
<div class="col-md-4">
 +
<div class="alert alert-info fade in">
 +
<p>
 +
<strong>Info</strong>
 +
</p>
 +
<p>&nbsp;</p>
 +
<div class="btn btn-neutral-light">Take this action</div>
 +
<div class="btn btn-neutral">Or do this</div>
 +
</div>
 +
</div>
 +
 +
<div class="col-md-4">
 +
<div class="alert alert-danger fade in">
 +
<p>
 +
<strong>Danger</strong>
 +
</p>
 +
<p>&nbsp;</p>
 +
<div class="btn btn-neutral-light">Take this action</div>
 +
<div class="btn btn-neutral">Or do this</div>
 +
</div>
 +
</div>
  
 +
<div class="col-md-4">
 +
<div class="alert alert-default fade in">
 +
<p>
 +
<strong>Default</strong>
 +
</p>
 +
<p>&nbsp;</p>
 +
<div class="btn btn-neutral-light">Take this action</div>
 +
<div class="btn btn-neutral">Or do this</div>
 +
</div>
 +
</div>
  
 +
<div class="col-md-4">
 +
<div class="alert alert-light fade in">
 +
<p>
 +
<strong>Light</strong>
 +
</p>
 +
<p>&nbsp;</p>
 +
<div class="btn btn-neutral-light">Take this action</div>
 +
<div class="btn btn-neutral">Or do this</div>
 +
</div>
 +
</div>
 +
 +
<div class="col-md-4">
 +
<div class="alert alert-lighter fade in">
 +
<p>
 +
<strong>Lighter</strong>
 +
</p>
 +
<p>&nbsp;</p>
 +
<div class="btn btn-neutral-light">Take this action</div>
 +
<div class="btn btn-neutral">Or do this</div>
 +
</div>
 +
</div>
 +
 +
<div class="col-md-4">
 +
<div class="alert alert-dark fade in">
 +
<p>
 +
<strong>Dark</strong>
 +
</p>
 +
<p>&nbsp;</p>
 +
<div class="btn btn-neutral-light">Take this action</div>
 +
<div class="btn btn-neutral">Or do this</div>
 +
</div>
 +
</div>
 +
 +
<div class="col-md-4">
 +
<div class="alert alert-darker fade in">
 +
<p>
 +
<strong>Darker</strong>
 +
</p>
 +
<p>&nbsp;</p>
 +
<div class="btn btn-neutral-light">Take this action</div>
 +
<div class="btn btn-neutral">Or do this</div>
 +
</div>
 +
</div>
 +
 +
<div class="col-md-4">
 +
<div class="alert alert-warning fade in">
 +
<p>
 +
<strong>Warning</strong>
 +
</p>
 +
<p>&nbsp;</p>
 +
<div class="btn btn-neutral-light">Take this action</div>
 +
<div class="btn btn-neutral">Or do this</div>
 +
</div>
 +
</div>
  
 
         </div>
 
         </div>
 
     </div>           
 
     </div>           
 
</div>
 
</div>
−
 
−
 
  
 
<div class="col-md-14">
 
<div class="col-md-14">
Line 61: Line 228:
 
         <div class="panel-body">
 
         <div class="panel-body">
 
             <div class="panel-heading">
 
             <div class="panel-heading">
−
                 <h3 class="panel-title">Galeria de Imagenes en Carousel</h3>
+
                 <h3 class="panel-title">Botones</h3>
 
           </div>
 
           </div>
 +
<p>&nbsp;</p>
 +
<p>Para los diferentes tipo de cajas de alerta se debe cambiar '''default''' por las siguientes alternativas:
 +
<ul>
 +
<li>success</li>
 +
<li>info</li>
 +
<li>danger</li>
 +
<li>default</li>
 +
<li>light</li>
 +
<li>lighter</li>
 +
<li>dark</li>
 +
<li>darker</li>
 +
<li>warning</li>
 +
<li>neutral</li>
 +
<li>neutral-light</li>
 +
<li>primary</li>
 +
<li>cyanide</li>
 +
<li>meadow</li>
 +
<li>cocktail</li>
 +
<li>mango</li>
 +
<li>berry</li>
 +
<li>hearts</li>
 +
<li>party</li>
 +
<li>midnight</li>
 +
<li>cello</li>
 +
<li>hollow</li>
 +
<li>concrete</li>
 +
</ul>   
 +
</p>
  
−
 
+
<p>&nbsp;</p>
 +
<pre><div class="btn btn-default"><i class="fa fa-exclamation-triangle"></i> [[Your Text]]</div> </pre>
 +
<div class="btn btn-default"><i class="fa fa-exclamation-triangle"></i> [[Your Text]]</div>
 +
<p>&nbsp;</p>
 +
<pre><div class="btn btn-default btn-sm"><i class="fa fa-exclamation-triangle"></i> [[Your Text]]</div></pre>
 +
<div class="btn btn-default btn-sm"><i class="fa fa-exclamation-triangle"></i> [[Your Text]]</div>
 +
<p>&nbsp;</p>
 +
<pre><div class="btn btn-default btn-xs"><i class="fa fa-exclamation-triangle"></i> [[Your Text]]</div></pre>
 +
<div class="btn btn-default btn-xs"><i class="fa fa-exclamation-triangle"></i> [[Your Text]]</div>
 +
<p>&nbsp;</p>
 +
<pre><div class="btn btn-default btn-lg"><i class="fa fa-exclamation-triangle"></i> [[Your Text]]</div></pre>
 +
<div class="btn btn-default btn-lg"><i class="fa fa-exclamation-triangle"></i> [[Your Text]]</div>
 +
<p>&nbsp;</p>
 +
<pre><div class="btn btn-default disabled"><i class="fa fa-exclamation-triangle"></i> [[Your Text]]</div></pre>
 +
<div class="btn btn-default disabled"><i class="fa fa-exclamation-triangle"></i> [[Your Text]]</div>
 +
<p>&nbsp;</p>
 +
<p>Dentro de los bototnes es posible colocar diferentes tipos de iconos. Para una lista detallada puede dirigirse a: http://www.mediawikibootstrapskin.co.uk/index.php?title=Icons_Sets</p>
  
 
         </div>
 
         </div>
 
     </div>           
 
     </div>           
 
</div>
 
</div>

Latest revision as of 16:42, 20 March 2015

Logo_sc33.png

Wiki SC3

Bootstrapskin

Guías para edición de artículos de mediawiki con bootstrapskin

Cabecera SC3

 

<div class="thumbnail img-thumbnail">http://wiki.sc3.uis.edu.co/images/a/a8/Logo_sc33.png</div>

Cuadros de Información

 

<div class="col-md-4">
	<div class="panel panel-info-white-border">
		<div class="panel-heading">
			<h3 class="panel-title">info Box</h3>
		</div>
		<div class="panel-body">
			<p>Test</p>
			<div class="btn btn-default">Read More</div>
		</div>
	</div>
</div>

 

info Box

Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.

Read More

success Box

Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.

Read More

neutral Box

Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.

Read More


Alertas

 

	<div class="col-md-4">
		<div class="alert alert-XXXXXX fade in">
			<p>
				<strong>Algún texto</strong>
			</p>
			<div class="btn btn-neutral-light">Take this action</div>
			<div class="btn btn-meadow">Or do this</div>
		</div>
	</div>

Para los diferentes tipo de cajas de alerta se debe cambiar XXXXXX por las siguientes alternativas:

  • success
  • info
  • danger
  • default
  • light
  • lighter
  • dark
  • darker
  • warning

 

Success

 

Take this action
Or do this

Info

 

Take this action
Or do this

Danger

 

Take this action
Or do this

Default

 

Take this action
Or do this

Light

 

Take this action
Or do this

Lighter

 

Take this action
Or do this

Dark

 

Take this action
Or do this

Darker

 

Take this action
Or do this

Warning

 

Take this action
Or do this

Botones

 

Para los diferentes tipo de cajas de alerta se debe cambiar default por las siguientes alternativas:

  • success
  • info
  • danger
  • default
  • light
  • lighter
  • dark
  • darker
  • warning
  • neutral
  • neutral-light
  • primary
  • cyanide
  • meadow
  • cocktail
  • mango
  • berry
  • hearts
  • party
  • midnight
  • cello
  • hollow
  • concrete

 

<div class="btn btn-default"><i class="fa fa-exclamation-triangle"></i> [[Your Text]]</div>
Your Text

 

<div class="btn btn-default btn-sm"><i class="fa fa-exclamation-triangle"></i> [[Your Text]]</div>
Your Text

 

<div class="btn btn-default btn-xs"><i class="fa fa-exclamation-triangle"></i> [[Your Text]]</div>
Your Text

 

<div class="btn btn-default btn-lg"><i class="fa fa-exclamation-triangle"></i> [[Your Text]]</div>
Your Text

 

<div class="btn btn-default disabled"><i class="fa fa-exclamation-triangle"></i> [[Your Text]]</div>
Your Text

 

Dentro de los bototnes es posible colocar diferentes tipos de iconos. Para una lista detallada puede dirigirse a: http://www.mediawikibootstrapskin.co.uk/index.php?title=Icons_Sets

Retrieved from "http://wiki.sc3.uis.edu.co/index.php?title=Guides&oldid=464"
Creative Commons Attribution
Powered by MediaWiki