Bootstrap का पहला Page
एक पहला page HTML5 skeleton, CDN links, एक container, और कुछ components combine करता है।
In this page:
Syntax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<!-- content -->
</body>
</html>पहला Bootstrap Page
viewport meta tag वाले standard HTML5 template से शुरू करें, Bootstrap CSS link add करें, फिर एक container, एक navbar, एक jumbotron-style section, और buttons से content बनाएँ। इसे एक .html file की तरह save करें और browser में खोलें।
Note:
Bootstrap का अपना starter template copy करने के लिए सबसे अच्छा skeleton है।
उदाहरण: First Bootstrap page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<nav class="navbar navbar-dark bg-dark">
<div class="container"><a class="navbar-brand" href="#">My First Page</a></div>
</nav>
<div class="container py-5">
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<h1 class="display-5 fw-bold">Welcome</h1>
<p class="fs-5">This page uses a navbar, a container, utilities and a button.</p>
<a class="btn btn-primary btn-lg" href="#">Get started</a>
</div>
</div>
</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. #}
आम गलतियां
- doctype missing होना
- container भूल जाना
- CSS को अपने CSS के बाद load करना
चैप्टर सारांश
- HTML5 skeleton इस्तेमाल करें
- viewport और CSS link add करें
- एक container के अंदर बनाएँ
- interactive parts के लिए JS bundle add करें
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: