Dicionário de Favelas Marielle Franco

Ajuda:Guia de edição/Modelos: mudanças entre as edições

← Edição anteriorEdição posterior →
VisualWikitexto
Sem resumo de edição
Sem resumo de edição
Linha 556: Linha 556:
   </a>
   </a>
</div>
</div>
== Accordions ==
<div class="accordion" id="accordion">
<accordion parent="accordion" heading="SECTION1" class="in">
  Lorem ipsum...
</accordion>
<accordion parent="accordion" heading="SECTION2">
  Testando Bootstrap 4..
</accordion>
</div>
=== Togglable Tabs for Bootstrap 4 ===
<pre>
<ul class="nav nav-tabs mb-2" id="myTabs" role="tablist">
  <li class="nav-item"><btn id="tab1Label" data-toggle="tab" class="nav-link active" role="tab" aria-controls="tab1" aria-selected="true">#tab1|Tab 1</btn></li>
  <li><btn id="btn2Label" data-toggle="tab" class="nav-link" role="tab" aria-controls="tab2" aria-selected="false">#tab2|Tab 2</btn></li>
</ul>
<div class="tab-content">
  <div id="tab1" class="tab-pane fade in active">
    '''Tab 1''': Lorem ipsum Lorem ipsumLorem ipsumLorem ipsum...
  </div>
  <div id="tab2" class="tab-pane fade">
    '''Tab 2''': Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum...
  </div>
</div>
</pre>
<ul class="nav nav-tabs mb-2" id="myTabs" role="tablist">
  <li class="nav-item"><btn id="tab1Label" data-toggle="tab" class="nav-link active" role="tab" aria-controls="tab1" aria-selected="true">#tab1|Tab 1</btn></li>
  <li><btn id="btn2Label" data-toggle="tab" class="nav-link" role="tab" aria-controls="tab2" aria-selected="false">#tab2|Tab 2</btn></li>
</ul>
<div class="tab-content">
  <div id="tab1" class="tab-pane fade in active">
    '''Tab 1''': Lorem ipsum Lorem ipsumLorem ipsumLorem ipsum...
  </div>
  <div id="tab2" class="tab-pane fade">
    '''Tab 2''': Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum...
  </div>
