当前位置: 首页 > 编程笔记 >

Bootstrap 4 .d-flex类的实现

吉俊德
2023-03-14
本文向大家介绍Bootstrap 4 .d-flex类的实现,包括了Bootstrap 4 .d-flex类的实现的使用技巧和注意事项,需要的朋友参考一下

在Bootstrap中使用d-flex类创建一个flexbox容器。

在这里,我设置了两个flex项目-

<div class="d-flex p-3 bg-primary text-white">  
  <div class="p-2 bg-success">One</div>
  <div class="p-2 bg-danger">Two</div>
</div>

您可以尝试运行以下代码来实现.d-flex类-

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
   <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  </head>
<body>
  <div class="container mt-3">
    <h2>Understanding Flex</h2>
    <div class="d-flex p-3 bg-primary text-white">  
      <div class="p-2 bg-success">One</div>
      <div class="p-2 bg-danger">Two</div>
    </div>
  </div>
</body>
</html>
 类似资料:
  • 介绍 (Introduction) EventDispatcher类是分派事件的所有类的基类。 EventDispatcher类实现IEventDispatcher接口。 EventDispatcher类允许显示列表上的任何对象成为事件目标,因此,使用IEventDispatcher接口的方法。 为了理解EventDispatcher ,我们先来看看什么是事件和事件目标。 什么是事件? (What

  • 指向D类的指针与指向结构的指针完全相同,并且访问指向使用成员访问运算符 - >运算符的类的指针的成员,就像使用指向结构的指针一样。 与所有指针一样,您必须在使用之前初始化指针。 让我们尝试以下示例来理解指向类的指针的概念 - import std.stdio; class Box { public: // Constructor definition this(

  • 本文向大家介绍Bootstrap 4 .flex-wrap类,包括了Bootstrap 4 .flex-wrap类的使用技巧和注意事项,需要的朋友参考一下 在Bootstrap 4中使用flex-wrap类包装flex项。以下是包装flex项目的代码片段- 让我们在flex-wrap类中设置一些flex项目- 您可以尝试运行以下代码来实现flex-wrap类- 示例

  • 本文向大家介绍如何实现Flex布局?相关面试题,主要包含被问及如何实现Flex布局?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: 文章链接: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool(语法篇) 简单的分为容器属性和元素属性 容器的属性: flex-direction:决定主轴的方

  • 本文向大家介绍flex布局如何实现?相关面试题,主要包含被问及flex布局如何实现?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: flex 是 Flexible Box 的缩写,意为"弹性布局"。指定容器display: flex即可。 容器有以下属性:flex-direction,flex-wrap,flex-flow,justify-content,align-items,align

  • 主要内容:实例,全屏幕的 Jumbotron,实例Jumbotron(超大屏幕)会创建一个大的灰色背景框,里面可以设置一些特殊的内容和信息。 提示: Jumbotron 里头可以放一些 HTML标签,也可以是 Bootstrap 的元素。 我们可以通过在 <div> 元素 中添加 .jumbotron 类来创建 jumbotron: 实例 <div class="jumbotron"> <h1>小牛知识库</h1> <p>学的不仅是技术,更是梦想