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 330: | Linha 330: | ||
</div> | </div> | ||
== Pills == | |||
<ul class="nav nav-pills"> | |||
<li class="nav-item"> | |||
<a class="nav-link active" href="#">Active</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> | |||
<li class="nav-item"> | |||
<a class="nav-link" href="#">Link</a> | |||
</li> | |||
<li class="nav-item"> | |||
<a class="nav-link disabled" href="#">Disabled</a> | |||
</li> | |||
</ul> | |||
== Breadcrumbs == | |||
<ol class="breadcrumb"> | |||
<li class="breadcrumb-item active">Home</li> | |||
</ol> | |||
<ol class="breadcrumb"> | |||
<li class="breadcrumb-item"><a href="#">Home</a></li> | |||
<li class="breadcrumb-item active">Library</li> | |||
</ol> | |||
<ol class="breadcrumb"> | |||
<li class="breadcrumb-item"><a href="#">Home</a></li> | |||
<li class="breadcrumb-item"><a href="#">Library</a></li> | |||
<li class="breadcrumb-item active">Data</li> | |||
</ol> | |||
== Patination == | |||
<div> | |||
<ul class="pagination"> | |||
<li class="page-item disabled"> | |||
<a class="page-link" href="#">«</a> | |||
</li> | |||
<li class="page-item active"> | |||
<a class="page-link" href="#">1</a> | |||
</li> | |||
<li class="page-item"> | |||
<a class="page-link" href="#">2</a> | |||
</li> | |||
<li class="page-item"> | |||
<a class="page-link" href="#">3</a> | |||
</li> | |||
<li class="page-item"> | |||
<a class="page-link" href="#">4</a> | |||
</li> | |||
<li class="page-item"> | |||
<a class="page-link" href="#">5</a> | |||
</li> | |||
<li class="page-item"> | |||
<a class="page-link" href="#">»</a> | |||
</li> | |||
</ul> | |||
</div> | |||
<div> | |||
<ul class="pagination pagination-lg"> | |||
<li class="page-item disabled"> | |||
<a class="page-link" href="#">«</a> | |||
</li> | |||
<li class="page-item active"> | |||
<a class="page-link" href="#">1</a> | |||
</li> | |||
<li class="page-item"> | |||
<a class="page-link" href="#">2</a> | |||
</li> | |||
<li class="page-item"> | |||
<a class="page-link" href="#">3</a> | |||
</li> | |||
<li class="page-item"> | |||
<a class="page-link" href="#">4</a> | |||
</li> | |||
<li class="page-item"> | |||
<a class="page-link" href="#">5</a> | |||
</li> | |||
<li class="page-item"> | |||
<a class="page-link" href="#">»</a> | |||
</li> | |||
</ul> | |||
</div> | |||
<div> | |||
<ul class="pagination pagination-sm"> | |||
<li class="page-item disabled"> | |||
<a class="page-link" href="#">«</a> | |||
</li> | |||
<li class="page-item active"> | |||
<a class="page-link" href="#">1</a> | |||
</li> | |||
<li class="page-item"> | |||
<a class="page-link" href="#">2</a> | |||
</li> | |||
<li class="page-item"> | |||
<a class="page-link" href="#">3</a> | |||
</li> | |||
<li class="page-item"> | |||
<a class="page-link" href="#">4</a> | |||
</li> | |||
<li class="page-item"> | |||
<a class="page-link" href="#">5</a> | |||
</li> | |||
<li class="page-item"> | |||
<a class="page-link" href="#">»</a> | |||
</li> | |||
</ul> | |||
</div> | |||
== Indicators == | |||
=== Alerts === | |||
<div class="alert alert-dismissible alert-warning"> | |||
<button type="button" class="close" data-dismiss="alert">×</button> | |||
<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> | |||
</div> | |||
<div class="alert alert-dismissible alert-danger"> | |||
<button type="button" class="close" data-dismiss="alert">×</button> | |||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. | |||
</div> | |||
<div class="alert alert-dismissible alert-success"> | |||
<button type="button" class="close" data-dismiss="alert">×</button> | |||
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>. | |||
</div> | |||
<div class="alert alert-dismissible alert-info"> | |||
<button type="button" class="close" data-dismiss="alert">×</button> | |||
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important. | |||
</div> | |||
<div class="alert alert-dismissible alert-primary"> | |||
<button type="button" class="close" data-dismiss="alert">×</button> | |||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. | |||
</div> | |||
<div class="alert alert-dismissible alert-secondary"> | |||
<button type="button" class="close" data-dismiss="alert">×</button> | |||
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>. | |||
</div> | |||
<div class="alert alert-dismissible alert-light"> | |||
<button type="button" class="close" data-dismiss="alert">×</button> | |||
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important. | |||
</div> | |||
== Badges == | |||
<span class="badge badge-primary">Primary</span> | |||
<span class="badge badge-secondary">Secondary</span> | |||
<span class="badge badge-success">Success</span> | |||
<span class="badge badge-danger">Danger</span> | |||
<span class="badge badge-warning">Warning</span> | |||
<span class="badge badge-info">Info</span> | |||
<span class="badge badge-light">Light</span> | |||
<span class="badge badge-dark">Dark</span> | |||
== Containers == | |||
<div class="jumbotron"> | |||
<h1 class="display-3">Hello, world!</h1> | |||
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> | |||
<hr class="my-4"> | |||
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p> | |||
<p class="lead"> | |||
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> | |||
</p> | |||
</div> | |||