Olian04 Olian04 - 4 months ago 17
HTML Question

Bootstrap won't work

Yes I'm new and yes this is probably not even a real problem, but it still bugs me...

This is what i got...

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Emmet & Bootstrap</title>

<link rel="stylesheet" href="dist/css/bootstrap.css">
</head>

<body>

<div class="navbar">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>
</div>

<!-- JavaScript -->
<script src="dist/js/jquery.js"></script>
<script src="dist/js/bootstrap.js"></script>
</body>

</html>


File structure

And this is what i get...

Result

What have i missed? (I'm running this in Chrome using the Brackets (node.js based) live preview)

EDIT1:

@Nhan
I want the smallest possible bit of html that's still valid in the scenes of bootstrap. I.e. The least amount of rows that still change appearance if i exclude the bootstrap.css. I'm not looking for a specific "look" i just want to learn the fundamentals of bootstrap, from the ground up (I.e. i have no interest in a flying start / ctrl+c, ctrl+v).

Answer

I see what you mean. Below is the minimal markup required to implement a Bootstrap navbar:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- navbar-default: default colour scheme -->
<nav class="navbar navbar-default">

  <!-- Bootstrap container -->
  <div class="container">

    <!-- Toggle menu on smaller screen sizes (mobile) -->
    <button type="button" class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1"> + </button>

    <!-- Bootstrap collapse, work with the button above -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <!-- Link list -->
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">Link</a>
        </li>
        <li><a href="#">Link</a></li>
      </ul>

    </div>

  </div>
</nav>