Ajuda:Editar

De Wiki Locaweb
Ir para: navegação, pesquisa

Geral

Como criar/editar um artigo?

Criar

Para criar um artigo, digite na busca o nome do artigo que quer criar e pesquise. Em seguida basta clicar no link que vai aparecer falando: Criar a página "NOME QUE VOCÊ COLCOU" nesta wiki!

Será aberta uma página de wikitexto, que é o código-fonte editável do artigo, nesta área você fará a criação do conteúdo, podendo utilizar os códigos do próprio wiki ou HTML.

Veja dicas de como personalizar o artigo, nas seções abaixo.


Editar

Para editar uma página MediaWiki, clique no botão Editar n.

Você acessará a página com uma caixa de texto contendo o wikitexto, que é o código-fonte editável do artigo, nesta área você fará a criação do conteúdo, podendo utilizar os códigos do próprio wiki ou HTML.

Visualizar antes de salvar

Depois de criar ou alterar o wikitexto é aconselhável clicar no botão "Mostrar previsão", que mostrará a página com as alterações realizadas, em modo visualização, antes que o conteúdo seja salvo. Erros de formatação, em links, tabelas, etc., podem ser descobertos e reparados facilmente deste modo.

Se a pré-visualização do conteúdo não ficou como você esperava, você pode fazer tantas alterações quanto forem necessárias.

Páginas de discussão

Você pode criar seus comentários, geralmente com solicitação de atualização, na lista de discussão, clicando em "discussão" no menu superior, ou editar a informação diretamente no artigo.


Personalização de artigos

Na coluna da esquerda abaixo, veja os efeitos possíveis. Na coluna da direita veja como fazê-los, escreva o wikitexto de acordo com a coluna direita.

Você pode deixar esta página aberta em outra janela para usar como referência, na verdade você deve fazer isso, caso esteja iniciando no maravilhoso mundo da wiki :)


Padronização

Antes que você comece uma edição, vamos estabelecer algumas regrinhas?

No início de todo, eu disse, todo documento, adicione o código abaixo. Ele fará com que o fundo fique cinza e legal:

Sobre a cor de Fundo


{{Plano de Fundo Wiki}}

Categoria JÁ!

Mais importante do que ter um artigo criado, é ter o artigo vinculado à uma categoria a qual ele pertença. Veja a listagem completa de categorias, clicando aqui ou no menu ali do lado, em Categorias

Para categorizar um artigo, basta adicionar ao término dele, a seguinte sintaxe: [[Categoria:Nome da categoria]] < --- Exatamente como ela estiver escrita. Dica: Para facilitar, abra a página da categoria e copie exatamente a sintaxe que estiver lá.

Ex.: A categoria é http://wiki.locaweb.com.br/pt-br/Categoria:Email_Marketing, e você criou um artigo novo. No modo edição, no final dele, adicione [[Categoria:Email Marketing]] e pronto! O artigo será vinculado à essa categoria automaticamente.

Dá para colocar mais de uma categoria, para isso, basta colocar duas ou mais, conforme o exemplo acima de categorização.

Texto, seções, parágrafos, listas e linhas

Para ficar assim... Você deve fazer assim...

Cabeçalhos:

Nova seção

Sub-seção

Sub-sub-seção


== Nova seção ==

=== Sub-seção ===

==== Sub-sub-seção ====

Novo parágrafo:

Um final de linha apenas é usado para separar frases dentro de um parágrafo. Um novo parágrafo é criado pressionando-se duas vezes a tecla enter, no seu teclado.

Ou seja, para iniciar outro parágrafo tem de haver uma linha em branco entre as frases.

Um final de linha apenas é usado para separar 
frases dentro de um parágrafo.
Um novo parágrafo é criado pressionando-se 
duas vezes a tecla ''enter'', no seu teclado.

Ou seja, para iniciar outro parágrafo tem de haver 
uma linha em branco entre as frases.

Quebrar linhas:

Você pode quebrar linhas
sem começar um novo parágrafo.

