Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> CSS

हिंडोला बनाने के लिए बूटस्ट्रैप फ्रेमवर्क का उपयोग करना

जब हम एक हिंडोला के बारे में सोचते हैं, तो आम तौर पर जो मन में आता है वह मनोरंजन पार्क की सवारी है जिसे आप एक बच्चे के रूप में सवारी कर सकते हैं - एक बड़ा मंच जो रंगीन मीरा-गो-राउंड घोड़ों के साथ घूमता है जो सवारी की प्रगति के रूप में ऊपर और नीचे जाते हैं।

बूटस्ट्रैप हिंडोला मजेदार निष्पक्ष किस्म नहीं है जिसे हम एक बच्चे के रूप में जानते हैं, लेकिन अवधारणा में समानताएं हैं। यह आलेख समीक्षा करता है कि बूटस्ट्रैप के साथ शुरुआत कैसे करें, कैरोसेल यूआई तत्व क्या है, इसका उपयोग कब करना अच्छा होगा, और बूटस्ट्रैप ढांचे का उपयोग करके एक का निर्माण कैसे करें।

आरंभ करना

बूटस्ट्रैप हिंडोला स्थापित करने के लिए सबसे पहले हमें यह सुनिश्चित करना होगा कि हमारे पास उचित निर्भरताएं हैं। इसके लिए हमें Bootstrap, PopperJS और jQuery की जरूरत है। अपनी निर्भरता को अपनी परियोजना में जोड़ने में सहायता के लिए बूटस्ट्रैप के त्वरित प्रारंभ पृष्ठ पर एक नज़र डालें।

यह आपका निर्णय है कि आप निर्भरता की आवश्यकता को कैसे संभालते हैं, लेकिन jQuery, Popper.js और बूटस्ट्रैप के लिए सामग्री वितरण नेटवर्क - सीडीएन - का उपयोग करना सबसे आसान, अधिक शुरुआती-अनुकूल तरीका है। अपने <script> . के क्रम से सावधान रहें टैग - आदेश यहाँ मायने रखता है।

अब आप आरंभ करने के लिए तैयार हैं!

हिंडोला बनाने के लिए बूटस्ट्रैप दस्तावेज़ीकरण का उपयोग करना

Introduction/Getting Started . के बाईं ओर पृष्ठ, आप एक साइडबार देखते हैं जो विभिन्न चीजों से जुड़ता है। Components के लिए एक नज़र डालें लिंक करें और उस पर क्लिक करें। यह आपको बूटस्ट्रैप के कई उपलब्ध घटकों में से सबसे पहले नेविगेट करेगा:Alerts . यदि हम फिर से साइडबार पर एक नज़र डालते हैं, तो यह अब हमारे लिए उपलब्ध सभी विभिन्न घटकों के अलग-अलग लिंक दिखाता है।

Carousel पर क्लिक करें आरंभ करने के लिए घटक। इसमें वह जानकारी होगी जो हमें चाहिए।

यह कैसे काम करता है

जैसे ही यह एक स्लाइड से दूसरी स्लाइड पर जाता है, बूटस्ट्रैप कैरोसेल को संचालित करने के लिए CSS ट्रांसफॉर्म प्रॉपर्टी और कुछ जावास्क्रिप्ट का लाभ उठाता है। सबसे बुनियादी हिंडोला छवियों या मार्कअप की एक श्रृंखला है जो एक निर्धारित समय के बाद एक से दूसरे में जाती है।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

