Creating Navbar with Bootstrap

Kategori: Python / Flask , 17 Eylül 2019 , JanFranco


Bootstrap bir CSS framework'üdür. Bootstrap kullanarak bir navbar oluşturalım. Her sayfada navbarı ayrı ayrı tanımlamamak için oluşturacağımız navbar.html dosyasını include anahtar kelimesi ile layout.html dosyasına dahil edelim. index.html dosyasında ise layout.html dosyasını miras alalım. İlk olarak templates klasöründe includes adında bir klasör açalım ve bu klasörde navbar.html adında bir dosya oluşturalım ve içeriğini aşağıdaki şekilde güncelleyelim:


<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="">JBlog</a>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="/about">Hakkımızda </a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="/articles">Makaleler </a>
        </li>
      </ul>

      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="/about">Kayıt Ol</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="/about">Giriş Yap</a>
        </li>
      </ul>

    </div>
  </nav>
layout.html dosyasını aşağıdaki şekilde güncelleyelim:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">    
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
        <title>JFBlog</title>
    </head>
    <body>

    {% include "includes/navbar.html" %}

    <br><br><br>

    <div class = "container">
    
        {% block body %}
        
        {% endblock body %}
    
    </div>

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    
    </body>
</html>
Son olarak index.html dosyasını aşağıdaki şekilde güncelleyelim:


{% extends "layout.html" %}

{% block body %}

    <h3>This is index.html</h3>

{% endblock body %}
Sitemizin son hali aşağıdaki gibidir:

Flask


Sonraki Yazı: Conditions, If-Else, Loops
Yorumlar

Henüz bir yorum bulunmuyor.
Yorum bırakın