Você pode quebrar linhas<br>
sem começar um novo parágrafo.

Lista com marcadores:

  • Listas são fáceis de fazer:
    • comece cada linha com um asterisco
    • mais asteriscos significam níveis mais profundos
* Listas são fáceis de fazer:
** comece cada linha com um asterisco
** mais asteriscos significam níveis mais profundos

Lista numerada:

  1. Listas numeradas também são boas
  2. aqui está um item
    1. aqui está um sub-item
    2. e aqui outro
  3. Mas lembre-se que o símbolo # tem de estar completamente encostado à esquerda.
# Listas numeradas também são boas
# aqui está um item
## aqui está um sub-item
## e aqui outro
#Mas lembre-se que o símbolo # tem de estar 
completamente encostado à esquerda.

Lista combinada:

  • Você pode até mesmo combinar funções
    1. para formar um lista diferente
      • como aqui
* Você pode até mesmo combinar funções
*# para formar um lista diferente
*#* como aqui

Título com texto:

Título 
com texto
Item 
a definição do item
; Título : com texto
; Item : a definição do item 

Identação:

Dois pontos servem para identar uma linha ou parágrafo.
Duas vezes dois pontos identam ainda mais.

Um caracter numa nova linha inicia um novo parágrafo. Nota: Geralmente usado em páginas de discussão para diferenciar entre os diferentes comentários com facilidade.

: Dois pontos servem para identar uma linha ou parágrafo.
::Duas vezes dois pontos identam ainda mais.
Um caracter numa nova linha inicia um novo parágrafo.

Não formatar:

Se uma linha começa com um espaço então
ela será formatada exatamente
como for digitada;
com uma fonte de tamanho fixo;
e as  linhas não serão quebradas;
isto é útil para:
* colagem de texto preformatado;
* descrição de algoritmos;
* código fonte de programas
* arte ascii;

Atenção: os browsers não quebram automaticamente linhas desse tipo,
e simplesmente aumentam indefinidamente a largura da janela, que pode ser um efeito não desejável.

 Se uma linha começa com um espaço então
ela será formatada exatamente
como for digitada;
com uma fonte de tamanho fixo;
e as linhas não serão quebradas;
isto é útil para:
* colagem de texto preformatado;
* descrição de algoritmos;
* código fonte de programas
* arte ascii;

Mostrar o código wiki:

Há algumas maneiras para exibir códigos no wiki, sem que eles sejam interpretados pela ferramentas.Vejamos algumas a seguir:

  1. você pode usar o componente <code>
  2. você pode usar o componente <pre>
  3. você pode usar o componente <nowiki>

A diferença entre o “code” e “pre” é que o componente "pre" preserva quebra de linhas, enquanto o componente "code" não. O componente "nowiki" tag funciona como o componente “code” exceto que ele não usa fonte monospace.

Há algumas maneiras para exibir códigos no wiki, sem que eles sejam interpretados pela ferramentas.Vejamos algumas a seguir:
#<code>você pode usar o componente <code></code>
#<pre>você pode usar o componente <pre>
#<nowiki>você pode usar o componente <nowiki></nowiki>

A diferença entre o “code” e “pre” é que o componente "pre" preserva quebra de linhas, enquanto o componente "code" não. O componente "nowiki" tag funciona como o componente “code” exceto que ele não usa fonte monospace.


Dá para usar também as tags

<source lang="asp"> código aqui </source>

<source lang="php"> código aqui </source>

Centrar texto:

Texto centralizado.
<center>Texto centralizado.</center>

Linha divisória:

Uma linha horizontal de divisão com texto em cima


e em baixo.

Ou ainda duas linhas



Nota: muito útil para separar conversas diferentes em páginas de discussão.

 Uma linha horizontal de divisão com texto em cima
----
e em baixo. 

Ou ainda duas linhas
----
----


Links, URLs, imagens

Resultado obtido A escrever

Ligação interna:

Ligação interna, nada mais é do que um link para um artigo dentro da wiki, mas sem necessidade de digitar um link. Vou explicar melhor, ao lado >>


