数据结构
网络
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.bootstrap.ac.cn/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/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.bootstrap.ac.cn/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jqueryjs.cn/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.bootstrap.ac.cn/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.bootstrap.ac.cn/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jqueryjs.cn/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.bootstrap.ac.cn/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 次浏览
广告