資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究在 Bootstrap 中使用顯示屬性附帶示例
Bootstrap 中的 Display 屬性用於設定元素的顯示屬性。Bootstrap 實用程式提供了諸如 "block", "inline" 等的類，這些類用於直接控制元素的顯示屬性。Bootstrap 中的這些顯示屬性類允許開發人員將 CSS 顯示屬性值輕鬆應用到元素，而無需手動編寫相應的 CSS 樣式。
以下是顯示屬性類：
.d-block − 此類將元素的 display 屬性設定為 block。
.d-inline − 此類將元素的 display 屬性設定為 inline。
.d-inline-block − 此類將元素的 display 屬性設定為 inline-block。
語法
以下是 Bootstrap 中 "d-inline", "d-block" 和 "d-inline-block" 類類的語法：
<div class="d-inline"> Inline </div> // for inline display <div class="d-block"> Block </div> // for block display <div class="d-inline-block"> Inline Block </div> // for inline-block display
示例
在以下示例中，我們將演示 "d-block" 類的用法。
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 20px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="d-block bg-success"> Tutorialspoint </div>
<div class="d-block bg-success"> Tutorialspoint </div>
</body>
</html>
示例
在下面的示例中，我們在 HTML <div> 元素上使用了 Bootstrap "d-inline" 類：
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 20px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="d-inline bg-success"> Tutorialspoint </div>
<div class="d-inline bg-success"> Tutorialspoint </div>
</body>
</html>
示例
在以下示例中，我們將演示 "d-inline-block" 類的用法。
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 20px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="d-inline-block bg-success"> Tutorialspoint </div>
<div class="d-inline-block bg-success"> Tutorialspoint </div>
</body>
</html>
更新於： 2023 年 04 月 08 日
201 次瀏覽
廣告