Bootstrap 5: Offcanvas

فهرست مطالب

ﻡﻮﺑ ﺯﺍ ﺝﺭﺎﺧ

Offcanvas ﺖﻟﺎﺣ ﻪﺑﺎﺸﻣﺖﺳﺍ ﻝﺍﺪﻣ ﯼﺎﻫ (ﺶﯿﭘ ﺭﻮﻃ ﻪﺑﯽﻣ ﻥﺎﻬﻨﭘ ﺽﺮﻓﯽﻣ ﻩﺩﺍﺩ

Some text lorem ipsum.

Offcanvas ﯼﺭﺎﻨﮐ ﺭﺍﻮﻧ ﮏﯾ ﺩﺎﺠﯾﺍ ﻩﻮﺤﻧ

:ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ offcanvas ﯼﺭﺎﻨﮐ ﺭﺍﻮﻧ ﮏﯾ ﺩﺎﺠﯾﺍ ﻩﻮﺤﻧ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

 <!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" 
  id="demo">
  <div 
  class="offcanvas-header">
    <h1 
  class="offcanvas-title">Heading</h1>
    <button 
  type="button" class="btn-close text-reset" 
  data-bs-dismiss="offcanvas"></button>
  </div>
  <div 
  class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    
  <p>Some text lorem ipsum.</p>
    <button class="btn 
  btn-secondary" type="button">A 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">
  Open Offcanvas Sidebar
</button>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<div class="container-fluid mt-3">
  <h3>Offcanvas Sidebar</h3>
  <p>Offcanvas is similar to modals, except that it is often used as a sidebar.</p>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    Open Offcanvas Sidebar
  </button>
</div>

</body>
</html>

ﺪﺷ ﻩﺩﺍﺩ ﺢﯿﺿﻮﺗ ﻝﺎﺜﻣ

.ﺪﻨﮐ ﯽﻣ ﺩﺎﺠﯾﺍ ﺍﺭ offcanvas ﯼﺭﺎﻨﮐ ﺭﺍﻮﻧ .offcanvas

.ﺪﻨﮐ ﯽﻣ ﻞﺴﮑﯿﭘ 400 ﺍﺭ ﻥﺁ ﺽﺮﻋ ﻭ ﺪﻫﺩ ﯽﻣ ﺭﺍﺮﻗ ﯽﻧﺎﮑﻣ ﺖﯿﻌﻗﻮﻣ ﺭﺩ ﺍﺭ code class="w3-co

.ﺪﻨﮐ ﯽﻣ ﻦﯿﻤﻀﺗ ﺍﺭ ﺐﺳﺎﻨﻣ ﻂﺧ ﻉﺎﻔﺗﺭﺍ ﻭ ﺎﻫ ﻪﯿﺷﺎﺣ .offcanv

.ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ .offcanvas-body ﺱﻼﮐ ﺭﺩ ﺍﺭ ﺩﻮﺧ ﯼﺍﻮ

.(ﺎﻣ ﻝﺎﺜﻣ ﺭﺩ #demo)

.data-bs-target ﯽﮔﮋﯾﻭ ﯼﺎﺟ ﻪﺑ ، .ﺪﯿﻨﮐ ﻩﺭﺎﺷﺍ

`ﻡﻮﺑ ﺯﺍ ﺝﺭﺎﺧ ﺖﯿﻌﻗﻮﻣ`

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻦﯿﯾﺎﭘ ﺎﯾ ﻻﺎﺑ ،ﺖﺳﺍﺭ ،ﭗﭼ ﺖﻤﺳ ﺭﺩ offcanvas ﻥﺩﺍﺩ ﺭﺍﺮﻗ ﯼﺍﺮﺑ ﻦﯿ

`ﺖﺳﺭﺩ ﻝﺎﺜﻣ`

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






  
    Heading
    
  
  
    Some text lorem ipsum.
    Some text lorem ipsum.
    
  

  


                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="offcanvas offcanvas-end" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<div class="container-fluid mt-3">
  <h3>Right Offcanvas</h3>
  <p>The .offcanvas-end class positions the offcanvas to the right of the page.</p>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    Toggle Right Offcanvas
  </button>
</div>

</body>
</html>

`ﻻﺎﺑ ﻝﺎﺜﻣ`

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





  
    Heading
    
  
  
    Some text lorem ipsum.
    Some text lorem ipsum.
    
  

  


                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="offcanvas offcanvas-top" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<div class="container-fluid mt-3">
  <h3>Top Offcanvas</h3>
  <p>The .offcanvas-top class positions the offcanvas at the top of the page.</p>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    Toggle Top Offcanvas
  </button>
</div>

</body>
</html>

`ﻦﯿﯾﺎﭘ ﻝﺎﺜﻣ`

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





  
    Heading
    
  
  
    Some text lorem ipsum.
    Some text lorem ipsum.
    
  

  


                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="offcanvas offcanvas-bottom" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<div class="container-fluid mt-3">
  <h3>Bottom Offcanvas</h3>
  <p>The .offcanvas-bottom class positions the offcanvas at the bottom of the page.</p>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    Toggle Bottom Offcanvas
  </button>
</div>

</body>
</html>

`ﻮﮕﺨﺳﺎﭘ OffCanvas ﯼﻮﻨﻣ`

:ﺪﯿﻨﮐ ﻝﺮﺘﻨﮐ ،ﺪﯿﻫﺩ ﺶﯾﺎﻤﻧ ﻪﺤﻔﺻ ﻒﻠﺘﺨﻣ ﯼﺎﻫﺽﺮﻋ ﺭﺩ ﺪﯿﻫﺩ ﺶﯾﺎﻤﻧ ﺎﯾ ﻥﺎﻬﻨﭘ ﺍﺭ offca

`ﻝﺎﺜﻣ`

 <div class="offcanvas offcanvas-start offcanvas-lg" id="demo">

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="offcanvas offcanvas-start offcanvas-lg" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<div class="container-fluid mt-3">
  <h3>Responsive Offcanvas Menu</h3>
  <p>You can also hide or show the offcanvas menu on different screen widths, with the .offcanvas-sm|md|lg|xl|xxl classes.</p>
  <p>In this example, we hide the offcanvas menu on screens larger than 991px wide. Note that we also hide the button that opens the offcanvas (d-lg-none).</p>
  <p class="text-bg-danger">Resize the browser window to see the result.</p>
  <button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    Open Offcanvas Sidebar
  </button>
</div>

</body>
</html>

`OffCanvas ﻩﺮﯿﺗ ﯼﻮﻨﻣ`

ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﮏﯾﺭﺎﺗ ﮏﯾ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ .text-bg-dark

ﻪﺘﮑﻧ: ﺱﻼﮐ ﻦﯿﻨﭽﻤﻫ ﺎﻣ .btn-close-whit

`ﻝﺎﺜﻣ`

<div class="offcanvas offcanvas-end" id="demo">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>





  
    Heading
    
  
  
    Some text lorem ipsum.
    Some text lorem ipsum.
    
  

  


                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="offcanvas offcanvas-start text-bg-dark" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <p>Some text lorem ipsum.</p>
    <button class="btn btn-secondary" type="button">A Button</button>
  </div>
</div>

<div class="container-fluid mt-3">
  <h3>Dark Offcanvas Sidebar</h3>
  <p>Use the .text-bg-dark class to create a dark offcanvas menu.</p>
  <p><strong>Tip:</strong> We have also added the .btn-close-white class to .btn-close, to create a white close button that looks nice with the dark background:</p>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    Open Offcanvas Sidebar
  </button>
</div>

</body>
</html>


  
    
      ← صفحه قبلی
    
    
      صفحه بعد →