मूल संरचना

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Bootstrap Navbar</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
   crossorigin="anonymous">
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
 </button>
 
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
   <ul class="navbar-nav mr-auto">
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Bootcamps
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Popular Bootcamps</a>
         <a class="dropdown-item" href="#">Bootcamp Prep</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Bootcamp Financing</a>
         <a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a>
 
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Coding
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Coding Tools</a>
         <a class="dropdown-item" href="#">Git</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">HTML</a>
         <a class="dropdown-item" href="#">CSS</a>
         <a class="dropdown-item" href="#">JS</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Python</a>
         <a class="dropdown-item" href="#">Ruby</a>
         <a class="dropdown-item" href="#">C++</a>
         <a class="dropdown-item" href="#">Java</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Career Resources
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item smallcaps" href="#">Career Advice</a>
         <a class="dropdown-item smallcaps" href="#">Interviews</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item smallcaps" href="#">Tech Cities</a>
         <a class="dropdown-item smallcaps" href="#">Tech Salaries</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Tech Fields
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Web Design</a>
         <a class="dropdown-item" href="#">Web Development</a>
         <a class="dropdown-item" href="#">Software Engineering</a>
         <a class="dropdown-item" href="#">Data Science</a>
       </div>
     </li>
     <li class="nav-item">
       <a class="nav-link smallcaps" href="#">News & Commentary</a>
     </li>
   </ul>
   <form class="form-inline my-2 my-lg-0">
     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
   </form>
 </div>
 </nav>
 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">
   <div class="carousel-inner">
     <div class="carousel-item active">
         <img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="...">
     </div>
     <div class="carousel-item"><img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="...">
     </div>
     <div class="carousel-item">
       <img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="...">
     </div>
   </div>
 </div>
 
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   <script src="script.js"></script>
 </body>
</html>

यहां ऊपर देखी गई कुछ विशेषताएं दी गई हैं कि आप अपने और उनके अर्थों के लिए नए हो सकते हैं:

विशेषता अर्थ
डेटा-सवारी=“हिंडोला” पृष्ठ लोड होने पर एनिमेट करें.
डेटा-अंतराल=“गलत | [संख्या एमएस में]” गलत पर सेट होने पर, हिंडोला स्वचालित रूप से चक्रित नहीं होता है। अन्यथा, यह मिलीसेकंड में संख्या के आधार पर चक्र करता है।
डेटा-पॉज़ ="होवर" जब उपयोगकर्ता हिंडोला पर होवर करता है, तो कैरोसेल वर्तमान सक्रिय छवि पर रुक जाएगा। माउसलीव पर, हिंडोला साइकिल चालन प्रक्रिया को फिर से शुरू करेगा।
वर्ग=“सक्रिय” यह जानने के लिए सक्रिय होना आवश्यक है कि कौन सी छवि दिखानी है।
वर्ग=“डी-ब्लॉक” डिस्प्ले:ब्लॉक;
वर्ग=“w-100” चौड़ाई:100%;

नियंत्रण के साथ

इस बुनियादी साइकलिंग संरचना के अलावा, बूटस्ट्रैप घटक के लिए हिंडोला नियंत्रण प्रदान करता है। यह वह जगह है जहाँ अधिकांश जावास्क्रिप्ट काम में आता है। जब उपयोगकर्ता नियंत्रणों पर क्लिक करता है तो बूटस्ट्रैप हिंडोला संचालित करने के लिए अपने जावास्क्रिप्ट उपयोग कार्यों का उपयोग करता है।

नीचे दिए गए इस कोड स्निपेट में, आपको छवि के दोनों ओर एक पिछला और अगला तीर दिखाई देगा। पहले की तरह काम करने के अलावा (एक टाइमर पर), यदि उपयोगकर्ता किसी एक तीर पर क्लिक करता है तो छवि बदल जाएगी। 

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Bootstrap Navbar</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
   crossorigin="anonymous">
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
 </button>
 
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
   <ul class="navbar-nav mr-auto">
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Bootcamps
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Popular Bootcamps</a>
         <a class="dropdown-item" href="#">Bootcamp Prep</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Bootcamp Financing</a>
         <a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a>
 
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Coding
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Coding Tools</a>
         <a class="dropdown-item" href="#">Git</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">HTML</a>
         <a class="dropdown-item" href="#">CSS</a>
         <a class="dropdown-item" href="#">JS</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Python</a>
         <a class="dropdown-item" href="#">Ruby</a>
         <a class="dropdown-item" href="#">C++</a>
         <a class="dropdown-item" href="#">Java</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Career Resources
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item smallcaps" href="#">Career Advice</a>
         <a class="dropdown-item smallcaps" href="#">Interviews</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item smallcaps" href="#">Tech Cities</a>
         <a class="dropdown-item smallcaps" href="#">Tech Salaries</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Tech Fields
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Web Design</a>
         <a class="dropdown-item" href="#">Web Development</a>
         <a class="dropdown-item" href="#">Software Engineering</a>
         <a class="dropdown-item" href="#">Data Science</a>
       </div>
     </li>
     <li class="nav-item">
       <a class="nav-link smallcaps" href="#">News & Commentary</a>
     </li>
   </ul>
   <form class="form-inline my-2 my-lg-0">
     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
   </form>
 </div>
 </nav>
 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">
 <div class="carousel-inner">
   <div class="carousel-item active">
         <img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="...">
   </div>
   <div class="carousel-item">
       <img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="...">
   </div>
   <div class="carousel-item">
       <img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="...">
   </div>
 </div>
 <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
 </a>
 <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
 </a>
</div>
 
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   <script src="script.js"></script>
 </body>
</html>

नियंत्रणों के काम करने के तरीके के बारे में समझने की बड़ी बात यह है कि href को हिंडोला के समग्र div की अद्वितीय आईडी से मेल खाना चाहिए।

अगला नियंत्रण:

<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">

हिंडोला का सबसे बाहरी कंटेनर:

 <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

लिंक के काम करने के लिए हाइलाइट किए गए क्षेत्रों का मिलान होना चाहिए।

संकेतकों के साथ

हिंडोला के साइकलिंग को संचालित करने के लिए नियंत्रणों का उपयोग करने के अलावा, आप अपने हिंडोला में कितने ब्लॉक तत्व हैं यह दिखा कर बता सकते हैं कि आप किस छवि पर हैं। इनका उपयोग नियंत्रणों के साथ मिलकर किया जा सकता है। 

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Bootstrap Navbar</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
   crossorigin="anonymous">
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
 </button>
 
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
   <ul class="navbar-nav mr-auto">
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Bootcamps
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Popular Bootcamps</a>
         <a class="dropdown-item" href="#">Bootcamp Prep</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Bootcamp Financing</a>
         <a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a>
 
       </div>
     </li>
     <li class="nav-item dropdown">lid
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Coding
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Coding Tools</a>
         <a class="dropdown-item" href="#">Git</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">HTML</a>
         <a class="dropdown-item" href="#">CSS</a>
         <a class="dropdown-item" href="#">JS</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Python</a>
         <a class="dropdown-item" href="#">Ruby</a>
         <a class="dropdown-item" href="#">C++</a>
         <a class="dropdown-item" href="#">Java</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Career Resources
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item smallcaps" href="#">Career Advice</a>
         <a class="dropdown-item smallcaps" href="#">Interviews</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item smallcaps" href="#">Tech Cities</a>
         <a class="dropdown-item smallcaps" href="#">Tech Salaries</a>
       </div>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Tech Fields
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Web Design</a>
         <a class="dropdown-item" href="#">Web Development</a>
         <a class="dropdown-item" href="#">Software Engineering</a>
         <a class="dropdown-item" href="#">Data Science</a>
       </div>
     </li>
     <li class="nav-item">
       <a class="nav-link smallcaps" href="#">News & Commentary</a>
     </li>
   </ul>
   <form class="form-inline my-2 my-lg-0">
     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
   </form>
 </div>
 </nav>
 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">
 <ol class="carousel-indicators">
   <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
   <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
   <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
 </ol>
 <div class="carousel-inner">
   <div class="carousel-item active">
         <img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="...">
   </div>
   <div class="carousel-item">
       <img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="...">
   </div>
   <div class="carousel-item">
       <img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="...">
   </div>
 </div>
 <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
 </a>
 <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
 </a>
</div>
 
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   <script src="script.js"></script>
 </body>
