二、Bootstrap之FlexBox弹性盒子

Bootstrap系列之Flex布局 以上就是今天要讲的内容,本文仅仅简单介绍了bootstrap中flex的使用,并记录了常用的一些排列方式,如果这篇文章不足以满足需求,可以去官方文档查看详情。 阅读详情

.flexbox类是什么?

Flexbox(Flexible Box)是 CSS3 中引入的一种布局模型,用于设计复杂的页面布局并实现灵活的排列方式。Flexbox 的目标是提供一种更加高效和强大的布局方式,使开发者能够轻松地控制元素在容器内的排列、对齐、分布和尺寸调整。

一、.d-flex和.d-inline-flex

1、.d-flex类。 将元素设置为块级 Flex 容器,使其内部元素采用 Flex 布局,将元素及其子元素排列为 Flexbox 布局,主要用于创建块级的弹性盒子布局。
使用案例:
以下是一个简单的示例,演示如何使用 .d-flex 类将一个 元素设置为 Flex 容器。

<!--使用d-flex类创建弹性盒子-->
<div class="d-flex p-3 bg-warning text-white">
    <div class="p-2 bg-primary">d-flex item 1</div>
    <div class="p-2 bg-success">d-flex item 2</div>
    <div class="p-2 bg-danger">d-flex item3</div>
</div>

在这里插入图片描述在这个案例中,div 将内部的元素排列为 Flexbox 布局,实现灵活的排列和对齐。
2、.d-inline-flex。 将元素设置为行内块 Flex 容器,使其内部元素采用 Flex 布局。将元素及其子元素排列为行内块级的 Flexbox 布局,适用于在行内元素中创建弹性盒子布局。
使用案例:
以下是一个示例,展示如何使用 .d-inline-flex 类将一个 div元素设置为行内块 Flex 容器:

<!--使用d-inline-flex类创建弹性盒子-->
<div class="d-inline-flex p-3 bg-warning text-white">
    <div class="p-2 bg-primary">d-inline-flex item 1</div>
    <div class="p-2 bg-success">d-inline-flex item 2</div>
    <div class="p-2 bg-danger">d-inline-flex item3</div>
</div>

在这里插入图片描述在这个案例中,将内部的 div>元素排列为行内块级的 Flexbox 布局,使其在文本流中按照 Flexbox 规则排列。
总结:
通过使用 .d-flex 和 .d-inline-flex 类,开发者可以方便地将元素转换为 Flex 容器,并利用 Flexbox 的强大功能来实现更灵活的布局设计。这些类结合其他 Flexbox 类,如对齐、排列和伸缩等类,可以帮助开发者轻松创建各种布局效果,实现响应式和灵活的页面设计。在 Bootstrap 中,这些类被广泛应用于构建现代化的网页布局,提供了便捷的工具来实现灵活而美观的页面结构。

二、.flex-row和.flex-column

.flex-row 和 .flex-column 是 Bootstrap 中用于设置 Flex 容器主轴方向的类,分别用于将元素的主轴方向设置为水平行(row)和垂直列(column)。下面详细解释它们的定义及相关使用案例。
1、.flex-row 。 将 Flex 容器的主轴方向设置为水平行,使内部项目水平排列。
使用案例:
以下是一个简单示例,展示如何使用 .flex-row 类将一个div元素设置为 Flex 容器,并使其内部项目水平排列:

<div class="container">
		<h3 class="mb-4">水平方向</h3>
		<h4>flex-row(从左侧开始)</h4>
		<div class="d-flex flex-row p-3 bg-warning text-white">
		    <div class="p-2 bg-primary">d-flex item 1</div>
		    <div class="p-2 bg-success">d-flex item 2</div>
		    <div class="p-2 bg-danger">d-flex item3</div>
		</div>
		<br>
		<h4>flex-row-reverse(从右侧开始)</h4>
		<div class="d-flex flex-row-reverse p-3 bg-warning text-white">
		    <div class="p-2 bg-primary">d-flex item 1</div>
		    <div class="p-2 bg-success">d-flex item 2</div>
		    <div class="p-2 bg-danger">d-flex item3</div>
		</div>
	</div>

