Académique Documents
Professionnel Documents
Culture Documents
21 out
Disciplina: Técnicas de Programação Avançada
Carga-horária: 160 horas-aula
4 aulas semanais
Referências
http://www.w3schools.com/bootstrap/
Exercícios
1) A partir da estrutura de diretórios utilizada no projeto, acrescentar os arquivos destacados em anexo:
Anexos
pdo/index.html
<?php include("ui/header.htm"); ?>
<?php include("ui/nav.htm"); ?>
<div id="content"></div>
<?php include("ui/deleteconfirmmodal.htm"); ?>
<?php include("ui/footer.htm"); ?>
pdo/ui/header.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PRODUTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div class="container">
<div class="jumbotron">
<h1>PRODUTO</h1>
Pág.02
</div>
pdo/ui/nav.html
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li><a href="javascript:void(0);" id="user_list"><i class="icon-th
icon-black"></i> Listar</a></li>
<li><a href="javascript:void(0);" id="create_user_form"><i
class="icon-plus-sign icon-black"></i> Novo</a></li>
</ul>
</div>
</div>
pdo/ui/deleteconfirmmodal.html
<div id="delete_confirm_modal" class="modal hide fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<h3 id="myModalLabel">Excluir</h3>
</div>
<div class="modal-body">
<p>Tem certeza que deseja excluir?</p>
</div>
<div class="modal-footer">
<input type="hidden" id="user_id" value="" />
<button class="btn" data-dismiss="modal" aria-hidden="true">Não</button>
<button class="btn btn-primary delete">Sim</button>
</div>
</div>
pdo/ui/footer.html
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="ui/js/custom.js"></script>
</body>
</html>
pdo/ui/css/crud.css
body {
padding-top: 20px;
padding-bottom: 60px;
}
/* Custom container */
.container {
margin: 0 auto;
max-width: 1000px;
}
.container > hr {
margin: 60px 0;
Pág.03
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
.form-horizontal .control-label {
Pág.04
padding-top: 0px;
}
.input-prepend .add-on-area {
display: inline-block;
width: auto;
height: 20px;
min-width: 16px;
padding: 22px 5px;
font-size: 14px;
font-weight: normal;
line-height: 18px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee;
border: 1px solid #ccc;
}
.input-prepend .add-on {
width: 90px;
}
textarea {
height: 56px;
}