資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 Bootstrap 將一列列表拆分到不同的行中？
Bootstrap 是一款廣泛使用的前端框架，用於構建響應式和移動友好的網頁。它最初由 Twitter 建立，現在由 Bootstrap 團隊維護，該團隊是一個由開發人員組成的開源社群。
Bootstrap 的主要優勢之一是它允許開發人員建立響應式設計，這些設計可以在不同的螢幕尺寸和裝置上無縫執行。這意味著使用 Bootstrap 構建的網站和應用程式可以適應各種裝置，例如智慧手機、平板電腦和桌上型電腦，為使用者提供一致且引人入勝的使用者體驗。
在本文中，我們將瞭解如何使用 Bootstrap 將列表的一列拆分為不同的行。將列表的一列拆分為不同的行可能具有挑戰性，但藉助 Bootstrap，可以輕鬆完成。
使用 Bootstrap 將列表列拆分為多行的不同方法
有多種方法可用於使用 Bootstrap 將列表的一列拆分為不同的行，但在本文中，我們將瞭解一些常用的方法。讓我們詳細瞭解一下它們。
方法 1：使用網格系統
Bootstrap 網格系統是建立響應式佈局的強大工具。它使用一系列容器、行和列來佈局和對齊內容以設計網頁。它使用 flexbox 構建，並且完全響應式。它基於一個 12 列網格，可以將其劃分為行和列。要使用 Bootstrap 網格系統將列表的一列拆分為不同的行，請參見以下語法：
語法
以下是使用 Bootstrap 的網格系統將列表的一列拆分為不同的行的語法。
<div class="container">
<div class="row">
<div class="col-md-6">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
示例
在此示例中，我們使用了 col-md-6 類將列拆分為兩部分，這是最簡單的方法。
<html>
<head>
<title>Splitting a Column of List Using Bootstrap Grid System</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<ul>
<li class="text-bg-success p-2 col">List Item 1</li>
<li class="text-bg-success p-2 col">List Item 2</li>
</ul>
</div>
<div class="col-md-6">
<ul>
<li class="text-bg-primary p-2 col">List Item 3</li>
<li class="text-bg-primary p-2 col">List Item 4</li>
</ul>
</div>
</div>
</div>
</body>
</html>
方法 2：使用 FlexBox
Bootstrap Flexbox 是一種靈活的盒子佈局模型，允許開發人員建立響應式和動態佈局。Bootstrap 中的靈活盒子佈局用於設計靈活的響應式佈局結構，而無需使用網頁的浮動或定位。
要使用 Bootstrap Flexbox 將列表的一列拆分為不同的行，請參見以下語法：
語法
以下是使用 Bootstrap 的 flexbox 類將列表的一列拆分為不同的行的語法。
<div class="container">
<div class="row">
<div class="col-md-6 d-flex flex-wrap">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class="col-md-6 d-flex flex-wrap">
<ul>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
示例
在此示例中，我們使用了 d-flex 和 flex-wrap bootstrap 類將列的 display 屬性設定為 flex，並將專案包裝到多行中。
<html>
<head>
<title>Splitting a Column of List Using Bootstrap Grid System</title>
<link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >
</head>
<body>
<div class="container d-flex flex-wrap">
<div class="flex-grow-1">
<ul>
<li class="text-bg-success p-2 col">List Item 1</li>
<li class="text-bg-success p-2 col">List Item 2</li>
<li class="text-bg-success p-2 col">List Item 3</li>
</ul>
</div>
<div class="flex-grow-1">
<ul>
<li class="text-bg-primary p-2 col">List Item 4</li>
<li class="text-bg-primary p-2 col">List Item 5</li>
<li class="text-bg-primary p-2 col">List Item 6</li>
</ul>
</div>
</div>
</body>
</html>
方法 3：使用卡片元件
Bootstrap 卡片元件是可自定義的，可用於以不同方式顯示內容。要使用 Bootstrap 卡片元件將列表的一列拆分為不同的行，請參見以下語法：
語法
以下是使用 Bootstrap 的卡片元件將列表的一列拆分為不同的行的語法。
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card-deck">
<div class="card">
<div class="card-body">
<ul>
<li>Item 1</li>
…
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card-deck">
<div class="card">
<div class="card-body">
<ul>
<li>Item 3</li>
…
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
示例
在此示例中，我們使用了 Bootstrap 網格系統，並使用 col-md-6 類將列分為了兩個大小相等的列，因為這將確保卡片在中等尺寸的螢幕上並排顯示，並在較小的螢幕上使用 Bootstrap 預定義的媒體查詢進行堆疊。
<html>
<head>
<title>Splitting a Column of List Using Bootstrap Grid System</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >
</head>
<body>
<div class="container my-4 mx-10">
<div class="row">
<div class="col-md-5">
<div class="card">
<div class="card-header bg-primary text-white">Header 1</div>
<ul class="list-group list-group-flush">
<li class="text-bg-success p-2 col">List Item 1</li>
<li class="text-bg-success p-2 col">List Item 2</li>
<li class="text-bg-success p-2 col">List Item 3</li>
</ul>
</div>
</div>
<div class="col-md-5">
<div class="card">
<div class="card-header bg-primary text-white">Header 2</div>
<ul class="list-group list-group-flush">
<li class="text-bg-success p-2 col">List Item 4</li>
<li class="text-bg-success p-2 col">List Item 5</li>
<li class="text-bg-success p-2 col">List Item 6</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
結論
在本文中，我們學習瞭如何使用 Bootstrap 將列表的一列拆分為不同的行。Bootstrap 是一款高效的前端框架，它為開發人員提供了建立響應式設計的工具，這些設計可以在不同的裝置上無縫執行。我們學習了完成任務的三種方法，即網格系統、Flexbox 和卡片元件。透過利用這些 Bootstrap 元件，開發人員可以有效地將列表的列拆分為不同的行，從而提高其網站或應用程式的整體設計和功能。
2K+ 瀏覽量
