Bootstrap - 堆疊

上一頁
下一頁

本章討論堆疊。堆疊是一個實用程式類，可用於控制容器內內容的堆疊方式。

stack 實用程式類控制元素的堆疊順序。堆疊提供了一種快速簡便的方法來應用 flexbox 屬性，以便在 Bootstrap 中建立佈局。

垂直堆疊

.vstack 類用於建立垂直佈局。諸如 .gap-* 之類的實用程式可用於在專案之間新增間距。

預設情況下，堆疊的專案是全寬的。

以下示例顯示了 .vstack 類的用法

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Stack</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h4>Vertical stack example</h4><br>
        <div class="vstack gap-1">
            <div class="text-bg-secondary p-2">Item on First place</div>
            <div class="text-bg-primary p-2">Item on Second place</div>
            <div class="text-bg-info p-2">Item on Third place</div>
        </div>
    </body>
</html>

使用 .vstack 類堆疊按鈕或任何其他元素。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Stack</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h4>Vertical stack using buttons</h4><br>
        <div class="vstack gap-3 col-md-4 mx-auto">
          <button type="button" class="btn btn-success">Confirm changes</button>
          <button type="button" class="btn btn-secondary">Cancel</button>
        </div>
    </body>
</html>

水平堆疊

.hstack 類用於建立水平佈局。諸如 .gap-* 之類的實用程式可用於在專案之間新增間距。

預設情況下，堆疊的專案垂直居中，並且僅佔用其必要的寬度。

以下示例顯示了 .hstack 類的用法

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Stack</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h4>Horizontal stack example</h4><br>
        <div class="hstack gap-3 column-gap-3">
        <div class="text-bg-warning p-2">Item one</div>
        <div class="text-bg-light p-2">Item two</div>
        <div class="text-bg-secondary p-2">Item three</div>
        </div>
    </body>
</html>

水平邊距實用程式（如 .ms-auto）可用於新增間距。實用程式類 .ms-auto 將文字對齊到螢幕的右側。讓我們看一個例子

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Stack</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h4>Horizontal margin example</h4><br>
        <div class="hstack gap-3 column-gap-3">
            <div class="text-bg-primary p-2">Item one</div>
            <div class="text-bg-secondary p-2">Item two</div>
            <div class="text-bg-info p-2 ms-auto">Item three</div>
        </div>
    </body>
</html>

諸如 .vr 類之類的垂直規則用於建立垂直分隔線。讓我們看一個相同的例子。

以下示例顯示了 .vr 類的用法

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Stack</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h4>Horizontal stack with vertical rule</h4><br>
        <div class="hstack gap-3 column-gap-3">
        <div class="text-bg-secondary p-3">Item one</div>
        <div class="vr"></div>
        <div class="text-bg-warning p-3">Item two</div>
        <div class="vr"></div>
        <div class="text-bg-info p-3">Item three</div>
        </div>
    </body>
</html>

可以使用 .hstack 類建立內聯表單。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Stack</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h4>Create an inline form</h4><br>
        <div class="hstack gap-2">
            <input class="form-control me-auto" type="text" placeholder="Add text here..." aria-label="Add text here...">
            <div class="vr"></div>
            <button type="button" class="btn btn-success">Submit</button>
            <div class="vr"></div>
            <button type="button" class="btn btn-outline-danger">Clear</button>
        </div>
    </body>
</html>
列印頁面
上一頁
下一頁
廣告