Exercício: Primeiros passos com Bootstrap

Objetivo

Para começar a usar o Bootstrap primeiro importe três arquivos importantes:

- bootstrap.css
- jquery.js
- bootstrap.js

Depois 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
- Email

Dentro 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.html na pasta raíz do projeto com 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>