Skip to content

Instantly share code, notes, and snippets.

@marcorichetta

marcorichetta/layout.html

Created January 11, 2019 14:21
Show Gist options
  • Save marcorichetta/e3159959571aa2a5b89ce2bf555794af to your computer and use it in GitHub Desktop.
Save marcorichetta/e3159959571aa2a5b89ce2bf555794af to your computer and use it in GitHub Desktop.
Download ZIP
Layout to use mainly on Flask projects with bootstrap (JS included)
Raw
layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- BOOTSTRAP CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="../static/bootstrap.min.css" />
<!-- MY CSS -->
<link rel="stylesheet" href="../static/style.css">
<!-- JQUERY (First) -->
<script src="../static/jquery-3.3.1.slim.min.js"></script>
<!-- BOOTSTRAP JS (Last) -->
<script src="../static/bootstrap.bundle.min.js"></script>
<title>Project 2: {% block title %}{% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light border">
<a class="navbar-brand" href="#">
<img src="../static/Slack_Logo.png" width="60" height="60" alt="Flack">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
{% if session.username %}
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Channels</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
{% else %}
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="/register">Register</a></li>
<li class="nav-item"><a class="nav-link" href="/login">Login</a></li>
</ul>
{% endif %}
</div>
</nav>
</body>
<main class="container p-5">
{% block content %}
{% endblock %}
</main>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment