Рубрики
Без рубрики

Bootstrap 4 для колбы Python

Узнайте, как сделать визуально потрясающие веб-приложения быстро и легко использовать Python Flask и Framework 4 Bootstrap.

Автор оригинала: Robin Andrews.

Python Колбу это микроформация для создания веб-приложений. Это очень легкий и легко начать, а также очень популярно. Поскольку колба представляет собой веб-каркас, следует, что работа с этим потребуется знание HTML Отказ

Тем не менее, HTML самостоятельно очень ограничен в том, что он может сделать для появления веб-страницы. Конечно, он контролирует базовую структуру, и это очень важно, но для создания привлекательных конструкций необходима для создания привлекательных конструкций, которые будут обращаться к своим пользователям и заставлять их хотеть использовать свой сайт для всего, что вы создали его.

Ключ для управления внешним видом веб-страницы CSS – Каскадные листы стиля. CSS определяет, как отображаются элементы HTML. Это мощный инструмент, но он включает в себя вполне обученную кривую, чтобы стать опытными.

Хотя есть ярлык, хотя, если вы хотите сделать визуально потрясающие веб-страницы с минимальным количеством CSS!

Использование Bootstrap 4 с колбой Python

В этой статье мы собираемся узнать, как сделать сайт 1 страниц, используя Python Flask и Bootstrap 4, в качестве трамплина для вас, чтобы погрузиться в чудесный мир легко в стиле веб-приложений Python. Давайте сделать начало.

  • Если вы еще этого не сделали, установите колбу из командной строки, используя PIP Установить колбу на Windows или PIP3 Установить колбу на Mac/Linux.
  • Создайте новую папку с именем «Python Flask Bootstrap Demo» где-то удобно на вашем компьютере.
  • Создайте файл под названием приложение
  • Добавьте следующее содержимое:
from flask import Flask, render_template


app = Flask(__name__)


@app.route("/")
def main():
    return render_template('index.html')


if __name__ == "__main__":
    app.run()
  • Создайте папку под названием Шаблоны Внутри текущей папки
  • Создайте новый файл под названием index.html.
  • Добавьте следующий демо-HTML-код, адаптированный из Веб-сайт W3Schools :




  Python Flask & Bootstrap 4
  
  
  
  
  
  
  





  
Python Flask & Bootstrap 4

  
Resize this responsive page to see the effect!
 







  

    

      
About Me

      
Photo of me:

      
Fake Image

      
Some text about me in culpa qui officia deserunt mollit anim..

      
Some Links

      
Lorem ipsum dolor sit ame.

      
      

    

    

      
TITLE HEADING

      
Title description, Dec 7, 2017

      
Fake Image

      
Some text..

      
Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

      

      
TITLE HEADING

      
Title description, Sep 2, 2017

      
Fake Image

      
Some text..

      
Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

    

  






  
Footer
  • Беги приложение
  • Вы увидите сообщение, как это:
Serving Flask app "flask-hello" (lazy loading)
Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
Debug mode: off
Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
  • Перейдите к http://127.0.0.1:5000/ В вашем браузере и Та да Должен быть ваша домашняя страница Bootstrap 4 Demo, подается Python Flask.

Подробности о том, как работает колб, не являются предметом этой статьи, но есть много информации, доступных в Интернете для любопытных, и мы, вероятно, будем покрывать колбу здесь на Компогламеми в ближайшем будущем.

То, что я хочу сделать, рекомендуется вам исследовать код Bovertlate, прилагаемый и начните понимать, как он работает. Вы должны изменить вещи, сломать вещи, двигать вещами вокруг и вообще грязные руки. Это займет немного времени, чтобы стать опытным с помощью Bootstrap, но оно удивительно быстро и легко сделать красивые конструкции, как только вы поняли некоторые основы.

Чтобы вы начали здесь, есть несколько указателей:

  • Bootstrap можно включить через Удаленный сервер (CDN) или из ваших собственных файлов проекта после того, как вы их скачали
  • В этом примере он включен через
  • Части JavaScript не всегда нужны. Я оставил их, чтобы вы могли видеть, как их включить.
  • Как правило, вы должны использовать последние версии CSS и JS, доступные здесь.
  • Стайлинг CSS применяется через Классы добавлен в HTML элементы. Эти классы имеют заранее определенные CSS, определенные на них.
  • Некоторые примерные классы: – Контейнер : Используется, чтобы обернуть вокруг коллекции элементов, которые вы хотите нанести классы Bootstrap на – ряд : используется для отделения контента в горизонтальные строки – Col-Sm-8 : Использует мощную систему сетки Bootstrap для управления макетами на основе сетки. В этом примере означает «на небольших устройствах и ниже (до XS – Extra Mall) Этот элемент занимает 8 из 12 колонковых блоков». Я Он будет покрывать 2/3 имеющегося горизонтального пространства, поскольку Bootstrap основан на 12-колонном разделении рядов. – Navbar Navbar-Expart-SM BG-Dark Navbar-Dark Дает вам весь стиль, который вам нужно создать умное отзывчивое меню навигации.

Разделение стиля от макета с Bootstrap 4

Одна вещь, которую вы можете заметить о том, как работает загрузка, заключается в том, что часто рекомендуемое разделение стиля от макета на самом деле не сохраняется. Это связано с тем, что при написании HTML вы устанавливаете классы, которые имеют имена, которые семантически значимы с точки зрения их визуального поведения. Если вы были строго разделены стиль от макета, вам нужно было бы сделать что-то вроде

И тогда у вас будет свобода отображать этот div в любом случае, вы видели в форме, не будучи обеспокоенным тем, что есть, например, предполагается функционировать как строку. Это не важная проблема на практике, хотя, поэтому не позволяйте ему беспокоиться. Это действительно просто наблюдение.

Так что там у вас есть – трамплин, чтобы сделать удивительный вид Колбу Приложения быстро и легко используют Bootstrap 4 Отказ Я надеюсь, что вам повеселись с этим, и если вы хотите быть в курсе статей и предложений от CompuCademy, пожалуйста, рассмотрите возможность присоединиться к нашему списку рассылки.

Счастливые вычисления.