Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере. Опширније.

Од свог објављивања 2013. године, Боотстрап је револуционирао начин на који програмери стилизирају веб странице. Боотстрап је популаран фронт-енд оквир који се користи за дизајнирање веб апликација које реагују.

Дјанго користи Боотстрап-ове унапред изграђене ЦСС стилове и ЈаваСцрипт додатке за стилизовање веб страница. Иако смањује проблеме са стилизовањем, његово конфигурисање у Дјангу може бити изазовно.

Хајде да научимо како да инсталирамо и конфигуришемо Боотстрап у Дјанго апликацији.

Како инсталирати Боотстрап

Постоје два начина да се користите Боотстрап 5 у Дјанго пројекту. Можете га инсталирати у своју апликацију или референцирати датотеке користећи Боотстрап-ов ЦДН. Овај пројекат ће користити претходни метод.

Пре инсталирања Боотстрап-а, креирајте Дјанго пројекат и апликација под називом галерија. Апликација ће бити галерија фотографија, а ви ћете користити Боотстрап за стилизовање траке за навигацију апликације.

instagram viewer

Затим инсталирајте Боотстрап са следећом командом:

пипенв инсталирај дјанго-боотстрап5 # инсталира Боотстрап верзију 5

Проверите Пипфиле и потврдите да постоји зависност од Боотстрап 5. Сада морате да обавестите Дјанго пројекат да користите Боотстрап зависност.

У сеттингс.пи датотеку, региструјте Боотстрап као што је приказано испод:

ИНСТАЛЛЕД_АППС = [
'галерија',
'боотстрап5', 
]

Регистровање Боотстрап-а у подешавањима пројекта повезује зависност дјанго-боотстрап5 са вашим пројектом. Биће доступан било којој другој апликацији дефинисаној у пројекту.

Примените Боотстрап на шаблон

Прво направите фасциклу под називом шаблони у фасцикли ваше апликације. Унутар ове фасцикле направите а басе.хтмл фајл и а навбар.хтмл фајл. Шаблони ће садржати ХТМЛ датотеке које ће Боотстрап стилизовати.

Док можете да примените Боотстрап на навбар.хтмл шаблон, коришћење основне датотеке је уобичајено. А басе.хтмл датотека ће садржати све скрипте и везе које треба применити на било коју страницу. Смањује сложеност појединачних шаблона, чинећи ваш код чистијим и лакшим за разумевање.

У басе.хтмл датотеку, укључити следеће:

{% лоад боотстрап5 %}
<!ДОЦТИПЕ хтмл>


<хтмл ланг="ен">


<глава>


<мета цхарсет="УТФ-8">


<мета хттп-екуив="Кс-УА-Цомпатибле" цонтент="ИЕ=ивица">


<мета наме="виевпорт" цонтент="видтх=девице-видтх, инитиал-сцале=1.0">
<наслов> Галерија </title>


{% блок стилова %}


{% боотстрап_цсс %}


{% ендблоцк %}
</head>
<тело>
 {% укључује 'навбар.хтмл' %}
 {% блоцк цонтент %} {% ендблоцк %}
 {% блок скрипти %}
<скрипт срц="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" интегритет="сха384-МрцВ6ЗМФИлзцЛА8Нл+НтУВФ0сА7МсКссП1УиЈоМп4ИЛЕуНСфАП+ЈцКсн/тВтИакВКСМ" цроссоригин="анонимни">
</script>
 {% боотстрап_јавасцрипт %}
</body>
</html>

Прво учитајте зависност боотстрап5. Затим креирајте два стила блока где ћете дефинисати све стилове за шаблоне. Укључите {% боотстрап_цсс %} ознаку шаблона и везу до Боотстрап ЦСС датотеке.

Затим направите блок скрипту која дефинише ЈаваСцрипт функционалност.

Укључујући навбар.хтмл у басе.хтмл повезује га са Боотстрапом.

Тестирајте конфигурацију додавањем Боотстрап стилова у навбар.хтмл шаблон:

<нав цласс="навбар навбар-екпанд-лг">
<див цласс="контејнер-течност">
<х2 цласс="Марка" стиле="боја: зелена">ПИЦХА ГАЛЕРИЈА</h2>
<дугме цласс="навбар-тогглер" типе="дугме" дата-тоггле="колапс" дата-таргет="#навбарСуппортедЦонтент" ариа-цонтролс="навбарСуппортедЦонтент" ариа-екпандед="лажно" ариа-лабел="Пребаци навигацију"><и цласс="фас фа-барови"></и></button>
<див цласс="колапс навбар-колапс" ид="навбарСуппортедЦонтент">
<ул цласс="навбар-нав мл-ауто мб-2 мб-лг-0">
<ли цласс="нав-ставка"><а цласс="нав-линк нав-линк-1 активан" ариа-цуррент="страна" хреф="{% урл 'кућа' %}" стиле="боја: зелена">Кућа</а></li>
<ли цласс="нав-ставка"><а цласс="нав-линк нав-линк-2" хреф="#галлери" стиле="боја: зелена">Галерија</а</li>
</ul>
</div>
</div>
</nav>

Сада покрените сервер и проверите своју веб локацију у претраживачу. Требало би да видите стил који Боотстрап примењује на траку за навигацију.

Зашто користити Боотстрап у Дјанго пројектима?

Дјанго ћете углавном користити за бацк-енд развој, али може да направи и невероватне фронт-енд странице. Коришћење Боотстрапа за стилизовање фронт-енд страница је добра пракса за почетнике у Дјанго-у. Добијате дубинско разумевање Дјанга када креирате апликације пуног стека.

Као и сваки фронт-енд фрамеворк, можете користити Боотстрап класе са Дјанго пројектом за стилизовање ваших веб страница. Боотстрап 5 има боље компоненте и брзу листу стилова. Такође има побољшани одзив за модерне уређаје.

Зашто не користите Боотстрап за стилизовање и креирање невероватних корисничких интерфејса за ваше Дјанго пројекте? Дјанго ће вас одушевити својим могућностима у веб развоју.