Home-theater-designers
2013లో విడుదలైనప్పటి నుండి, బూట్‌స్ట్రాప్ వెబ్ పేజీలను డెవలపర్‌ల శైలిలో విప్లవాత్మకంగా మార్చింది. బూట్‌స్ట్రాప్ అనేది ప్రతిస్పందించే వెబ్ అప్లికేషన్‌లను రూపొందించడానికి ఉపయోగించే ప్రముఖ ఫ్రంట్-ఎండ్ ఫ్రేమ్‌వర్క్.
జాంగో వెబ్ పేజీలను స్టైల్ చేయడానికి బూట్‌స్ట్రాప్ యొక్క ముందే నిర్మించిన CSS స్టైల్స్ మరియు జావాస్క్రిప్ట్ ప్లగిన్‌లను ఉపయోగిస్తుంది. ఇది స్టైలింగ్ యొక్క అవాంతరాన్ని తగ్గిస్తుంది, జంగోలో దీన్ని కాన్ఫిగర్ చేయడం సవాలుగా ఉంటుంది.
రోజు యొక్క వీడియోను తయారు చేయండి
జాంగో అప్లికేషన్‌లో బూట్‌స్ట్రాప్‌ను ఎలా ఇన్‌స్టాల్ చేయాలో మరియు కాన్ఫిగర్ చేయాలో తెలుసుకుందాం.
బూట్‌స్ట్రాప్‌ను ఎలా ఇన్‌స్టాల్ చేయాలి
రెండు మార్గాలు ఉన్నాయి బూట్‌స్ట్రాప్ 5ని ఉపయోగించండి జంగో ప్రాజెక్ట్‌లో. మీరు దీన్ని మీ అప్లికేషన్‌లో ఇన్‌స్టాల్ చేయవచ్చు లేదా ఉపయోగించి ఫైల్‌లను సూచించవచ్చు బూట్‌స్ట్రాప్ యొక్క CDN . ఈ ప్రాజెక్ట్ మునుపటి పద్ధతిని ఉపయోగిస్తుంది.
బూట్‌స్ట్రాప్‌ని ఇన్‌స్టాల్ చేసే ముందు, జంగో ప్రాజెక్ట్‌ను రూపొందించండి మరియు గ్యాలరీ అనే అప్లికేషన్. అప్లికేషన్ ఫోటో గ్యాలరీగా ఉంటుంది మరియు మీరు అప్లికేషన్ యొక్క నావిగేషన్ బార్‌ను స్టైల్ చేయడానికి బూట్‌స్ట్రాప్‌ని ఉపయోగిస్తారు.
తరువాత, కింది ఆదేశంతో బూట్‌స్ట్రాప్‌ను ఇన్‌స్టాల్ చేయండి:
pipenv install django-bootstrap5 # installs Bootstrap version 5పిప్‌ఫైల్‌ని తనిఖీ చేసి, బూట్‌స్ట్రాప్ 5 డిపెండెన్సీ ఉందని నిర్ధారించండి. మీరు ఇప్పుడు బూట్‌స్ట్రాప్ డిపెండెన్సీని ఉపయోగిస్తున్నారని జాంగో ప్రాజెక్ట్‌కి తెలియజేయాలి.
లో settings.py ఫైల్, క్రింద చూపిన విధంగా బూట్‌స్ట్రాప్‌ను నమోదు చేయండి:
INSTALLED_APPS = [
'gallery',
'bootstrap5',
]ప్రాజెక్ట్ సెట్టింగ్‌లలో బూట్‌స్ట్రాప్‌ను నమోదు చేయడం వలన మీ ప్రాజెక్ట్‌కి django-bootstrap5 డిపెండెన్సీని కలుపుతుంది. ఇది ప్రాజెక్ట్‌లో నిర్వచించబడిన ఏదైనా ఇతర అప్లికేషన్‌కు అందుబాటులో ఉంటుంది.
టెంప్లేట్‌పై బూట్‌స్ట్రాప్‌ని వర్తింపజేయండి
ముందుగా, పేరుతో ఫోల్డర్‌ను సృష్టించండి టెంప్లేట్లు మీ అప్లికేషన్ ఫోల్డర్‌లో. ఈ ఫోల్డర్ లోపల, aని సృష్టించండి base.html ఫైల్ మరియు a navbar.html ఫైల్. టెంప్లేట్లు బూట్‌స్ట్రాప్ స్టైల్ చేసే HTML ఫైల్‌లను కలిగి ఉంటాయి.
మీరు బూట్‌స్ట్రాప్‌ను దరఖాస్తు చేసుకోవచ్చు navbar.html టెంప్లేట్, బేస్ ఫైల్‌ని ఉపయోగించడం సంప్రదాయం. ఎ base.html ఫైల్ ఏదైనా పేజీకి వర్తింపజేయడానికి అన్ని స్క్రిప్ట్‌లు మరియు లింక్‌లను కలిగి ఉంటుంది. ఇది వ్యక్తిగత టెంప్లేట్‌ల సంక్లిష్టతను తగ్గిస్తుంది, మీ కోడ్‌ను క్లీనర్‌గా మరియు సులభంగా అర్థం చేసుకునేలా చేస్తుంది.
లో base.html ఫైల్, కింది వాటిని చేర్చండి:
నా డిస్క్ 100 వద్ద ఎందుకు నడుస్తుంది
{% load bootstrap5 %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Gallery </title>
{% block styles %}
{% bootstrap_css %}
{% endblock %}
</head>
<body>
{% include 'navbar.html' %}
{% block content %} {% endblock %}
{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
{% bootstrap_javascript %}
</body>
</html>
ముందుగా, bootstrap5 డిపెండెన్సీని లోడ్ చేయండి. అప్పుడు మీరు టెంప్లేట్‌ల కోసం అన్ని శైలులను నిర్వచించే రెండు బ్లాక్ స్టైల్‌లను సృష్టించండి. చేర్చండి {% bootstrap_css %} టెంప్లేట్ ట్యాగ్ మరియు బూట్‌స్ట్రాప్ CSS ఫైల్‌కి లింక్.
తరువాత, జావాస్క్రిప్ట్ కార్యాచరణను నిర్వచించే బ్లాక్ స్క్రిప్ట్‌ను సృష్టించండి.
సహా navbar.html లో base.html దానిని బూట్‌స్ట్రాప్‌కి లింక్ చేస్తుంది.
బూట్‌స్ట్రాప్ శైలులను జోడించడం ద్వారా కాన్ఫిగరేషన్‌ను పరీక్షించండి navbar.html టెంప్లేట్:
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<h2 class="brand" style="color:green">PICHA GALLERY</h2>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link nav-link-1 active" aria-current="page" href="{% url 'home' %}" style="color:green">Home</a></li>
<li class="nav-item"><a class="nav-link nav-link-2" href="#gallery" style="color:green">Gallery</a</li>
</ul>
</div>
</div>
</nav>ఇప్పుడు, సర్వర్‌ని అమలు చేయండి మరియు మీ సైట్‌ని బ్రౌజర్‌లో తనిఖీ చేయండి. నావిగేషన్ బార్‌కి బూట్‌స్ట్రాప్ వర్తించే స్టైలింగ్‌ని మీరు చూడాలి.
జంగో ప్రాజెక్ట్‌లలో బూట్‌స్ట్రాప్ ఎందుకు ఉపయోగించాలి?
మీరు బ్యాక్ ఎండ్ డెవలప్‌మెంట్ కోసం ఎక్కువగా జాంగోను ఉపయోగిస్తారు, కానీ ఇది అద్భుతమైన ఫ్రంట్ ఎండ్ పేజీలను కూడా తయారు చేయగలదు. ఫ్రంట్-ఎండ్ పేజీలను స్టైల్ చేయడానికి బూట్‌స్ట్రాప్‌ని ఉపయోగించడం జంగో ప్రారంభకులకు మంచి అభ్యాసం. మీరు పూర్తి-స్టాక్ అప్లికేషన్‌లను సృష్టించినప్పుడు జాంగో గురించి లోతైన అవగాహన పొందుతారు.
ఏదైనా ఫ్రంట్-ఎండ్ ఫ్రేమ్‌వర్క్ వలె, మీరు మీ వెబ్ పేజీలను స్టైల్ చేయడానికి జంగో ప్రాజెక్ట్‌తో బూట్‌స్ట్రాప్ తరగతులను ఉపయోగించవచ్చు. బూట్‌స్ట్రాప్ 5 మెరుగైన భాగాలు మరియు వేగవంతమైన స్టైల్ షీట్‌ను కలిగి ఉంది. ఇది ఆధునిక పరికరాల కోసం మెరుగైన ప్రతిస్పందనను కూడా కలిగి ఉంది.
మీ జంగో ప్రాజెక్ట్‌ల కోసం అద్భుతమైన UIలను స్టైల్ చేయడానికి మరియు సృష్టించడానికి బూట్‌స్ట్రాప్‌ని ఎందుకు ఉపయోగించకూడదు? జాంగో వెబ్ అభివృద్ధిలో దాని సామర్థ్యాలతో మిమ్మల్ని ఆశ్చర్యపరుస్తుంది.