Acesse o artigo Novo Webmail - Assinatura



Nota: A primeira letra do artigo-alvo é automaticamente maiúscula.
Os espaços internos em branco são automaticamente representados como caracteres "underscore" (digitar um caractere "underscore" tem o mesmo efeito que digitar um espaço, porém isto não é recomendado).

Portanto o link acima é para http://www.Wikipedia.org/wiki/Matemática_discreta, ou seja, para o artigo com o nome "Página principal".

Se quiser fazer um link para uma pessoa acessar o artigo: 
http://wiki.locaweb.com.br/pt-br/Assinatura não
precisa digitar este endereço inteiro, basta fazer assim:


Acesse o artigo [[Assinatura]]


A pessoa será direcionada ao mesmo artigo, sem necessidade de você escrever muito.

Ligação interna para seção de artigo:

Link para uma seção de uma página, exemplo Linguagens de programação#Plataforma Windows em IIS Server

Nota: links para seções inexistentes são tratados como se fossem links para o topo da página.

[[Linguagens de programação#Plataforma Windows em IIS Server]]

Escolha do nome para a ligação interna:

Mesmo alvo, nomes diferentes: Perguntas frequentes.


Esconder o termo entre parêntesis: função mail.


Esconder o namespace: FAQ.

Mesmo alvo, nomes diferentes:
[[Wikipedia:FAQ|Perguntas frequentes]].
Esconder o termo entre parêntesis: [[Função mail()| função mail]].

Nota: O servidor preenche a parte que vem depois de | após você gravar a página

Esconder o namespace: [[Wikipedia:FAQ|FAQ]]. 

Terminação da palavra na ligação interna:

Combinar as terminações das palavras com a ligação: Pagamentos

Combinar as terminações das palavras com a ligação: [[Pagamento]]s

Ligação ISBN:

Para criar links para livros, você usa os links ISBN 0123456789X.

ISBN 0123456789X

Redirecionamento:

Redirecionamento – a busca pelo título de um artigo será redirecionada para outro, se colocar um texto como este na primeira linha dele.

#REDIRECT [[MySQL]]
Ligação externa:

Link externo personalizado: wiki locaweb


Link externo: [http://wiki.locaweb.com.br wiki locaweb]

URL

Ou apenas forneça a URL: http://wiki.locaweb.com.br

Nota: Num URL todos os caracteres devem estar entre: A-Z, a-z, 0-9, ._\/~%-+&#?!=()@ \x80-\xFF. Se um URL contém um caracter diferente, ele deve ser convertido; por exemplo, ^ deve ser escrito como %5E (segundo lê-se na tabela ASCII).

Ou apenas forneça a URL: http://wiki.locaweb.com.br 

Usar imagem:

Uma figura:


Locaweb


Nota: Somente as imagens que foram previamente carregadas no Commons podem ser usadas. Para carregar imagens veja a política de imagens.

Uma figura: [[Imagem:locaweb-logo.png|Locaweb]]
ou, com a presença de texto alternativo (altamente recomendado)
[[Imagem:locaweb-logo.png|Locaweb]] 
Navegadores web mostram o texto alternativo quando eles não são capazes
de mostrar a imagem -- por exemplo, quando a imagem não foi carregada, ou quando
o navegador somente mostra texto, ou quando o navegador fala o texto em voz alta.


Para carregar uma imagem, clique no menu do lado esquerdo em "Carregar arquivo",ele vai gerar uma sintaxe que você pode dar ctrl+c e ctrl+v colocando na página entre [[ ]] e assim ela será exibida. Exemplo:

[[Imagem:lala.png]]


Ligar à página de uma imagem:

Clicar numa imagem faz com que apareça uma página de descrição, à qual também se pode ligar diretamente: Locaweb

[[Imagem:locaweb-logo.png|Locaweb]]


Formatação de caracteres

Resultado obtido A escrever

Itálico e negrito

Esta linha está em itálico. (envolta com duplo apóstrofo)

Esta também! (envolta com tags de HTML)

E ainda esta! (usando um código ainda diferente).

Esta linha está em bold/negrito (envolta com triplo apóstrofo)

Esta também! (envolta com tags de HTML)

Por exemplo, em fórmulas matemáticas:

F = ma

Nota: Todavia a diferença entre estes dois métodos não é muito importante para os navegadores gráficos, e a maioria das pessoas pode ignorá-la.

''Esta linha está em itálico.'' (envolta com duplo apóstrofo)

<i>Esta também!</i> (envolta com tags de HTML)

<em>E ainda esta!</em> (usando um código ainda diferente).

'''Esta linha está em bold/negrito''' (envolta com triplo apóstrofo)

<b>Esta também!</b> (envolta com tags de HTML)

Por exemplo, em fórmulas matemáticas:

:<b>F</b> = <i>m</i><b>a</b>

Combinação de métodos

Enfatizar, com força, com bastante força.

Nota:Estes são apóstrofos duplos e triplos, e não aspas duplas.

''Enfatizar'', '''com força''',
'''''com bastante força'''''.

Termos técnicos

Uma fonte estilo máquina de escrever para termos técnicos.

Uma fonte estilo máquina de escrever para <tt>termos
técnicos</tt>.

Reduzir fonte

Você pode usar um texto pequeno para legendas ou notas.

Você pode usar um <small>texto pequeno</small> para
legendas ou notas.

Riscar e sublinhar texto

Você pode riscar material que deva ser apagado e sublinhar novo material..

Você pode <strike>riscar material que deva ser
apagado</strike> e <u>sublinhar novo material</u>.


Sobrescrito e subscrito

Você pode fazer sobrescrito e subscrito. f(x) = a0 + a1x1 +

<nowiki> Você pode fazer <sup>sobrescrito</sup> 
e <sub>subscrito</sub>.

f(x) = a<sub>0</sub> + a<sub>1</sub>x<sub>1</sub> + 
</nowiki>

Cor e tamanho

Você pode controlar o tamanho da fonte e sua cor!

Pode também utilizar a propriedade color com uma cor RGB (Red, Green, Blue)

f(x) = a0 + a1x1...

<nowiki> Você pode controlar o 
<font size=+1>tamanho</font> da fonte e sua 
<font color=blue>cor</font>! 

Pode também utilizar a propriedade 
color com uma cor RGB (Red, Green, Blue) 

<font size=+2 color=red>f(x) = a<sub>0</sub> + 
a<sub>1</sub>x<sub>1</sub>...</font>
</nowiki

Acentos e notações lexicais

À Á Â Ã Ä Å
Æ Ç È É Ê Ë
Ì Í Î Ï Ñ Ò
Ó Ô Õ Ö Ø Ù
Ú Û Ü ß à á
â ã ä å æ ç
è é ê ë ì í
î ï ñ ò ó ô
œ õ ö ø ù ú
û ü ÿ

&Agrave; &Aacute; &Acirc; &Atilde; &Auml; &Aring;
&AElig; &Ccedil; &Egrave; &Eacute; &Ecirc; &Euml; 
&Igrave; &Iacute; &Icirc; &Iuml; &Ntilde; &Ograve;
&Oacute; &Ocirc; &Otilde; &Ouml; &Oslash; &Ugrave; 
&Uacute; &Ucirc; &Uuml; &szlig; &agrave; &aacute;
&acirc; &atilde; &auml; &aring; &aelig; &ccedil; 
&egrave; &eacute; &ecirc; &euml; &igrave; &iacute;
&icirc; &iuml; &ntilde; &ograve; &oacute; &ocirc; 
&oelig; &otilde; &ouml; &oslash; &ugrave; &uacute;
&ucirc; &uuml; &yuml;

Pontuação

¿ ¡ « » § ¶
† ‡ • —

&iquest; &iexcl; &laquo; &raquo; &sect; &para;
&dagger; &Dagger; &bull; &mdash;

Símbolos comerciais

™ © ® ¢ € ¥
£ ¤

&trade; &copy; &reg; &cent; &euro; &yen;
&pound; &curren;

Índice e expoente

Índice: x2
Expoente: x2 ou x²

Nota: O último método de escrever índices superiores não pode ser usado em todos os contextos, mas seu uso é recomendado sempre que possível (como em unidades de medida) porque a maioria dos navegadores gasta menos tempo na formatação das linhas com ele. ε0 = 8.85 × 10−12C² / J m.

Índice: x<sub>2</sub>
Expoente: x<sup>2</sup> ou x&sup2;
&epsilon;<sub>0</sub> =
8.85 &times; 10<sup>&minus;12</sup>
C&sup2; / J m.

Caracteres gregos

α β γ δ ε ζ
η θ ι κ λ μ ν
ξ ο π ρ σ ς
τ υ φ χ ψ ω
Γ Δ Θ Λ Ξ Π
Σ Φ Ψ Ω

&alpha; &beta; &gamma; &delta; &epsilon; &zeta; 
&eta; &theta; &iota; &kappa; &lambda; &mu; &nu;
&xi; &omicron; &pi; &rho;  &sigma; &sigmaf;
&tau; &upsilon; &phi; &chi; &psi; &omega;
&Gamma; &Delta; &Theta; &Lambda; &Xi; &Pi;
&Sigma; &Phi; &Psi; &Omega;

Caracteres matemáticos

∫ ∑ ∏ √ − ± ∞
≈ ∝ ≡ ≠ ≤ ≥ →
× · ÷ ∂ ′ ″
∇ ‰ ° ∴ ℵ ø
∈ ∉ ∩ ∪ ⊂ ⊃ ⊆ ⊇
¬ ∧ ∨ ∃ ∀ ⇒ ⇔
→ ↔

&int; &sum; &prod; &radic; &minus; &plusmn; &infin;
&asymp; &prop; &equiv; &ne; &le; &ge; &rarr;
&times; &middot; &divide; &part; &prime; &Prime;
&nabla; &permil; &deg; &there4; &alefsym; &oslash;
&isin; &notin; &cap; &cup; &sub; &sup; &sube; 
&supe;&not; &and; &or; &exist; &forall; &rArr; 
&hArr;&rarr; &harr;
x2   ≥   0

verdadeiro.

Nota: Para criar espaçamentos, use espaços inquebráveis - &nbsp;.
&nbsp; também evita quebras de linha no meio do texto. Útil para fórmulas.

<i>x</i><sup>2</sup>&nbsp;&nbsp;&ge;&nbsp;&nbsp;0 verdadeiro.

Fórmulas complexas

  <math>\sum_{n=0}^\infty \frac{x^n}{n!}</math>

 
<math>\sum_{n=0}^\infty \frac{x^n}{n!}</math>

Suspensão da interpretação da marcação

Link → (<i>para</i>) a [[FAQ da Wikipedia]] Nota: Usado para mostrar literalmente dados que, de contrário, teriam significado especial.

Cancela todos os códigos wiki, inclusive aqueles semelhantes a códigos HTML.

Não cancela entidades de caracter HTML.

<nowiki>Link &rarr; (<i>para</i>) 
a [[FAQ da Wikipedia]]</nowiki>

Inserção de comentários invisíveis

Não são mostrados na página

Nota: usado, por exemplo, para deixar comentários numa página para futuros editores. Só é visível ao editar uma página.

<!-- o comentário vai aqui -->

Tabelas

ver artigo principal Como usar tabelas

Exemplos
Item um Item dois
Item tres Item quatro

Uma tabela mais moderna:

Item um Item dois
Item tres Item quatro
Item cinco

Tabela com melhor visual

Título
Título
Ítem 1 Ítem 2
Ítem 3 Ítem 4
Códigos
{| border=1
|-----
| Item um || Item dois
|-----
| Item tres || Item quatro
|}

'''Uma tabela mais moderna:'''

{| border=1
|-----
| Item um || Item dois
|-----
| rowspan=2 | Item tres || Item quatro
|-----
| Item cinco
|}


'''Tabela com melhor visual'''

<table>
  <tr>
<tr style="background: #989898">
<td style="vertical-align:middle; border-top: 1px solid #9C9C9C;border-right: 1px solid #9C9C9C;border-left: 1px solid #9C9C9C; border-bottom: 1px solid #9C9C9C; padding: 1em;"><center>'''Título'''</center></td>
<td style="vertical-align:middle; border-top: 1px solid #9C9C9C;border-right: 1px solid #9C9C9C;border-left: 1px solid #9C9C9C; border-bottom: 1px solid #9C9C9C; padding: 1em;"><center>'''Título'''</center></td>
  </tr>

  <tr>
   <td style="vertical-align:middle; border-top: 1px solid #9C9C9C;border-right: 1px solid #9C9C9C;border-left: 1px solid #9C9C9C; border-bottom: 1px solid #9C9C9C">Ítem 1</td>
   <td style="vertical-align:middle; border-top: 1px solid #9C9C9C;border-right: 1px solid #9C9C9C;border-left: 1px solid #9C9C9C; border-bottom: 1px solid #9C9C9C">Ítem 2</td>
  </tr>

  <tr>
<tr style="background: #D8D8D8">
   <td style="vertical-align:middle; border-top: 1px solid #9C9C9C;border-right: 1px solid #9C9C9C;border-left: 1px solid #9C9C9C; border-bottom: 1px solid #9C9C9C">Ítem 3</td>
   <td style="vertical-align:middle; border-top: 1px solid #9C9C9C;border-right: 1px solid #9C9C9C;border-left: 1px solid #9C9C9C; border-bottom: 1px solid #9C9C9C">Ítem 4</td>
  </tr>
</table>


Bootstrap

Nesta sessão você encontrará as maneiras de se utilizar o Bootstrap em nossa Wiki.

Maiores informações sobre o Bootstrap e outros códigos úteis, acesse: http://getbootstrap.com/


Antes de Começar

Para utilizar o Bootstrap na wiki é preciso entender como fazer funcionar o mesmo. Como o Bootstrap utiliza JavaScript + css e a wiki, em sua versão atual aceita apenas o css, precisamos inserir o javascript de uma maneira manual à cada artigo.

Para criar um conteúdo utilizando o Bootstrap utilize o código abaixo:

 
{{Plano de Fundo Wiki}}

<<Conteúdo normal da wiki>>

<html>
<conteúdo do bootstrap aqui>






	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://bootstrap.correio.biz/js/bootstrap.min.js"></script>
    <script src="http://bootstrap.correio.biz/js/holder.js"></script>
    <script src="http://bootstrap.correio.biz/js/ekko-lightbox.js"></script>
</html>

{{Links}}
[[Categoria:Categoria do artigo aqui]]
Atente-se aos códigos Javascript no fim do código. Para o pleno funcionamento do Bootstrap é necessário sua utilização. Não duplique essa parte do códido, tendo apenas uma menção da mesma no artigo já basta para que você utilize todos os códigos do Bootstrap.

Códigos Úteis

Para inserção da seta de 32px utilizada no corpo dos artigos.


Texto aqui



<div class="arrows"><span class="arrow"></span><p class="text-arrow"> Texto aqui </p></div>

Títulos

A utilização de títulos do Bootstrap já está em produção, mas vamos ver abaixo os códigos e sua utilização:

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>


Códigos

Podemos utilizar também alguns códigos que nos facilitam a demonstração de códigos fonte nos artigos, são eles:

Códigos Inline

Por exemplo, <sessao> deve ser escrito como inline.

Por exemplo, <code><sessao></code> deve ser escrito como inline.


Keyboard

Utiliza-se quando é necessário apresentar uma sequencia de teclas ou alguma tecla do teclado.


Exemplo: Shift + Ctrl + Alt + F4


Botões

Pode-se utilizar qualquer botão do Bootstrap para N situações. Sinta-se livre para utilizá-los.


<!-- Botão padrão -->
<button type="button" class="btn btn-default">Default</button>

<!-- Botão azul -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Botão verde -->
<button type="button" class="btn btn-success">Success</button>

<!-- Botão azul claro (informação) -->
<button type="button" class="btn btn-info">Info</button>

<!-- Botão amarelo -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Botão vermelho -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Botão transparente -->
<button type="button" class="btn btn-link">Link</button>

Pode-se utilizar opções de tamanhos para os botões, tais como .btn-lg, .btn-sm, ou .btn-xs.

Textos Contextuais

Podemos utilizar também cores personalizadas de textos usando apenas classes.


Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

Planos de Fundo Contextuais

Da mesma forma que os textos, temos também planos de fundo para os textos.

...

...

...

...

...

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Thumbnails

Os thumbnails são utilizados para incorporar as imagens que utilizamos na wiki. Abaixo segue um pequeno exemplo de como é apresentado.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/100%x180" alt="...">
    </a>
  </div>
</div>


Alertas

Por padrão, utilize as predefinições da wiki, porém caso queira apresentar algum alerta dentro de alguma aba ou Modal, utilize os códigos abaixo:


Alertas

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

<div class="alert alert-success"><b>Well done!</b> You successfully read this important alert message.</div>
<div class="alert alert-info"><b>Heads up!</b> This alert needs your attention, but it's not super important.</div>
<div class="alert alert-warning"><b>Warning!</b> Better check yourself, you're not looking too good.</div>
<div class="alert alert-danger"><b>Oh snap!</b> Change a few things up and try submitting again.</div>


Alertas com opção de fechamento

Warning! Better check yourself, you're not looking too good.

<div class="alert alert-warning alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>


Alertas com Link na mesma cor do texto.

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

<div class="alert alert-success"><b>Well done!</b> You successfully read this <a href="#" class="alert-link">important alert message.</a></div>
<div class="alert alert-info"><b>Heads up!</b> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.</div>
<div class="alert alert-warning"><b>Warning!</b> Better check yourself, you're <a href="#" class="alert-link">not looking too good.</a></div>
<div class="alert alert-danger"><b>Oh snap!</b> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.</div>


Paineis

Os Paineis podem ser utilizados quando se deseja destacar algum conteúdo do artigo. Podemos aplicar cores em seu cabeçalho.

Panel title

Conteúdo do Painel aqui!

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
 Conteúdo do Painel aqui!
  </div>
</div>


Panel heading without title
Conteúdo do Painel aqui!

<div class="panel panel-primary">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
 Conteúdo do Painel aqui!
  </div></div>


Panel heading without title
Conteúdo do Painel aqui!

<div class="panel panel-success">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
 Conteúdo do Painel aqui!
  </div></div>


Panel heading without title
Conteúdo do Painel aqui!

<div class="panel panel-info">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
 Conteúdo do Painel aqui!
  </div></div>


Panel heading without title
Conteúdo do Painel aqui!

<div class="panel panel-warning">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
 Conteúdo do Painel aqui!
  </div></div>


Panel heading without title
Conteúdo do Painel aqui!

<div class="panel panel-danger">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
 Conteúdo do Painel aqui!
  </div></div>

Modal

O Modal pode ser utilizado para apresentar conteúdos diversos de um mesmo artigo.

Exemplo: versões de software ou sistema operacional

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Teste de Modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">Título do Modal</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>


Abas

As abas são outra forma de apresentar diversos conteúdos de um mesmo artigo.

...
...
...
...

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>


Tooltips e Popover

Tooltips

Tooltips são pequenos balões que apresentam pequenos textos. útil para apresentar alguma informação adicional para algum botão ou frase.


<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>


Popovers

Os Popovers são o mesmo, porém é preciso clicar para ativar o balão:

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>


Collapse

Os collapses são utilizados para esconder conteúdos e abrir conforme necessário, com um efeito de cortina.

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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Links