బూస్ట్రాప్ 5 ఆఫ్‌కాన్వాస్

ఆఫ్‌కాన్వాస్ (ఫాంబ్రే)

ఆఫ్‌కాన్వాస్ (ఫాంబ్రే) మోడల్ (అప్రకటించబడలేదు మరియు యెన్నికి చేయబడినప్పుడు చూపబడుతుంది), వ్యత్యాసం ఇది సాధారణంగా సైడ్‌బార్ నేవిగేషన్ మెనూగా ఉపయోగించబడుతుంది.

ఆఫ్‌కాన్వాస్ సైడ్‌బార్ సృష్టించడం ఎలా చేయాలి

ఆఫ్‌కాన్వాస్ సైడ్‌బార్ సృష్టించడానికి ఉదాహరణ చూపుతుంది:

ఉదాహరణ

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">శీర్షిక</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>కొన్ని వచనాలు. కొన్ని వచనాలు. కొన్ని వచనాలు.</p>
    <p>కొన్ని వచనాలు. కొన్ని వచనాలు. కొన్ని వచనాలు.</p>
    <button class="btn btn-secondary" type="button">బటన్</button>
  </div>
</div>
<!-- Button to open the offcanvas sidebar -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  ఆఫ్కాన్వాస్ సైడ్ బార్ తెరిచే బటన్
</button>

మీరే ప్రయత్నించండి

ఉదాహరణ వివరణ

.offcanvas క్లాస్ ను ఆఫ్కాన్వాస్ సైడ్ బార్ సృష్టిస్తుంది.

.offcanvas-start క్లాస్ ను ఆఫ్కాన్వాస్ ను స్థానాన్ని నిర్ణయించి మరియు పరిమాణాన్ని 400px గా నిర్ణయించి ఉంచుతుంది. మరింత స్థానాల క్లాస్ గురించి మరింత ఉదాహరణలను చూడండి.

.offcanvas-title క్లాస్ అనేది సరికొరికి పొడిగిన మరియు రేఖాగణితం నిర్ణయించబడినది.

అప్పుడు, మీ కంటెంట్ ను ఈ క్లాస్ లో జోడించండి .offcanvas-body క్లాస్ లో.

ఆఫ్కాన్వాస్ సైడ్ బార్ తెరిచే అంశాన్ని ఉపయోగించడానికి మీరు ఉపయోగించాలి <button> లేదా <a> అంశం ప్రదర్శించండి .offcanvas కంటెంటర్ యొక్క id (మా ఉదాహరణలో ఉన్న మీదులు కోసం) #demo）。

ఉపయోగించడానికి కావలసిన కాలిపేట ఉపయోగించండి <a> మీరు ఆఫ్కాన్వాస్ సైడ్ బార్ తెరిచే అంశాన్ని ఉపయోగించవచ్చు, కానీ href అంశాన్ని ఉపయోగించకూడదు అని ఉపయోగించండి data-bs-target అంశం ప్రదర్శించండి #demo。

ఆఫ్కాన్వాస్ స్థానాన్ని నిర్ణయించండి

ఉపయోగించండి .offcanvas-start|end|top|bottom ఆఫ్కాన్వాస్ ను ఎడమ, కుడి, పైకి లేదా తలలో అనుసూచించండి:

కుడిప్రక్క ఉన్న ఉదాహరణ

<div class="offcanvas offcanvas-end" id="demo">

మీరే ప్రయత్నించండి

పైలో ఉన్న ఉదాహరణ

<div class="offcanvas offcanvas-top" id="demo">

మీరే ప్రయత్నించండి

తలలో ఉన్న ఉదాహరణ

<div class="offcanvas offcanvas-bottom" id="demo">

మీరే ప్రయత్నించండి