ନାଭବାର୍ |
ବୁଟଷ୍ଟ୍ରାପ୍ ର ଶକ୍ତିଶାଳୀ, ପ୍ରତିକ୍ରିୟାଶୀଳ ନାଭିଗେସନ୍ ହେଡର୍, ନାଭବାର୍ ପାଇଁ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଏବଂ ଉଦାହରଣ | ଆମର ପତନ ପ୍ଲଗଇନ୍ ପାଇଁ ସମର୍ଥନ ଅନ୍ତର୍ଭୂକ୍ତ କରି ବ୍ରାଣ୍ଡିଂ, ନେଭିଗେସନ୍, ଏବଂ ଅଧିକ ପାଇଁ ସମର୍ଥନ ଅନ୍ତର୍ଭୂକ୍ତ କରେ |
ଏହା କିପରି କାମ କରେ |
ନାଭବାର୍ ସହିତ ଆରମ୍ଭ କରିବା ପୂର୍ବରୁ ଏଠାରେ ଯାହା ଜାଣିବା ଆବଶ୍ୟକ:
- ପ୍ରତିକ୍ରିୟାଶୀଳ ପତନ ଏବଂ ରଙ୍ଗ ସ୍କିମ୍ କ୍ଲାସ୍ ପାଇଁ ନାଭବାର୍ଗୁଡ଼ିକ ଏକ ଗୁଡ଼େଇ ଆବଶ୍ୟକ କରେ
.navbar|.navbar-expand{-sm|-md|-lg|-xl|-xxl} - ନାଭବର୍ ଏବଂ ସେମାନଙ୍କର ବିଷୟବସ୍ତୁ ଡିଫଲ୍ଟ ଭାବରେ ତରଳ ଅଟେ | ବିଭିନ୍ନ ଉପାୟରେ ସେମାନଙ୍କର ଭୂସମାନ୍ତର ମୋଟେଇକୁ ସୀମିତ କରିବାକୁ ପାତ୍ରକୁ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |
- ନାଭବର୍ ମଧ୍ୟରେ ବ୍ୟବଧାନ ଏବଂ ଆଲାଇନ୍ମେଣ୍ଟକୁ ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ ଆମର ବ୍ୟବଧାନ ଏବଂ ଫ୍ଲେକ୍ସ ୟୁଟିଲିଟି କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ |
- ନାଭବର୍ ଗୁଡିକ ଡିଫଲ୍ଟ ଭାବରେ ପ୍ରତିକ୍ରିୟାଶୀଳ, କିନ୍ତୁ ଏହାକୁ ପରିବର୍ତ୍ତନ କରିବା ପାଇଁ ଆପଣ ସେମାନଙ୍କୁ ସହଜରେ ରୂପାନ୍ତର କରିପାରିବେ | ପ୍ରତିକ୍ରିୟାଶୀଳ ଆଚରଣ ଆମର କ୍ଲାସ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ଉପରେ ନିର୍ଭର କରେ |
- ଏକ ଉପାଦାନ ବ୍ୟବହାର କରି ଆକ୍ସେସିବିଲିଟି ସୁନିଶ୍ଚିତ କରନ୍ତୁ
<nav>କିମ୍ବା, ଯଦି ଅଧିକ ଜେନେରିକ୍ ଉପାଦାନ ବ୍ୟବହାର କରନ୍ତି, ଯେପରି , ପ୍ରତ୍ୟେକ ଟେକ୍ନୋଲୋଜିରେ ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ଏକ ଲ୍ୟାଣ୍ଡମାର୍କ ଅଞ୍ଚଳ ଭାବରେ ସ୍ପଷ୍ଟ ଭାବରେ ଚିହ୍ନଟ କରିବାକୁ ପ୍ରତ୍ୟେକ ନାଭବାରରେ<div>ଏକ ଯୋଗ କରନ୍ତୁ |role="navigation" aria-current="page"ସାମ୍ପ୍ରତିକ ପୃଷ୍ଠାaria-current="true"ପାଇଁ କିମ୍ବା ଏକ ସେଟ୍ ରେ ସାମ୍ପ୍ରତିକ ଆଇଟମ୍ ପାଇଁ ବ୍ୟବହାର କରି ସାମ୍ପ୍ରତିକ ଆଇଟମ୍ ସୂଚାନ୍ତୁ |- V5.2.0 ରେ ନୂତନ: ନାଭବାର୍ ଗୁଡିକ CSS ଭେରିଏବଲ୍ ସହିତ ଥିମ୍ ହୋଇପାରିବ ଯାହା
.navbarବେସ୍ କ୍ଲାସ୍କୁ ସ୍କୋପ୍ ହୋଇଛି |.navbar-lightପୁରୁଣା ହୋଇଛି ଏବଂ.navbar-darkଅତିରିକ୍ତ ଶ yles ଳୀ ଯୋଡିବା ପରିବର୍ତ୍ତେ CSS ଭେରିଏବଲ୍ ଗୁଡିକୁ ନବଲିଖନ କରିବାକୁ ପୁନ r ଲିଖନ କରାଯାଇଛି |
prefers-reduced-motionମିଡିଆ ଜିଜ୍ଞାସା ଉପରେ ନିର୍ଭରଶୀଳ | ଆମର ଆକ୍ସେସିବିଲିଟି ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ର ହ୍ରାସ ହୋଇଥିବା ଗତି ବିଭାଗ ଦେଖନ୍ତୁ
|
ସମର୍ଥିତ ବିଷୟବସ୍ତୁ |
ହାତଗଣତି କିଛି ଉପ-ଉପାଦାନ ପାଇଁ ନାଭବର୍ସ ବିଲ୍ଟ-ଇନ୍ ସମର୍ଥନ ସହିତ ଆସିଥାଏ | ଆବଶ୍ୟକ ଅନୁଯାୟୀ ନିମ୍ନରୁ ବାଛନ୍ତୁ:
.navbar-brandଆପଣଙ୍କ କମ୍ପାନୀ, ଉତ୍ପାଦ, କିମ୍ବା ପ୍ରକଳ୍ପ ନାମ ପାଇଁ |.navbar-navଏକ ପୂର୍ଣ୍ଣ ଉଚ୍ଚତା ଏବଂ ହାଲୁକା ନାଭିଗେସନ୍ ପାଇଁ (ଡ୍ରପଡାଉନ୍ ପାଇଁ ସମର୍ଥନ ଅନ୍ତର୍ଭୂକ୍ତ କରି) |.navbar-togglerଆମର ପତନ ପ୍ଲଗଇନ୍ ଏବଂ ଅନ୍ୟାନ୍ୟ ନାଭିଗେସନ୍ ଟୋଗଲ୍ ଆଚରଣ ସହିତ ବ୍ୟବହାର ପାଇଁ |- ଯେକ form ଣସି ଫର୍ମ ନିୟନ୍ତ୍ରଣ ଏବଂ କାର୍ଯ୍ୟ ପାଇଁ ଫ୍ଲେକ୍ସ ଏବଂ ସ୍ପେସ୍ ଉପଯୋଗିତା |
.navbar-textପାଠ୍ୟର ଭୂଲମ୍ବ ଭାବରେ କେନ୍ଦ୍ରିତ ଷ୍ଟ୍ରିଙ୍ଗ୍ ଯୋଡିବା ପାଇଁ |.collapse.navbar-collapseପ୍ୟାରେଣ୍ଟ୍ ବ୍ରେକପଏଣ୍ଟ ଦ୍ୱାରା ନାଭବାର୍ ବିଷୟବସ୍ତୁକୁ ଗ୍ରୁପ୍ କରିବା ଏବଂ ଲୁଚାଇବା ପାଇଁ |.navbar-scrollଏକ ସେଟ୍ କରିବାକୁmax-heightଏବଂ ଏକ ବିସ୍ତାରିତ ନାଭବାର୍ ବିଷୟବସ୍ତୁକୁ ସ୍କ୍ରୋଲ୍ କରିବାକୁ ଏକ ଇଚ୍ଛାଧୀନ ଯୋଗକର |
ଏକ ପ୍ରତିକ୍ରିୟାଶୀଳ ଆଲୋକ-ଥିମ୍ ନାଭବାରରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଥିବା ସମସ୍ତ ଉପ-ଉପାଦାନଗୁଡ଼ିକର ଏକ ଉଦାହରଣ ଏଠାରେ ଅଛି ଯାହା ସ୍ୱୟଂଚାଳିତ ଭାବରେ lg(ବଡ଼) ବ୍ରେକପଏଣ୍ଟରେ ଖସିଯାଏ |
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>ଏହି ଉଦାହରଣ ପୃଷ୍ଠଭୂମି ( bg-light) ଏବଂ ବ୍ୟବଧାନ ( me-auto,,, ) ୟୁଟିଲିଟି କ୍ଲାସ୍ ବ୍ୟବହାର mb-2କରେ |mb-lg-0me-2
ବ୍ରାଣ୍ଡ
.navbar-brandଅଧିକାଂଶ ଉପାଦାନରେ ପ୍ରୟୋଗ କରାଯାଇପାରେ, କିନ୍ତୁ ଏକ ଆଙ୍କର୍ ସର୍ବୋତ୍ତମ କାର୍ଯ୍ୟ କରେ, କାରଣ କିଛି ଉପାଦାନଗୁଡ଼ିକ ଉପଯୋଗୀ ଶ୍ରେଣୀ କିମ୍ବା କଷ୍ଟମ୍ ଶ yles ଳୀ ଆବଶ୍ୟକ କରିପାରନ୍ତି |
ପାଠ
.navbar-brandକ୍ଲାସ୍ ସହିତ ଏକ ଉପାଦାନ ମଧ୍ୟରେ ତୁମର ପାଠ ଯୋଡ |
<!-- As a link -->
<nav class="navbar bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- As a heading -->
<nav class="navbar bg-light">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
</nav>ପ୍ରତିଛବି |
ଆପଣ ଟେକ୍ସଟ୍ .navbar-brandକୁ ଏକ ସହିତ ବଦଳାଇ ପାରିବେ <img>|
<nav class="navbar bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
</a>
</div>
</nav>ପ୍ରତିଛବି ଏବଂ ପାଠ
ଏକ ସମୟରେ ଏକ ପ୍ରତିଛବି ଏବଂ ପାଠ୍ୟ ଯୋଡିବା ପାଇଁ ଆପଣ କିଛି ଅତିରିକ୍ତ ଉପଯୋଗିତା ମଧ୍ୟ ବ୍ୟବହାର କରିପାରିବେ | ର ଯୋଗ .d-inline-blockଏବଂ .align-text-topଉପରେ ଧ୍ୟାନ ଦିଅନ୍ତୁ <img>|
<nav class="navbar bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
</nav>ନାଭ
ନାଭବାର୍ ନେଭିଗେସନ୍ ଲିଙ୍କଗୁଡିକ ଆମର ନିଜସ୍ mod .navମୋଡିଫାୟର୍ କ୍ଲାସ୍ ସହିତ ଆମର ଅପ୍ସନ୍ ଉପରେ ନିର୍ମାଣ କରେ ଏବଂ ସଠିକ୍ ପ୍ରତିକ୍ରିୟାଶୀଳ ଷ୍ଟାଇଲିଂ ପାଇଁ ଟୋଗଲର୍ ଶ୍ରେଣୀର ବ୍ୟବହାର ଆବଶ୍ୟକ କରେ | ନାଭବାରରେ ନାଭିଗେସନ୍ ମଧ୍ୟ ଆପଣଙ୍କର ନାଭବାର ବିଷୟବସ୍ତୁକୁ ସୁରକ୍ଷିତ ଭାବରେ ଆଲାଇନ୍ ରଖିବା ପାଇଁ ଯଥାସମ୍ଭବ ଭୂସମାନ୍ତର ସ୍ଥାନ ଦଖଲ କରିବାକୁ ବ grow ିବ |
ସାମ୍ପ୍ରତିକ ପୃଷ୍ଠା ସୂଚାଇବା ପାଇଁ .activeକ୍ଲାସ୍ ଯୋଡନ୍ତୁ |.nav-link
ଦୟାକରି ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଆପଣ aria-currentଆକ୍ଟିଭ୍ ଉପରେ ଆଟ୍ରିବ୍ୟୁଟ୍ ମଧ୍ୟ ଯୋଡିବା ଉଚିତ୍ .nav-link|
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>ଏବଂ ଯେହେତୁ ଆମେ ଆମର ନାଭ ପାଇଁ କ୍ଲାସ୍ ବ୍ୟବହାର କରୁ, ଆପଣ ଚାହିଁଲେ ଆପଣ ତାଲିକା-ଆଧାରିତ ପଦ୍ଧତିକୁ ସଂପୂର୍ଣ୍ଣ ଭାବରେ ଏଡାଇ ପାରିବେ |
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled">Disabled</a>
</div>
</div>
</div>
</nav>ଆପଣ ଆପଣଙ୍କର ନାଭବାରରେ ଡ୍ରପଡାଉନ୍ ମଧ୍ୟ ବ୍ୟବହାର କରିପାରିବେ | ଡ୍ରପଡାଉନ୍ ମେନୁଗୁଡିକ ପୋଜିସନ୍ ପାଇଁ ଏକ ରାପିଙ୍ଗ୍ ଉପାଦାନ ଆବଶ୍ୟକ କରେ, ତେଣୁ ନିମ୍ନରେ ଦେଖାଯାଇଥିବା ପରି ପୃଥକ .nav-itemଏବଂ ନଷ୍ଟ ହୋଇଥିବା ଉପାଦାନଗୁଡିକ ବ୍ୟବହାର କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |.nav-link
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>ଫର୍ମଗୁଡିକ
ବିଭିନ୍ନ ଫର୍ମ ନିୟନ୍ତ୍ରଣ ଏବଂ ଉପାଦାନଗୁଡ଼ିକୁ ଏକ ନାଭବାର ମଧ୍ୟରେ ରଖନ୍ତୁ:
<nav class="navbar bg-light">
<div class="container-fluid">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>ଫ୍ଲେକ୍ସ ଲେଆଉଟ୍ ବ୍ୟବହାରର ତୁରନ୍ତ ଶିଶୁ ଉପାଦାନଗୁଡ଼ିକ .navbarଏବଂ ଡିଫଲ୍ଟ ହେବ justify-content: space-between| ଏହି ଆଚରଣକୁ ସଜାଡ଼ିବା ପାଇଁ ଆବଶ୍ୟକ ଅନୁଯାୟୀ ଅତିରିକ୍ତ ଫ୍ଲେକ୍ସ ୟୁଟିଲିଟି ବ୍ୟବହାର କରନ୍ତୁ |
<nav class="navbar bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>ଇନପୁଟ୍ ଗୋଷ୍ଠୀଗୁଡିକ ମଧ୍ୟ କାମ କରେ | ଯଦି ଆପଣଙ୍କର ନାଭବାର୍ ଏକ ସମ୍ପୂର୍ଣ୍ଣ ଫର୍ମ, କିମ୍ବା ପ୍ରାୟତ a ଏକ ଫର୍ମ, ଆପଣ <form>ଉପାଦାନକୁ ପାତ୍ର ଭାବରେ ବ୍ୟବହାର କରିପାରିବେ ଏବଂ କିଛି HTML ସଂରକ୍ଷଣ କରିପାରିବେ |
<nav class="navbar bg-light">
<form class="container-fluid">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</form>
</nav>ବିଭିନ୍ନ ବଟନ୍ ଗୁଡିକ ମଧ୍ୟ ଏହି ନାଭବାର୍ ଫର୍ମଗୁଡିକର ଅଂଶ ଭାବରେ ସମର୍ଥିତ | ଏହା ମଧ୍ୟ ଏକ ଉତ୍ତମ ସ୍ମାରକ ଅଟେ ଯେ ଭୂଲମ୍ବ ଆଲାଇନ୍ମେଣ୍ଟ ୟୁଟିଲିଟିଗୁଡିକ ବିଭିନ୍ନ ଆକାରର ଉପାଦାନଗୁଡ଼ିକୁ ଆଲାଇନ୍ କରିବା ପାଇଁ ବ୍ୟବହୃତ ହୋଇପାରିବ |
<nav class="navbar bg-light">
<form class="container-fluid justify-content-start">
<button class="btn btn-outline-success me-2" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
</form>
</nav>ପାଠ
ନାଭବର୍ସ ସାହାଯ୍ୟରେ ବିଟ୍ ଟେକ୍ସଟ୍ ଧାରଣ କରିପାରେ .navbar-text| ଏହି କ୍ଲାସ୍ ଟେକ୍ସଟ୍ ଷ୍ଟ୍ରିଙ୍ଗ୍ ପାଇଁ ଭର୍ଟିକାଲ୍ ଆଲାଇନ୍ମେଣ୍ଟ୍ ଏବଂ ଭୂସମାନ୍ତର ବ୍ୟବଧାନକୁ ସଜାଡିଥାଏ |
<nav class="navbar bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>ଆବଶ୍ୟକ ଅନୁଯାୟୀ ଅନ୍ୟ ଉପାଦାନ ଏବଂ ଉପଯୋଗୀତା ସହିତ ମିଶ୍ରଣ ଏବଂ ମେଳ କରନ୍ତୁ |
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</div>
</nav>ରଙ୍ଗ ଯୋଜନା
.navbar-lightଏହାକୁ ପୁରୁଣା କରାଯାଇଛି | “ହାଲୁକା” ଦୃଶ୍ୟକୁ ଡିଫଲ୍ଟ କରି CSS ଭେରିଏବଲ୍ ଗୁଡିକ ପ୍ରୟୋଗ କରାଯାଏ
.navbar, ଏବଂ ଏହାକୁ ନବଲିଖନ କରାଯାଇପାରେ
.navbar-dark|
ସାସ୍ ଏବଂ CSS ଭେରିଏବଲ୍ ର ବୁଟଷ୍ଟ୍ରାପ୍ ର ମିଶ୍ରଣ ଯୋଗୁଁ ନାଭବାର୍ ଥିମ୍ ଗୁଡିକ ପୂର୍ବାପେକ୍ଷା ସହଜ | ହାଲୁକା ପୃଷ୍ଠଭୂମି ରଙ୍ଗ ସହିତ ବ୍ୟବହାର ପାଇଁ ଡିଫଲ୍ଟ ହେଉଛି ଆମର “ହାଲୁକା ନାଭବାର୍”, କିନ୍ତୁ ଆପଣ ଗା .navbar-darkdark ପୃଷ୍ଠଭୂମି ରଙ୍ଗ ପାଇଁ ମଧ୍ୟ ଆବେଦନ କରିପାରିବେ | ତାପରେ, .bg-*ଉପଯୋଗିତା ସହିତ କଷ୍ଟମାଇଜ୍ କରନ୍ତୁ |
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-dark bg-primary">
<!-- Navbar content -->
</nav>
<nav class="navbar" style="background-color: #e3f2fd;">
<!-- Navbar content -->
</nav>
ପାତ୍ରଗୁଡିକ |
.containerଯଦିଓ ଏହା ଆବଶ୍ୟକ ନୁହେଁ, ଆପଣ ଏହାକୁ ଏକ ପୃଷ୍ଠାରେ କେନ୍ଦ୍ର କରିବା ପାଇଁ ଏକ ନାଭବାର୍ ଗୁଡ଼ାଇ ପାରିବେ - ଯଦିଓ ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଏକ ଭିତର ପାତ୍ର ତଥାପି ଆବଶ୍ୟକ | କିମ୍ବା ଆପଣ କେବଳ ଏକ ସ୍ଥିର କିମ୍ବା ଷ୍ଟାଟିକ୍ ଟପ୍ ନାଭବାରର.navbar ବିଷୟବସ୍ତୁକୁ କେନ୍ଦ୍ର କରିବା ପାଇଁ ଏକ ପାତ୍ର ଧାରଣ କରିପାରିବେ |
<div class="container">
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
</div>ଆପଣଙ୍କର ନାଭବାର୍ ରେ ଥିବା ବିଷୟବସ୍ତୁ କେତେ ବିସ୍ତୃତ ଭାବରେ ପରିବର୍ତ୍ତନ କରିବାକୁ ଯେକ any ଣସି ପ୍ରତିକ୍ରିୟାଶୀଳ ପାତ୍ରଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ |
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>ସ୍ଥାନ
ଅଣ-ଷ୍ଟାଟିକ୍ ସ୍ଥିତିରେ ନାଭବାର୍ ରଖିବା ପାଇଁ ଆମର ପୋଜିସନ୍ ୟୁଟିଲିଟିଜ୍ ବ୍ୟବହାର କରନ୍ତୁ | ସ୍ଥିରରୁ ଉପର ପର୍ଯ୍ୟନ୍ତ ବାଛନ୍ତୁ, ତଳ ପର୍ଯ୍ୟନ୍ତ ସ୍ଥିର ହୋଇଛି, ଉପର ପର୍ଯ୍ୟନ୍ତ ଷ୍ଟିକ୍ ହୋଇଛି (ଏହା ଉପର ପର୍ଯ୍ୟନ୍ତ ପହଞ୍ଚିବା ପର୍ଯ୍ୟନ୍ତ ପୃଷ୍ଠା ସହିତ ସ୍କ୍ରୋଲ୍ କରନ୍ତୁ, ତାପରେ ସେଠାରେ ରୁହନ୍ତୁ), କିମ୍ବା ତଳ ପର୍ଯ୍ୟନ୍ତ ଷ୍ଟିକ୍ କରନ୍ତୁ (ଏହା ତଳ ପର୍ଯ୍ୟନ୍ତ ପହଞ୍ଚିବା ପର୍ଯ୍ୟନ୍ତ ପୃଷ୍ଠା ସହିତ ସ୍କ୍ରୋଲ୍ କରନ୍ତୁ, ତାପରେ ରହିଥାଏ | ସେଠାରେ)
ଫିକ୍ସଡ୍ ନାଭବାର୍ ବ୍ୟବହାର position: fixed, ଅର୍ଥାତ୍ ସେମାନେ DOM ର ସାଧାରଣ ପ୍ରବାହରୁ ଟାଣି ହୋଇଥାନ୍ତି ଏବଂ ଅନ୍ୟ ଉପାଦାନଗୁଡ଼ିକ ସହିତ ଓଭରଲେପ୍ ରୋକିବା ପାଇଁ କଷ୍ଟମ୍ CSS (ଉଦାହରଣ ସ୍ୱରୂପ) padding-topଆବଶ୍ୟକ କରିପାରନ୍ତି |<body>
<nav class="navbar bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Default</a>
</div>
</nav><nav class="navbar fixed-top bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed top</a>
</div>
</nav><nav class="navbar fixed-bottom bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed bottom</a>
</div>
</nav><nav class="navbar sticky-top bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky top</a>
</div>
</nav><nav class="navbar sticky-bottom bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky bottom</a>
</div>
</nav>ସ୍କ୍ରୋଲିଂ
ଏକ ନଷ୍ଟ ହୋଇଯାଇଥିବା ନାଭବାରର ଟୋଗଲ୍ ଯୋଗ୍ୟ ବିଷୟବସ୍ତୁ ମଧ୍ୟରେ ଭୂଲମ୍ବ ସ୍କ୍ରୋଲିଂକୁ ସକ୍ଷମ .navbar-nav-scrollକରିବାକୁ ଏକ .navbar-nav(କିମ୍ବା ଅନ୍ୟ ନାଭବାର୍ ଉପ-ଉପାଦାନ) କୁ ଯୋଡନ୍ତୁ | ଡିଫଲ୍ଟ ଭାବରେ, ସ୍କ୍ରୋଲିଂ କିକ୍ 75vh(କିମ୍ବା ଭ୍ୟୁପୋର୍ଟର ଉଚ୍ଚତାର 75%), କିନ୍ତୁ ଆପଣ ଏହାକୁ ସ୍ଥାନୀୟ CSS କଷ୍ଟମ୍ ପ୍ରପର୍ଟି --bs-navbar-heightକିମ୍ବା କଷ୍ଟମ୍ ଷ୍ଟାଇଲ୍ ସହିତ ନବଲିଖନ କରିପାରିବେ | ବୃହତ ଦୃଶ୍ୟରେ ଯେତେବେଳେ ନାଭବାର୍ ବିସ୍ତାର ହୁଏ, ବିଷୟବସ୍ତୁ ଏକ ଡିଫଲ୍ଟ ନାଭବାର୍ ପରି ଦେଖାଯିବ |
ଦୟାକରି ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଏହି ଆଚରଣର ଏକ ସମ୍ଭାବ୍ୟ ଅସୁବିଧା ସହିତ ଆସିଥାଏ overflow- ଯେତେବେଳେ ସେଟିଂ overflow-y: auto(ଏଠାରେ ବିଷୟବସ୍ତୁକୁ ସ୍କ୍ରୋଲ୍ କରିବା ଆବଶ୍ୟକ), overflow-xସମାନ auto, ଯାହା କିଛି ଭୂସମାନ୍ତର ବିଷୟବସ୍ତୁ କ୍ରପ୍ କରିବ |
ସର୍ବୋତ୍କୃଷ୍ଟ ବ୍ୟବଧାନ ପାଇଁ କିଛି ଅତିରିକ୍ତ ମାର୍ଜିନ୍ ଉପଯୋଗିତା ସହିତ .navbar-nav-scrollଏଠାରେ ବ୍ୟବହାର କରୁଥିବା ଏକ ଉଦାହରଣ ନାଭବାର୍ |style="--bs-scroll-height: 100px;"
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Link</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>ପ୍ରତିକ୍ରିୟାଶୀଳ ଆଚରଣ |
ଏକ ବଟନ୍ ପଛରେ ସେମାନଙ୍କର ବିଷୟବସ୍ତୁ କେବେ ନଷ୍ଟ ହୁଏ ତାହା ନିର୍ଣ୍ଣୟ କରିବାକୁ ନାଭବାର୍ ବ୍ୟବହାର କରିପାରିବ .navbar-toggler, .navbar-collapseଏବଂ .navbar-expand{-sm|-md|-lg|-xl|-xxl}ଶ୍ରେଣୀଗୁଡିକ | ଅନ୍ୟାନ୍ୟ ଉପଯୋଗିତା ସହିତ ମିଶ୍ରଣରେ, ଆପଣ ନିର୍ଦ୍ଦିଷ୍ଟ ଉପାଦାନଗୁଡ଼ିକୁ କେବେ ଦେଖାଇବେ କିମ୍ବା ଲୁଚାଇ ପାରିବେ ତାହା ସହଜରେ ବାଛିପାରିବେ |
ନାଭବର୍ ପାଇଁ ଯାହା କେବେ ବି ନଷ୍ଟ ହୁଏ ନାହିଁ, ନାଭବାରରେ .navbar-expandକ୍ଲାସ୍ ଯୋଡନ୍ତୁ | ନାଭବର୍ ପାଇଁ ଯାହା ସର୍ବଦା ଭୁଶୁଡି ପଡେ, କ any ଣସି .navbar-expandଶ୍ରେଣୀ ଯୋଡନ୍ତୁ ନାହିଁ |
ଟୋଗଲର୍ |
ନାଭବାର୍ ଟୋଗଲର୍ ଗୁଡିକ ଡିଫଲ୍ଟ ଭାବରେ ବାମ-ଆଲାଇନ୍ ହୋଇଛି, କିନ୍ତୁ ଯଦି ସେମାନେ ଏକ ଭାଇଭାଇନ୍ ଉପାଦାନକୁ ଅନୁସରଣ କରନ୍ତି .navbar-brand, ସେମାନେ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଦୂର ଡାହାଣକୁ ଆଲାଇନ୍ ହୋଇଯିବେ | ତୁମର ମାର୍କଅପ୍ ଓଲଟାଇବା ଟୋଗଲରର ସ୍ଥାନକୁ ଓଲଟାଇବ | ନିମ୍ନରେ ବିଭିନ୍ନ ଟୋଗଲ୍ ଶ yles ଳୀର ଉଦାହରଣ ଦିଆଯାଇଛି |
.navbar-brandଛୋଟ ବ୍ରେକପଏଣ୍ଟରେ କ shown ଣସି ଦେଖାଯାଇ ନାହିଁ:
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>ବାମରେ ଦେଖାଯାଇଥିବା ଏକ ବ୍ରାଣ୍ଡ ନାମ ଏବଂ ଡାହାଣରେ ଟୋଗଲର୍:
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>ବାମ ପାର୍ଶ୍ୱରେ ଏକ ଟୋଗଲର୍ ଏବଂ ଡାହାଣରେ ବ୍ରାଣ୍ଡ ନାମ ସହିତ:
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>ବାହ୍ୟ ବିଷୟବସ୍ତୁ |
ବେଳେବେଳେ ତୁମେ କ୍ଲାସ୍ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରିବାକୁ ଚାହୁଁଛ ଯାହା ବିଷୟବସ୍ତୁ ପାଇଁ ଏକ ଧାରଣକାରୀ ଉପାଦାନକୁ ଟ୍ରିଗର୍ କରିଥାଏ ଯାହା ଗଠନମୂଳକ ଭାବରେ ବାହାରେ ବସିଥାଏ .navbar| କାରଣ ଆମର ପ୍ଲଗଇନ୍ idଏବଂ data-bs-targetମେଳଣରେ କାମ କରେ, ତାହା ସହଜରେ ହୋଇଯାଏ!
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>ଯେତେବେଳେ ଆପଣ ଏହା କରନ୍ତି, ଆମେ ଖୋଲିବା ସମୟରେ ଫୋକସକୁ ପ୍ରୋଗ୍ରାମେଟିକ୍ ଭାବରେ କଣ୍ଟେନରକୁ ସ୍ଥାନାନ୍ତର କରିବାକୁ ଅତିରିକ୍ତ ଜାଭାସ୍କ୍ରିପ୍ଟ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ସୁପାରିଶ କରୁ | ଅନ୍ୟଥା, କୀବୋର୍ଡ୍ ଉପଭୋକ୍ତା ଏବଂ ସହାୟକ ପ୍ରଯୁକ୍ତିର ଉପଭୋକ୍ତାମାନେ ନୂତନ ଭାବରେ ପ୍ରକାଶିତ ବିଷୟବସ୍ତୁ ଖୋଜିବାରେ କଷ୍ଟ ଅନୁଭବ କରିବେ - ବିଶେଷତ if ଯଦି ଖୋଲାଯାଇଥିବା ପାତ୍ରଟି ଡକ୍ୟୁମେଣ୍ଟର ସଂରଚନାରେ ଟୋଗଲର୍ ପୂର୍ବରୁ ଆସେ | ବିଷୟବସ୍ତୁ ପାତ୍ରର ବିଷୟବସ୍ତୁକୁ aria-controlsସୂଚାଇ ଟୋଗଲରର ଗୁଣ ଅଛି ବୋଲି ଆମେ ନିଶ୍ଚିତ କରିବାକୁ ମଧ୍ୟ ସୁପାରିଶ କରୁ | idସିଦ୍ଧାନ୍ତରେ, ଏହା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ଉପଭୋକ୍ତାମାନଙ୍କୁ ଟୋଗଲର୍ ଠାରୁ ନିୟନ୍ତ୍ରଣ କରୁଥିବା ପାତ୍ରକୁ ସିଧାସଳଖ ଡେଇଁବାକୁ ଅନୁମତି ଦିଏ - କିନ୍ତୁ ଏଥିପାଇଁ ସମର୍ଥନ ବର୍ତ୍ତମାନ ପ୍ୟାଚି ଅଟେ |
ଅଫକାନଭାସ୍ |
ଅଫକାନଭାସ୍ ଉପାଦାନ ସହିତ ଆପଣଙ୍କର ବିସ୍ତାରିତ ଏବଂ ଭୁଶୁଡ଼ୁଥିବା ନାଭବାର୍କୁ ଏକ ଅଫକାନଭାସ୍ ଡ୍ରୟରରେ ରୂପାନ୍ତର କରନ୍ତୁ | ଆମେ ଉଭୟ ଅଫକାନଭାସ୍ ଡିଫଲ୍ଟ ଶ yles ଳୀକୁ ବିସ୍ତାର କରୁ ଏବଂ .navbar-expand-*ଏକ ଗତିଶୀଳ ଏବଂ ନମନୀୟ ନାଭିଗେସନ୍ ପାର୍ଶ୍ୱ ପଟି ସୃଷ୍ଟି କରିବାକୁ ଆମର ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରୁ |
ନିମ୍ନରେ ଥିବା ଉଦାହରଣରେ, ଏକ ଅଫକାନଭାସ୍ ନାଭବାର୍ ସୃଷ୍ଟି କରିବାକୁ ଯାହା ସର୍ବଦା ସମସ୍ତ ବ୍ରେକପଏଣ୍ଟରେ ଭୁଶୁଡି ପଡେ, .navbar-expand-*ଶ୍ରେଣୀକୁ ସଂପୂର୍ଣ୍ଣ ଛାଡିଦିଅ |
<nav class="navbar bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</nav>ଏକ ଅଫକାନଭାସ୍ ନାଭବାର୍ ସୃଷ୍ଟି କରିବାକୁ ଯାହା ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ବ୍ରେକପଏଣ୍ଟରେ ଏକ ସାଧାରଣ ନାଭବାରରେ ବିସ୍ତାର ହୁଏ lg, ବ୍ୟବହାର କରନ୍ତୁ .navbar-expand-lg|
<nav class="navbar navbar-expand-lg bg-light fixed-top">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
...
</div>
</nav>
ଏକ ଅନ୍ଧାର ନାଭବାରରେ ଅଫକାନଭାସ୍ ବ୍ୟବହାର କରିବାବେଳେ, ସଚେତନ ରୁହନ୍ତୁ ଯେ ପାଠ୍ୟ ଅବ g ଧ ନହେବା ପାଇଁ ଆପଣଙ୍କୁ ଅଫକାନଭାସ୍ ବିଷୟବସ୍ତୁ ଉପରେ ଏକ ଅନ୍ଧକାର ପୃଷ୍ଠଭୂମି ରହିବା ଆବଶ୍ୟକ | ନିମ୍ନରେ ଥିବା ଉଦାହରଣରେ, ଆମେ , .navbar-darkଏବଂ , .bg-darkକୁ , ଏବଂ, ଏବଂ ଏକ ଗା dark ଼ ଅଫକାନଭାସ୍ ସହିତ ସଠିକ୍ ଷ୍ଟାଇଲ୍ ପାଇଁ ଯୋଗ କରୁ |.navbar.text-bg-dark.offcanvas.dropdown-menu-dark.dropdown-menu.btn-close-white.btn-close
<nav class="navbar navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas dark navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</nav>CSS
ଭେରିଏବଲ୍ |
V5.2.0 ରେ ଯୋଡା ଯାଇଛି |ବୁଟଷ୍ଟ୍ରାପ୍ ର ବିକାଶଶୀଳ CSS ଭେରିଏବଲ୍ ପଦ୍ଧତିର ଏକ ଅଂଶ ଭାବରେ, ନାଭବର୍ଗୁଡ଼ିକ ବର୍ତ୍ତମାନ .navbarବର୍ଦ୍ଧିତ ରିଅଲ୍ ଟାଇମ୍ କଷ୍ଟମାଇଜେସନ୍ ପାଇଁ ସ୍ଥାନୀୟ CSS ଭେରିଏବଲ୍ ବ୍ୟବହାର କରନ୍ତି | CSS ଭେରିଏବଲ୍ ପାଇଁ ମୂଲ୍ୟଗୁଡ଼ିକ ସାସ୍ ମାଧ୍ୟମରେ ସେଟ୍ ହୋଇଛି, ତେଣୁ ସାସ୍ କଷ୍ଟୋମାଇଜେସନ୍ ମଧ୍ୟ ସମର୍ଥିତ |
--#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
--#{$prefix}navbar-padding-y: #{$navbar-padding-y};
--#{$prefix}navbar-color: #{$navbar-light-color};
--#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-light-active-color};
--#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
--#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
--#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
--#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
--#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
--#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
--#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
--#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
--#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
--#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
କିଛି ଅତିରିକ୍ତ CSS ଭେରିଏବଲ୍ ଗୁଡିକ ମଧ୍ୟ ଉପସ୍ଥିତ .navbar-nav:
--#{$prefix}nav-link-padding-x: 0;
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
--#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
--#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
CSS ଭେରିଏବଲ୍ ମାଧ୍ୟମରେ କଷ୍ଟୋମାଇଜେସନ୍ ଶ୍ରେଣୀରେ ଦେଖାଯାଇପାରେ .navbar-darkଯେଉଁଠାରେ ଆମେ ନକଲି CSS ଚୟନକର୍ତ୍ତା ଯୋଗ ନକରି ନିର୍ଦ୍ଦିଷ୍ଟ ମୂଲ୍ୟଗୁଡ଼ିକୁ ନବଲିଖନ କରିଥାଉ |
--#{$prefix}navbar-color: #{$navbar-dark-color};
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
--#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
--#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
ସାସ୍ ଭେରିଏବଲ୍ |
ସମସ୍ତ ନାଭବାର୍ ପାଇଁ ଭେରିଏବଲ୍:
$navbar-padding-y: $spacer * .5;
$navbar-padding-x: null;
$navbar-nav-link-padding-x: .5rem;
$navbar-brand-font-size: $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end: 1rem;
$navbar-toggler-padding-y: .25rem;
$navbar-toggler-padding-x: .75rem;
$navbar-toggler-font-size: $font-size-lg;
$navbar-toggler-border-radius: $btn-border-radius;
$navbar-toggler-focus-width: $btn-focus-width;
$navbar-toggler-transition: box-shadow .15s ease-in-out;
$navbar-light-color: rgba($black, .55);
$navbar-light-hover-color: rgba($black, .7);
$navbar-light-active-color: rgba($black, .9);
$navbar-light-disabled-color: rgba($black, .3);
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color: $navbar-light-active-color;
$navbar-light-brand-hover-color: $navbar-light-active-color;
ଗା dark ନାଭବାର୍ ପାଇଁ ଭେରିଏବଲ୍ :
$navbar-dark-color: rgba($white, .55);
$navbar-dark-hover-color: rgba($white, .75);
$navbar-dark-active-color: $white;
$navbar-dark-disabled-color: rgba($white, .25);
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color: rgba($white, .1);
$navbar-dark-brand-color: $navbar-dark-active-color;
$navbar-dark-brand-hover-color: $navbar-dark-active-color;
ସାସ୍ ଲୁପ୍ |
ପ୍ରତିକ୍ରିୟାଶୀଳ ନାଭବାର୍ ବିସ୍ତାର / ପତନ କ୍ଲାସ୍ (ଯଥା, .navbar-expand-lg) ମାନଚିତ୍ର ସହିତ ମିଳିତ ହୋଇ $breakpointsଏକ ଲୁପ୍ ମାଧ୍ୟମରେ ସୃଷ୍ଟି ହୁଏ scss/_navbar.scss|
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
// stylelint-disable-next-line scss/selector-no-union-class-name
&#{$infix} {
@include media-breakpoint-up($next) {
flex-wrap: nowrap;
justify-content: flex-start;
.navbar-nav {
flex-direction: row;
.dropdown-menu {
position: absolute;
}
.nav-link {
padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
}
}
.navbar-nav-scroll {
overflow: visible;
}
.navbar-collapse {
display: flex !important; // stylelint-disable-line declaration-no-important
flex-basis: auto;
}
.navbar-toggler {
display: none;
}
.offcanvas {
// stylelint-disable declaration-no-important
position: static;
z-index: auto;
flex-grow: 1;
width: auto !important;
height: auto !important;
visibility: visible !important;
background-color: transparent !important;
border: 0 !important;
transform: none !important;
@include box-shadow(none);
@include transition(none);
// stylelint-enable declaration-no-important
.offcanvas-header {
display: none;
}
.offcanvas-body {
display: flex;
flex-grow: 0;
padding: 0;
overflow-y: visible;
}
}
}
}
}
}