在这里插入图片描述在这个案例中,div class=“d-flex flex-row” 将内部的 div元素以水平行的方式排列,实现水平方向的布局。
2、.flex-column。 将 Flex 容器的主轴方向设置为垂直列,使内部项目垂直排列。
使用案例:
以下是一个示例,展示如何使用 .flex-column 类将一个

元素设置为 Flex 容器,并使其内部项目垂直排列。

<div class="container">
		<h3 class="mb-4">垂直方向</h3>
		<h4>flex-column(从上往下)</h4>
		<div class="d-flex flex-column p-3 bg-warning text-white">
		    <div class="p-2 bg-primary">d-flex item 1</div>
		    <div class="p-2 bg-success">d-flex item 2</div>
		    <div class="p-2 bg-danger">d-flex item3</div>
		</div>
		<br>
		<h4>flex-column-reverse(从下往上)</h4>
		<div class="d-flex flex-column-reverse p-3 bg-warning text-white">
		    <div class="p-2 bg-primary">d-flex item 1</div>
		    <div class="p-2 bg-success">d-flex item 2</div>
		    <div 
想法—)Bootstrap 4的新布局FlexBox弹性盒子 在Bootstrap 4中引入了Flexbox(弹性盒子)布局,为开发者提供了更加灵活和强大的布局方式。Flexbox通过一系列属性和类,使得页面布局更加简单、响应式和易于管理。在使用Bootstrap 4的Flexbox布局时,有一些经验和方法可以帮助开发者更好地利用这一特性。首先,通过使用.d-flex类将元素设置为Flex容器,即可启用Flexbox特性。通过添加.flex-row或类来指定Flex容器的主轴方向,从而决定项目的排列方式。使用类可以控制项目在主轴上的对齐方式,而。 阅读详情

相关推荐

Bootstrap 4 Flex(弹性)布局

弹性盒子(flexbox)Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局,而不是使用浮动来布局。弹性盒子是 CSS3 的一种新的布局模式,更适合响应式的设计,如果你还不了解 flex,可以阅读我们的 CSS3 弹性盒子(Flex Box) 教程创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类:&lt;!DOC...

qq_42454206的博客 1971

Flex布局在Bootstrap中的应用

Flex布局(Flexible Box Layout)是一种用于页面布局的CSS3模块,它提供了一种灵活的方式来排列和对齐元素,使得页面的布局更加自适应和响应式。在Bootstrap中,Flex布局是通过使用内置的CSS类来实现的。在本文中,我们将探讨Flex布局在Bootstrap中的应用,并提供相应的源代码示例。Flex容器是指应用Flex布局的父元素,通过为父元素添加相应的CSS类来创建Flex容器。Flex子项是指Flex容器中的子元素,它们可以按照一定的规则在容器内进行排列。

ByteWhizX的博客 274

Bootstrap4 Flex(弹性)布局

Bootstrap4 通过 flex 类来控制页面的布局。

shengyin714959的博客 430

Bootstrap5 Flex(弹性)布局

Bootstrap5 通过 flex 类来控制页面的布局。

shengyin714959的博客 241

【pprof】简要学习教程

基本介绍 pprof 是在做性能优化前的性能分析工具。 安装: go get -u github.com/google/pprof 分析工具 go tool pprof 是命令行指令,用于分析 Profiling 数据,源数据可以是 http 地址,也可以是已经 dump 下当 profile 文件;查看模式可以命令行交互模式,也可以是浏览器模式(-http 参数)。 两种应用 服务型应用 _ "net/http/pprof" 包,专用于采集 web 服务 运行数据的分析。即在运行的服务中通过 API .

码农印象 883

银河麒麟系统安装redis【亲测可行】

架构:Linux 5.10.0-9-generic x86_64 GNU/Linux。redis版本:redis-6.2.3.tar.gz。然后在执行make install,结束;OS:银河麒麟V10(SP1)未激活。cpu:I5-10代;

lx_nhs的博客 3332

大学物理第二章 质点动力学详解

大学物理第二章 质点动力学概念详解

weixin_63026364的博客 1万+

机器人控制入门

机器人控制入门 对于工科领域来说,脱离实践的学习都是肤浅的,对于控制这种强调经验的技术更是如此。如果去问一个程序员怎么学习一块技术,他必然让你去多编程。机器人领域也是。如果想把基本功打扎实,那么实践更是必不可少了。 机器人控制有三个元素:控制器(算法),执行器(电机),传感器; 控制的本质就是将规划系统的指令作为输入信息,将传感器探测得到的状态信息和导航系统的定位

彼岸花 1万+

ArcGIS小白必看:5分钟搞定面要素转点要素+自动计算经纬度坐标(附常见报错解决方案)

本文为ArcGIS新手详细解析了面要素转点要素并自动计算经纬度坐标的完整流程。核心在于正确理解和使用坐标系,并掌握ArcToolbox中的“要素转点”等工具。文章深入剖析了常见报错(如坐标系未定义、字段计算失败)的根源,提供了从基础操作到Python脚本自动化的实战解决方案,确保数据转换的准确与高效。

weixin_29284885的博客 575

基于Pascal VOC数据集的YOLOv8目标检测系统实现:人、鸟、猫、牛、电视、车等20类目标识别与UI界面部署全流程详解

VOC 2007、VOC 2012 两个主要版本;每个图像提供 bounding box(目标框)+ 目标类别;共计 20 类,所有图像手工标注,质量高。完整复现 Pascal VOC 20类检测任务成功训练 YOLOv8 模型实现可视化 UI + 实时检测系统支持多平台部署和演示。

YOLO 771

Qt C++ 的虚拟演播室系统

**数据流转**:OpenCV 处理的图像格式通常是 `cv::Mat`,而 Qt 3D 渲染需要 `QImage` 或 `QTexture2D`。// 临时用颜色代替。// 前景在背景前面。#### 3.3 主窗口与 Qt 3D 集成 (`mainwindow.h` / `.cpp` / `.ui`)* **更复杂的 3D 场景**:加载 3D 模型(.obj, .gltf 等)作为背景和道具。1. **构建项目**:确保 `.pro` 文件中的 OpenCV 路径配置正确,然后构建项目。

寒寒豆豆软件公司的博客 111

AgentScope深入分析-ReActAgent

ReActAgent 是 AgentScope 框架中最核心的智能体实现,它完美诠释了"推理-行动"(Reasoning-Acting)循环的精髓。本文将深入分析 ReActAgent 的类继承关系、核心执行流程,以及状态管理、钩子机制、实时介入等关键技术点。通过阅读本文,你会理解智能体如何与模型交互、如何执行工具、如何处理中断,以及这些机制背后的设计考量。模块化:通过组合不同的组件(模型、格式化器、工具集、记忆)来构建智能体透明性:所有关键流程都对开发者可见,可以精确控制可扩展性。

842

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain&#39;s apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath(&#39;DeepLearnToolbox&#39;));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand(&#39;state&#39;,0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W&#39;); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand(&#39;state&#39;,0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = &#39;sigm&#39;;%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, &#39;Too big error&#39;);```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand(&#39;state&#39;,0)sae = saesetup([784 100]);sae.ae{1}.activation_function = &#39;sigm&#39;;sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)&#39;)% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;;nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, &#39;Too big error&#39;);```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x&#39;,28,28,60000))/255;test_x = double(reshape(test_x&#39;,28,28,10000))/255;train_y = double(train_y&#39;);test_y = double(test_y&#39;);%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you&#39;ll get around 1.2% errorrand(&#39;state&#39;,0)cnn.layers = { struct(&#39;type&#39;, &#39;i&#39;) %input layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 6, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %sub sampling layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 12, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, &#39;Too big error&#39;);```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, &#39;Too big error&#39;);%% ex2 neural net with L2 weight decayrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex3 neural net with dropoutrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex4 neural net with sigmoid activation functionrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex5 plotting functionalityrand(&#39;state&#39;,0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = &#39;softmax&#39;; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand(&#39;state&#39;,0)nn = nnsetup([784 20 10]); nn.output = &#39;softmax&#39;; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

上一篇: 一、Boostrap之栅格布局
下一篇: 想法—)Bootstrap 4的新布局FlexBox弹性盒子
Itcodewizard
博客等级 码龄3年 54粉丝 12原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值