</div>
=== Buttons tweeki ===
<btn>Simple Button</btn>
<btn size="lg">Large Button</btn>
<btn size="sm">Small Button</btn>
<btn>
Grouped
Buttons
</btn>
<btn>
Button
Tool
Bar
</btn>
<btn class="btn-primary">
Classy
Buttons
</btn>
<btn class="">
Button without any class
</btn>
<btn>
Primary||btn-primary
Non-classy
Success||btn-success
Danger||btn-danger
Info||btn-info
Warning||btn-warning
</btn>
<btn>
Standard Button
Some Page Title|Internal Target
http://some.where|External Target
</btn>
=== Dropdown Buttons ===
<btn>
Dropdown-Menu
* Some Menu Item
*
*: Some Heading
* Some Other Menu Item
</btn>
<btn>
Target|Split Dropdown
* Some Menu Item
</btn>
<btn class="">
Non-Button Dropdown
* Some Menu Item
</btn>
<btn>
Semantic Dropdown
* {{#ask:[[Category:Components]]}}
</btn>
Note: this only works with the Semantic MediaWiki extension installed.
=== Wrappers ===
<btn wrapperclass="btn-group dropup">
Dropup
* Some Menu Item
</btn>
<btn wrapperclass="btn-group-vertical">
Explicit
Wrapper
Setting
</btn>
<btn wrapper="">
Explicit
Wrapper
Unsetting
</btn>
== Outros exemplos
{{CURRENTYEAR}}
{{CURRENTMONTH}}
{{CURRENTMONTHNAME}}
{{PAGELANGUAGE}}
<translate><!--T:1--> Translated unit. Language: <tvar|lang>{{TRANSLATIONLANGUAGE}}</>.</translate>
<translate><!--T:2--> Not translated unit. Language: <tvar|lang>{{TRANSLATIONLANGUAGE}}</>.</translate>
{{FULLPAGENAMEE}}
{{PAGENAMEE}}
{{BASEPAGENAMEE}}
{{SUBPAGENAMEE}}
{{SUBJECTPAGENAMEE}}
{{ARTICLEPAGENAMEE}}
{{TALKPAGENAMEE}}
{{ROOTPAGENAMEE}}
{{canonicalurl:Coronavírus_nas_favelas}}
{{canonicalurl:Coronavírus_nas_favelas
|query_string}}
{{canonicalurl:interwiki:remote Coronavírus_nas_favelas
|query_string}}
{{filepath:image1.jpg}}
{{filepath:image2.jpg|nowiki}}
{{filepath:image2.jpg|thumbnail_size}}
Info: if a system message by that name exists, the text will be replaced by it's content
=== Togglable Tabs for Bootstrap 4 ===
<pre>
<ul class="nav nav-tabs mb-2" id="myTabs" role="tablist">
  <li class="nav-item"><btn id="tab1Label" data-toggle="tab" class="nav-link active" role="tab" aria-controls="tab1" aria-selected="true">#tab1|Tab 1</btn></li>
  <li><btn id="btn2Label" data-toggle="tab" class="nav-link" role="tab" aria-controls="tab2" aria-selected="false">#tab2|Tab 2</btn></li>
</ul>
<div class="tab-content">
  <div id="tab1" class="tab-pane fade in active">
    '''Tab 1''': Lorem ipsum Lorem ipsumLorem ipsumLorem ipsum...
  </div>
  <div id="tab2" class="tab-pane fade">
    '''Tab 2''': Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum...
  </div>
</div>
</pre>
<ul class="nav nav-tabs mb-2" id="myTabs" role="tablist">
  <li class="nav-item"><btn id="tab1Label" data-toggle="tab" class="nav-link active" role="tab" aria-controls="tab1" aria-selected="true">#tab1|Tab 1</btn></li>
  <li><btn id="btn2Label" data-toggle="tab" class="nav-link" role="tab" aria-controls="tab2" aria-selected="false">#tab2|Tab 2</btn></li>
</ul>
<div class="tab-content">
  <div id="tab1" class="tab-pane fade in active">
    '''Tab 1''': Lorem ipsum Lorem ipsumLorem ipsumLorem ipsum...
  </div>
  <div id="tab2" class="tab-pane fade">
    '''Tab 2''': Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum...
  </div>
</div>
== Imagem responsiva ==
Bootstrap  4 - Class fluid
[[Arquivo:image1.jpg|class=img-fluid| link=#]]
[[Arquivo:image2.jpg|class=img-fluid| link=#]]
=== Predefinição Clickable_Button ===
{{Clickable_Button|Escreva o texto do seu botão aqui|color=white}}
{{Clickable_Button|Ver mais|color=red}}
{{Clickable_Button|Cadastrar|color=blue}}
{{Clickable_Button|Enviar|color=green}}
=== Painel com fotos ===
== Título do painel ==
<div class="flex-row row">
<div class="col-lg-3 col-md-6 col-sm-12 mb-4">
<div class="card shadow-lg border-0">
<div class="card-img-top">[[Arquivo:image1.jpg|class=img-responsive| link=Sociabilidade_e_Cultura_(eixo_de_análise)]]
</div>
<div class="panel-footer btn-eixo1">Sociabilidade e Cultura</div>
</div><!-- End of pan -->
</div><!-- end of col 1-->
<div class="col-lg-3 col-md-6 col-sm-12 mb-4">
<div class="card shadow-lg border-0">
<div class="card-img-top">[[Arquivo:image2.jpg|class=img-responsive| link=Estado_e_Mercado_(eixo_de_análise)]]
</div>
<div class="panel-footer btn-eixo2">Estado e Mercado
</div>
</div><!-- End of pan -->
</div><!-- End of col 2-->
<div class="col-lg-3 col-md-6 col-sm-12 mb-4">
<div class="card shadow-lg border-0">
<div class="card-img-top">[[Arquivo:image3.jpg|class=img-responsive| link=Associativismo_e_Memória_(eixo_de_análise)]] 
</div>
<div class="panel-footer btn-eixo3">Associativismo e Memória</div>
</div><!-- End of pan -->
</div><!-- End of col 3-->
<div class="col-lg-3 col-md-6 col-sm-12 mb-4">
<div class="card shadow-lg border-0">
<div class="card-img-top">[[Arquivo:image4.jpg|class=img-responsive| link=Coronavírus_nas_favelas]]
</div>
<div class="panel-footer btn-eixo4">Coronavírus nas Favelas</div>
</div><!-- End of pan -->
</div><!-- End of col 4-->
</div><!-- End of row 1-->
=== Modal tw ===
Bootstrap 4
<btn data-toggle="modal" data-target="#myModal">Launch modal</btn>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal title</h5>
        <btn class="close" data-dismiss="modal" aria-label="Close">|<span aria-hidden="true">×</span></btn>
      </div>
      <div class="modal-body">Modal body</div>
      <div class="modal-footer">
        <btn class="btn btn-secondary" data-dismiss="modal">Close</btn>
        <btn class="btn btn-primary">Modal Action</btn>
      </div>
    </div>
  </div>
</div>




Linha 594: Linha 933:


== Eixos de Análise ==
== Eixos de Análise ==
<div class="row">
<div class="row">
<div class="col-lg">
<div class="col-lg">
Disponível em “https://homologacao2.wikifavelas.com.br/index.php/Ajuda:Guia_de_edição/Modelos”