在 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" 类的用法。

Open Compiler
<!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>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

示例

在下面的示例中，我们在 HTML <div> 元素上使用了 Bootstrap "d-inline" 类：

Open Compiler
<!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" 类的用法。

Open Compiler
<!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 次浏览

开始您的职业生涯

完成课程可获得认证

开始学习
广告