Bootstrap CDN सेटअप
Bootstrap इस्तेमाल करने का सबसे quick तरीका इसके CSS और JavaScript files को अपने page में एक CDN से link करना है।
In this page:
Syntax
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>Bootstrap CDN Setup
यह tutorial Bootstrap 5.3.3 इस्तेमाल करता है। शुरू करने का सबसे quick तरीका jsDelivr CDN से Bootstrap link करना है, इसलिए install करने के लिए कुछ नहीं। आपको दो files चाहिए: CSS stylesheet head में जाती है, और JavaScript bundle closing body tag से ठीक पहले जाता है।
Bundle पहले से Popper शामिल करता है, जो dropdowns, popovers, और tooltips को चाहिए। viewport meta tag भी add करें ताकि page phones पर सही scale हो।
Note:
JavaScript bundle को body के अंत में load करें ताकि यह rendering block न करे।
उदाहरण: Bootstrap CDN setup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 5.3.3</title>
<!-- Bootstrap CSS (required) -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<h1 class="display-6">Bootstrap 5.3.3 is ready!</h1>
<p class="lead">CSS loaded from CDN.</p>
<button class="btn btn-primary">Primary Button</button>
</div>
<!-- Bootstrap JS Bundle with Popper (required for dropdowns, modals, tooltips) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- viewport meta tag भूल जाना
- dropdowns के लिए Popper के बिना JS file इस्तेमाल करना
- JS को इसके control करने वाले HTML से पहले load करना
चैप्टर सारांश
- head में bootstrap.min.css link करें
- </body> से पहले bootstrap.bundle.min.js load करें
- Bundle में Popper शामिल है
- viewport meta tag add करें
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: