Boa tarde galera.
Comecei a usar html no tempo do front page, na epoca usavamos frames pra ter o link somente no corpo da pagina, deixando o topo estatico sem carregamento numa nova pagina.
Hoje estou estudando css, bootstrap e tal. porem vi que temos as tags <header>
, <main>
e <footer>
. Gostaria de no header deixar meu cabeçalho (logo, navbar e tal) e os links chamados irem somente pro main, ou seja, substituírem somente o conteúdo do main. Teria como? Tentei com target usando a id do main, mas ele abre uma nova pagina.
<!doctype html>
<html lang="pt-br">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/css/bootstrap.css">
<title>Treinos de Bootstrap</title>
</head>
<body>
<header>
<div class="container fixed-top">
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarSite">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSite">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="teste.html" data-target="corpo">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sobre</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropDownSite" data-toggle="dropdown" href="#">Produtos</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="0">Produto 01</a>
<div class="dropdown-divider"> </div>
<a class="dropdown-item" href="0">Produto 02</a>
<a class="dropdown-item" href="0">Produto 03</a>
<a class="dropdown-item" href="0">Produto 04</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contato</a>
</li>
</ul>
</div>
</nav>
<div>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary border-bottom">
<a class="navbar-brand m-auto" href="#">Clayton</a></nav></div></div>
<div class="container margem_topo">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/images/sl1.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/images/sl2.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/images/sl3.png" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</header>
<main id="corpo" class="evitar_sobre">
<div class="container">
<h2>
primeiro<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br></h2>
</div>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="/js/jquery-3.2.1.slim.min.js"></script>
<script src="/js/popper.min.js" ></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>