</html>

उपरोक्त कोड स्निपेट में क्रमित सूची संकेतक प्रदर्शित करती है। सक्रिय वर्ग carousel-items . में सक्रिय वर्ग से मेल खाता है .

निष्कर्ष

यह पहली बार में पचाने के लिए बहुत सारी जानकारी की तरह लग सकता है। याद रखने वाली मुख्य बात केवल दस्तावेज़ीकरण का पालन करना है। जरूरी नहीं कि यह याद रखने की जरूरत है कि यह कैसे करना है जब दस्तावेज इतनी अच्छी तरह से लिखा और विस्तृत है।

बूटस्ट्रैप के अंत में सब कुछ कैसे काम करता है, इसके बारे में जागरूक होना निश्चित रूप से एक अच्छा विचार है - उस छोटी सी सीएसएस और जेएस फ़ाइल पर एक नज़र डालें यदि आपके पास यह देखने का समय है कि उनके पास बूटस्ट्रैप में तत्वों को कैसे स्टाइल और स्क्रिप्ट किया गया है। साथ ही, कम से कम इस बात से अवगत रहें कि उदाहरण कोड में सभी विशेषताओं का क्या अर्थ है ताकि आप इसे अपनी आवश्यकताओं के अनुरूप बना सकें और इसे अपने प्रोजेक्ट में उपयोग कर सकें।

एक अंतिम बात:ध्यान रखें कि हिंडोला घटक पहुंच के मामले में उपयोग करने के लिए सबसे अच्छा नहीं हो सकता है। अपने पृष्ठ को यथासंभव सुलभ बनाना जारी रखना सुनिश्चित करें और अपने हिंडोला में ऐसी जानकारी का उपयोग न करें जो कहीं और न मिल सके।

शुभकामनाएँ क्योंकि आप बूटस्ट्रैप का उपयोग करने में अपनी यात्रा जारी रखते हैं!


  1. सीएसएस का उपयोग करके आइकन के साथ फॉर्म कैसे बनाएं?

    आइकनों के साथ एक फॉर्म बनाने के लिए निम्नलिखित कोड है - उदाहरण body { font-family:Segoe UI, ताहोमा, जिनेवा, वर्दाना , सेन्स-सेरिफ़;}* {बॉक्स-साइज़िंग:बॉर्डर-बॉक्स;}h1 {पाठ-संरेखण:केंद्र;}फ़ॉर्म {अधिकतम-चौड़ाई:500px; मार्जिन:ऑटो;}। फील्डकंटेनर {डिस्प्ले:फ्लेक्स; चौड़ाई:100%; मार्जिन-बॉटम:15पीएक्स;}.आ

  1. विंडोज़ पर कमांड प्रॉम्प्ट का उपयोग करके पुनर्स्थापना बिंदु कैसे बनाएं

    यदि आपके विंडोज पीसी में समस्या आ रही है, तो आप अपने कंप्यूटर को बिना किसी समस्या के काम करते समय पहले वाले पुनर्स्थापना बिंदु पर पुनर्स्थापित कर सकते हैं। विंडोज 11 और 10 में सिस्टम रिस्टोर डायलॉग का उपयोग करके एक रिस्टोर पॉइंट बनाना आसान है। लेकिन अगर आप नियमित रूप से एक बनाना चाहते हैं, तो इसे कर

  1. टिंकर में OptionMenu विजेट का उपयोग करके फ़ंक्शन को कैसे कॉल करें?

    आइए एक उदाहरण लें और देखें कि टिंकर में OptionMenu विजेट का उपयोग करके फ़ंक्शन को कैसे कॉल करें। उदाहरण में, हम एक StringVar . का उपयोग करेंगे ऑब्जेक्ट और इसकी get() विधि को कॉल करें। एक स्ट्रिंगवार टिंकर में ऑब्जेक्ट विजेट के मूल्य को प्रबंधित करने में मदद कर सकता है। हम एक OptionMenu विजेट बनाएंग