Objetivo
Para começar a usar o Bootstrap primeiro importe três arquivos importantes:
- bootstrap.css
- jquery.js
- bootstrap.jsDepois abra a documentação do Bootstrap e procure pela estrutura exemplo de um header. Modifique para que o header contenha a logo da musicdot e que possua três links:
- Cursos
- Matrículas
- EmailDentro da tag <main> crie a estrutura de um Jumbotron e, assim como no header, modifique-o para que fique com os textos certos. No título do Jumbotron: "Escolher cursos" e no parágrafo abaixo do título: "Escolha os cursos que gostaria de se matricular". Para estilizar toda a página utilize as classes css necessárias que estão na documentação do Bootstrap.
Passo a passo com código
Crie o arquivo
matricula.htmlna pastaraíz do projetocom o seguinte código:matricula.html
+<!DOCTYPE html> +<html> +<head> + <title>Matriculas</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width"> + <link href="css/bootstrap.css" rel="stylesheet"> + <link href="img/favicon.ico" rel="icon"> +</head> +<body> + <header class="header"> + <nav class="navbar navbar-expand-sm navbar-dark bg-dark"> + <a class="navbar-brand" href="index.html"><img class="header-navbar-logo" src="img/musicdot-logo-light.svg" alt="Logo da Musicdot"></a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarSupportedContent"> + <ul class="navbar-nav mr-auto"> + <li class="nav-item active"> + <a class="nav-link" href="#">Cursos</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Matriculas</a> + </li> + <li class="nav-item"> + <a href="#" class="nav-link">Emails</a> + </li> + </ul> + </div> + </nav> + </header> + <main class="container mb-4"> + <div class="jumbotron bg-dark text-light mt-3"> + <div class="container"> + <h1>Escolher cursos</h1> + <p class="lead">Escolha os cursos que gostaria de se matricular</p> + </div> + </div> + </main> + <script src="js/jquery.js"></script> + <script src="js/bootstrap.js"></script> +</body> +</html>