Estilo
Esta página mostra os estilo que compõem o layout NTI. Os componentes descritos aqui são baseados no framework Bootstrap, e todos os componentes de estilo deste framework devem funcionar normalmente no layout NTI.
Esta página mostra os estilo que compõem o layout NTI. Os componentes descritos aqui são baseados no framework Bootstrap, e todos os componentes de estilo deste framework devem funcionar normalmente no layout NTI.
É a barra de navegação no topo da página que além do nome do sistema, possui links de navegação, botões de login/logout, entre outros.
<nav class="navbar navbar-nti">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand nome-sistema" href="#">
<span class="hidden-xs">Nome do Sistema</span>
<span class="visible-xs">Sistema</span>
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
</ul>
</div>
</div>
</nav>
Além da barra de titu lo normal, temos a barra com o botão para mostrar ou esconder o sidebar
<nav class="navbar navbar-nti">
<div class="container-fluid">
<div class="navbar-header">
<div class="toggle-sidebar-area">
<button type="button" class="navbar-toggle sidebar-toggle" id="slide-submenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand nome-sistema" href="#">
<span class="hidden-xs">Nome do Sistema</span>
<span class="visible-xs">Sistema</span>
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
</ul>
</div>
</div>
</nav>
Rodapé da página comtém o nome da instituição e logos.
<footer class="main-footer">
<a class="col-sm-3 col-xs-3 text-left" href="" target="_blank">
<img src="images/logo-ufms.png" alt="UFMS" height="50px"> </a>
<p class="text-center small col-sm-6 col-xs-6">
<span class="hidden-xs hidden-sm">
<strong>NTI - Núcleo de Tecnologia da Informação <br>
UFMS - Universidade Federal de Mato Grosso do Sul</strong>
</span>
<span class="visible-xs visible-sm">
<strong>NTI - Núcleo de Tecnologia da Informação - UFMS</strong>
</span>
</p>
<a class="col-sm-3 col-xs-3 text-right" href="" target="_blank">
<img src="images/logo-nti.png" alt="NTI" height="40px"> </a>
</footer>
O menu lateral mostra as principais funcionalidades do sistema listadas de forma hierarquica. Veja na parte de javascript a construção do Menu com Submenus.
<aside class="menu-sidebar slide horizontal">
<a href="#menu-lateral" class="list-group-item text-center active">
<i class="fa fa-home fa-lg"></i>Inicio
</a>
<a href="#menu-lateral" class="list-group-item text-center">
<i class="fa fa-list fa-lg"></i>Menu 1
</a>
<a href="#menu-lateral" class="list-group-item text-center">
<i class="fa fa-list fa-lg"></i>Menu 2
</a>
<a href="#menu-lateral" class="list-group-item text-center">
<i class="fa fa-list fa-lg"></i>Menu 3
</a>
<a href="#menu-lateral" class="list-group-item text-center">
<i class="fa fa-list fa-lg"></i>Menu 4
</a>
</aside>
Alem do título da página, contém os links do breadcrumbs e o link de ajuda.
<section class="page-header">
<h1 class="col-xs-6">Título da Página</h1>
<ol class="col-xs-6 breadcrumb text-right">
<li><a href="#"><i class="fa fa-home" aria-hidden="true"></i> Início</a></li>
<li><a href="#"> CRUD</a></li>
<li class="active"> Operação</li>
<li class="help text-danger"><a title="Ajuda" class="text-danger" id="impressao_padoc" >
<i class="fa fa-question-circle" aria-hidden="true"></i> Ajuda</a>
</li>
</ol>
</section>
Serve para agrupar elementos da página.
<div class="box box-success col-xs-12">
<div class="box-header">
<h3 class="box-title"><i class="fa fa-dialog"></i>Título do Box</h3>
</div>
<div class="box-body">
Um texto qualquer. Um texto qualquer. Um texto qualquer. Um texto qualquer. Um texto qualquer.
</div>
</div>
Mostra ou esconde conteudo ao clicar no header da box.
<div class="box box-info">
<div class="box-header">
<h4 class="box-title">
<div class="row">
<a class="text-primary col-xs-12" data-toggle="collapse" href="#collapseExample"
aria-expanded="true" aria-controls="collapseExample">
Titulo
<span class="pull-right"><i class="fa fa-plus-square fa-lg"></i></span>
</a>
</div>
</h4>
</div>
<div class="box-body collapse" id="collapseExample">
Um texto qualquer. Um texto qualquer. Um texto qualquer. Um texto qualquer. Um texto
qualquer.
</div>
</div>