I do not get the desired result in Bootstrap

-1

I'm starting with Bootstrap creating a page header, based on the page of this link link and a JavaDevOne tutorial on yt. My problem is that the result I get is not the one that is consistent with the example of bootstrap or the tutorial.

I attach my code:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Etiqueta que sirve para IE -->
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Hara que la web tenga un tamaño normal independientemente del dispositivo -->

    <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Cargamos el css de bootstrap.min.css -->
    <link rel="stylesheet" href="css/estilos.css"> <!-- Cargamos el css de estilos.css -->

    <title>Pagina</title>
</head>
<body>    
    <script src="js/jquery.min.js"></script> <!-- Cargamos el js de jquery -->
    <script src="js/popper.min.js"></script> <!-- Cargamos el js de popper -->
    <script src="js/bootstrap.min.js"></script> <!-- Cargamos el js de bootstrap -->

    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toogle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Este boton cambia la barra de navegacion</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">DAW208</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>Inicio</li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                </ul>
            </div>
        </div>
    </nav>
</body>
</html>

My situation:

Expected:

    
asked by Eduardo 28.09.2017 в 17:09
source

1 answer

2

Here is an example of how your page structure should look.

If it works, the problem is that you are not reaching the libraries, you should check that the libraries are at the same level as your index

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Etiqueta que sirve para IE -->
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Hara que la web tenga un tamaño normal independientemente del dispositivo -->

    <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Cargamos el css de bootstrap.min.css -->
    <link rel="stylesheet" href="css/estilos.css"> <!-- Cargamos el css de estilos.css -->

    <title>Pagina</title>
</head>
<body>    
    <script src="js/jquery.min.js"></script> <!-- Cargamos el js de jquery -->
    <script src="js/popper.min.js"></script> <!-- Cargamos el js de popper -->
    <script src="js/bootstrap.min.js"></script> <!-- Cargamos el js de bootstrap -->

    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toogle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Este boton cambia la barra de navegacion</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">DAW208</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Inicio</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                </ul>
            </div>
        </div>
    </nav>
</body>
</html>
    
answered by 28.09.2017 в 17:15