Escreva seu primeiro verbete!
Ajuda:Guia de edição/Modelos: mudanças entre as edições
Sem resumo de edição |
Sem resumo de edição |
||
| Linha 1: | Linha 1: | ||
< | <nav class="navbar navbar-expand-lg navbar-dark bg-primary"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"></button></nav><div class="collapse navbar-collapse" id="navbarColor01"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">Features</a></li><li class="nav-item"><a class="nav-link" href="#">Pricing</a></li><li class="nav-item"><a class="nav-link" href="#">About</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a><div class="dropdown-menu"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">Separated link</a></div></li></ul><form class="form-inline my-2 my-lg-0"><input class="form-control mr-sm-2" type="text" placeholder="Search"><button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button></form></nav></div> | ||
== Modelo Journal == | |||
<button type="button" class="btn btn-primary">Primary</button> | <button type="button" class="btn btn-primary">Primary</button> | ||
<button type="button" class="btn btn-secondary">Secondary</button> | <button type="button" class="btn btn-secondary">Secondary</button> | ||
| Linha 10: | Linha 11: | ||
<button type="button" class="btn btn-link">Link</button> | <button type="button" class="btn btn-link">Link</button> | ||
== Modelo adaptado == | |||
<div type="button" class="btn btn-primary">Primary</div> | |||
<div type="button" class="btn btn-secondary">Secondary</div> | |||
<div type="button" class="btn btn-success">Success</div> | |||
<div type="button" class="btn btn-info">Info</div> | |||
<div type="button" class="btn btn-warning">Warning</div> | |||
<div type="button" class="btn btn-danger">Danger</div> | |||
<div type="button" class="btn btn-link">Link</div> | |||
<pre> | |||
<div type="button" class="btn btn-primary">Primary</div> | <div type="button" class="btn btn-primary">Primary</div> | ||
<div type="button" class="btn btn-secondary">Secondary</div> | <div type="button" class="btn btn-secondary">Secondary</div> | ||
| Linha 18: | Linha 28: | ||
<div type="button" class="btn btn-danger">Danger</div> | <div type="button" class="btn btn-danger">Danger</div> | ||
<div type="button" class="btn btn-link">Link</div> | <div type="button" class="btn btn-link">Link</div> | ||
</pre> | |||
<h1>Heading 1</h1> | <h1>Heading 1</h1> | ||
| Linha 380: | Linha 390: | ||
== Patination == | == Patination == | ||
<div> | <div class="pagination"> | ||
<ul class="pagination"> | <ul class="pagination"> | ||
<li class="page-item disabled"> | <li class="page-item disabled"> | ||
| Linha 463: | Linha 473: | ||
=== Alerts === | === Alerts === | ||
<div class="alert alert-dismissible alert-warning"> | <div class="alert alert-dismissible alert-warning"> | ||
< | <div type="button" class="close" data-dismiss="alert">×</div> | ||
<h4 class="alert-heading">Warning!</h4> | <h4 class="alert-heading">Warning!</h4> | ||
<p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p> | <p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p> | ||
| Linha 469: | Linha 479: | ||
<div class="alert alert-dismissible alert-danger"> | <div class="alert alert-dismissible alert-danger"> | ||
< | <div type="button" class="close" data-dismiss="alert">×</div> | ||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. | <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. | ||
</div> | </div> | ||
<div class="alert alert-dismissible alert-success"> | <div class="alert alert-dismissible alert-success"> | ||
< | <div type="button" class="close" data-dismiss="alert">×</div> | ||
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>. | <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>. | ||
</div> | </div> | ||
<div class="alert alert-dismissible alert-info"> | <div class="alert alert-dismissible alert-info"> | ||
< | <div type="button" class="close" data-dismiss="alert">×</div> | ||
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important. | <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important. | ||
</div> | </div> | ||
<div class="alert alert-dismissible alert-primary"> | <div class="alert alert-dismissible alert-primary"> | ||
< | <div type="button" class="close" data-dismiss="alert">×</div> | ||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. | <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. | ||
</div> | </div> | ||
<div class="alert alert-dismissible alert-secondary"> | <div class="alert alert-dismissible alert-secondary"> | ||
< | <div type="button" class="close" data-dismiss="alert">×</div> | ||
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>. | <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>. | ||
</div> | </div> | ||
<div class="alert alert-dismissible alert-light"> | <div class="alert alert-dismissible alert-light"> | ||
< | <div type="button" class="close" data-dismiss="alert">×</div> | ||
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important. | <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important. | ||
</div> | </div> | ||