Интеграция bootstrap в Django проект. Интеграция bootstrap в Django проект. Интеграция bootstrap в Django проект.

Интеграция bootstrap в Django проект.

Open in new window

Установка NodeJs в систему.

sudo npm install npm@latest -g
sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Инициализация проекта

npm init

Установка bootstrap

npm install bootstrap@4.0.0-alpha.6  --save

Создадим симлинк lib на директорию node_modules в новом каталоге static.

mkdir static
cd static
ln -s ../node_modules lib

Изменим главный шаблон templates/layout.html.

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/static/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>    
</head>
<body>
    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
        <h5 class="my-0 mr-md-auto font-weight-normal">Time control</h5>
        <nav class="my-2 my-md-0 mr-md-3">
          <a class="p-2 text-dark" href="#">Link 1</a>
          <a class="p-2 text-dark" href="#">Link 2</a>
        </nav>
        <a class="btn btn-outline-primary" href="#">Button</a>
      </div>


      <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
            {% block content %}{% endblock %}

      </div>     
</html>

Добавим путь к статике в settings.py.

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

Other topics