Kiedy chcesz, aby witryna była przystojna, zwracasz się do CSS. Nie ma lepszego sposobu niż to. Ponieważ istnieje wiele zawiłości CSS, programiści wymyślili sposoby na pakowanie „stylów”. Najczęstszym wyborem jest bootstrap, pierwotnie opracowany przez Twitter i dla Twittera. To wcale nie jest jedyna struktura CSS, więc zobaczysz więcej w tym artykule.

Django Bootstrap

Podczas programowania w Python zwykle używałbyś ramy internetowej, jednym z bardzo powszechnych jest Django. Na szczęście istnieje projekt używania bootstrap w Django. To jest na Pypi.org, więc instalowanie jest zwykłą rutyną. Najprawdopodobniej korzystasz z wirtualnego środowiska, aktywujesz je i instalujesz z PIP.

$ pip instaluj django-bootstrap3

Ten sam zespół obsługuje Bootstrap4, że projekt ma ocenę zasięgu 89%, więc może brakować Twojej konkretnej funkcji. Musisz podjąć tę decyzję samodzielnie. Teraz musisz dodać tę aplikację do swoich „Ustawienia.plik py '.

Instalowane_apps = [
„Django.wkład.Admin',
„Django.wkład.autoryzacja '',
„Django.wkład.ContentTypes ',
„Django.wkład.sesje ',
„Django.wkład.Wiadomości ',
„Django.wkład.plik statyczny,
„Bootstrap3”,
]

Teraz możesz użyć bootstrap w kodzie witryny. Ponieważ używasz Django, masz katalog szablonów zdefiniowany w „Ustawieniach.plik py '. W głównym szablonie dodaj poniższy kod.

% ładowanie bootstrap3 %

% bootstrap_form Form %
% guziki %

% bootstrap_icon „gwiazda”% prześlij

% EndButtons %

Dwie ciekawe wartości w tym kodzie to „bootstrap*”, są to znaczniki szablonów i filtry, które można wyszukać w dokumentacji Django-Bootstrap. Kod % przycisków % może również zawierać parametry, które określają tekst przesyłania i resetowania formularza. Kiedy będziesz bardziej zaawansowany, upewnij się, że dodasz Bootstrap3 do swoich ustawień.py. Istnieją również szablony błędów i wiadomości, których można użyć do kontrolowania wyświetlania błędów w Twojej witrynie.

Flask Bootstrap

W kolbie masz również moduł o nazwie Flask-Bootstrap, jest on zainstalowany w twoim wirtualnym środowisku za pomocą PIP jak zwykle.

$ pip instaluj kolbę-bootstrap

Moduł działa bardzo podobnie, co nie jest zaskakujące, ponieważ oboje używają silnika szablonów Jinja2. Import jest bardziej bezpośrednim sposobem korzystania z funkcji bootstrap, więc musisz zaimportować moduł w górnej części aplikacji.plik py '. Musisz dodać bootstrap do swojej definicji „aplikacji” w tym samym pliku.

z kolby importowej kolby
z flest_bootstrap import bootstrap
def create_app ():
App = Flask (__ name__)
Bootstrap (aplikacja)
Aplikacja zwrotna

Kiedy to zaimportujesz, wystarczy dodać go do szablonów w taki sam sposób, jak na zwykłej stronie internetowej. Różnica polega na tym, że masz bloki, które określają, jak wyglądają różne elementy na Twojej stronie. Przejrzyj bloki dostępne na ich stronie internetowej. W przeciwnym razie nazywasz framework w taki sam sposób, jak w Django. Istnieje wiele makr, i.mi. Obsługa WTForms.

Inne wybory

Masz również podobne projekty dla Cubicweb, o nazwie Cubicweb-Bootstrap. Instalacja jest jak zwykle, instaluj PIP. Zawiera całą bibliotekę i niektóre procedury do jej użycia.

Jeśli nie znajdziesz rozwiązania, które Cię odpowiada, zbadaj, w czym FanStatic może Ci pomóc. Tworzy sposoby importowania zależności JavaScript do twojego kodu Pythona. Działa to również z plikami CSS. Ramy te są tworzone w celu wykorzystania dowolnej frameworku internetowego zgodnego z WSGI.

Wniosek

Jeśli chcesz użyć CSS do rozjaśnienia swojej witryny, najskuteczniejszym sposobem jest użycie istniejącej ramy. Interfejs do tych frameworków już tam jest, po prostu umieść swój styl w szablonach i dobry. Python i większość dostępnych frameworków mają potężne procedury do baz danych, CSS i wiele innych rzeczy, które zapewnią Ci kontrolę, a także pozwalają szybko tworzyć niesamowite rzeczy.

List referencyjny:

https: // pYPI.org/projekt/bootstrap4/
https: // pYPI.Org/Project/Cubicweb-Bootstrap/#History
https: // pYPI.org/projekt/django-bootstrap-fields/#History
https: // github.com/goopt/js.Bootstrap4
http: // mkdocs.github.IO/MKDOCS-BOOTTRAP/
https: // cssselect.ReadThedocs.IO/en/najnowszy/