Песочница: различия между версиями

← Предыдущая правка Следующая правка →

ВизуальныйВики-текст

@@ Строка 1: / Строка 1: @@
-<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
+<div class="card-group">
-<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
+  <div class="card">
-<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
+    <img src="..." class="card-img-top" alt="...">
+    <div class="card-body">
-<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
+      <h5 class="card-title">Card title</h5>
-  <div class="offcanvas-header">
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+     </div>
-  </div>
-  <div class="offcanvas-body">
-     <p>Try scrolling the rest of the page to see this option in action.</p>
    </div>
-</div>
+  <div class="card">
-<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
+    <img src="..." class="card-img-top" alt="...">
-  <div class="offcanvas-header">
+    <div class="card-body">
-    <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
+      <h5 class="card-title">Card title</h5>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    </div>
    </div>
-   <div class="offcanvas-body">
+   <div class="card">
-     <p>.....</p>
+     <img src="..." class="card-img-top" alt="...">
-  </div>
+    <div class="card-body">
-</div>
+      <h5 class="card-title">Card title</h5>
-<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
-  <div class="offcanvas-header">
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
+    </div>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-  </div>
-  <div class="offcanvas-body">
-    <p>Try scrolling the rest of the page to see this option in action.</p>
    </div>
 </div>
 [[Файл:Border5.png|мини]]