复习-flex布局和响应式布局、BootStrap

已于 2022-08-21 22:38:23 修改
阅读量596 收藏
点赞数
分类专栏： 黑马 博学谷学习 前端 文章标签： css html 前端
于 2022-08-21 22:24:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64371862/article/details/126092754
版权
#博学谷IT学习技术支持#
一 、flex布局
1.使用flex-direction改变元素排列方向，Flex布局模型中，弹性盒子默认沿着水平方向排列。
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction
row：行, 水平(默认值)
column ：* 列, 垂直
row-reverse ：行, 从右向左
column-reverse ：列, 从下向上
2.使用flex-wrap实现弹性盒子多行排列效果
最低0.47元/天 解锁文章
小刘儿啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap 4 Flex（弹性）布局
weixin_45116096的博客
07-12 293
Bootstrap 4 通过 flex 类来控制页面的布局。 弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。 弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计， 以下实例使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素： <!DOCTYPE html> <html> <head> <title>Boot.
【响应式布局】使用 flexbox 实现简单响应式布局
最新发布
落叶无声的专栏
11-19 903
使用 flex 实现响应式布局
前端之响应式布局,过度以及flex布局
上善若水
09-27 1081
一,z-index 脱离文档流标签,具有z-index属性的值,可以用来控制显示层次的优先级,值为任意整数(值越大优先级越高) &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;z-index&lt;/title&gt; &lt;style&a
简单的flex 响应式布局（Bootstrap栅格系统布局）
Byte_Dance的博客
10-01 1414
最简单的相应布局  父标签CSS配置 display: flex; /*外部容器设置为flex布局 内部才能进行布局操作*/ flex-direction: row;/*表示元素的走向*/ flex-wrap:wrap;/*声明元素是否换行*/ 子标签CSS配置 height:200px; margin:5px; flex-grow:1; flex-basis:300px; 这样就...
css弹性盒模型详解----flex-direction
qq_34451947的博客
11-13 900
本篇文章详细介绍flex-direction flex-direction 是控制盒模型容器下一级子元素的排列方式的属性 一共有四种 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 //第一种属性 flex-direct...
bootstrap响应式布局
03-19
4. bootstrap伸缩布局并居中：`d-flex justify-content-center align-items-center` 5. `jQuery.data(element,[key],[value])`：在元素上存放数据,返回jQuery对象。 例如：在index界面中 ```javascript ...
Bootstrap禁用响应式布局的实现方法
08-31
响应式布局是Bootstrap的核心特性之一，它可以根据不同的屏幕尺寸和设备类型自动调整页面的布局，使得页面在不同的设备上都能良好地展现。然而，在某些情况下，开发者可能不想使用响应式布局，或者需要在特定的项目...
BootStrap响应式网页布局实例.rar
06-18
这个“BootStrap响应式网页布局实例.rar”压缩包文件显然包含了关于如何使用Bootstrap创建响应式网页布局的示例代码和资源，非常适合初学者进行学习和实践。 响应式网页设计是一种使网站在不同设备上（如桌面、平板...
谈一谈bootstrap响应式布局
09-02
总的来说，Bootstrap响应式布局通过其强大的网格系统和预定义的组件，让网页开发者能够快速创建适应多种设备的界面，而无需从零开始编写复杂的CSS和JavaScript代码。这不仅降低了开发难度，也节省了项目时间和成本。...
BootStrap响应式布局 第一季.zip
03-11
这个第一季的教程不仅会教你如何使用Bootstrap的响应式布局，还会帮助你理解响应式设计的基本原理和最佳实践。通过学习，你将能够创建适应各种屏幕尺寸的现代、用户友好的Web界面，无论是在大屏幕的台式机还是在小巧...
响应式布局
Emfts的博客
08-02 773
响应式布局1. 中文布局css库 响应式就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本，这个概念是为解决移动互联网浏览而诞生的，无论你的屏幕多大。 响应式布局通常分为三种： 一是利用弹性盒子Flex、网格布局Grid或左浮动法Float等 CSS 属性来实现的在一列上根据屏幕大小的不同而进行自动换行。 二是利用媒体查询来根据当前屏幕大小来运行相应的 CSS 代码。 三是利用 JavaScript 来获取窗口宽高来动态操作 DOM 元素。 响应式布局就是要达到这样的效果：无论屏幕宽窄，左右
flex 布局总结
weixin_30659829的博客
06-21 69
flex 布局总结 可调节横纵轴。有方便水平居中，设置等距间隔等好处。 1、确定主轴方向 .box { flex-direction: row | row-reverse | column | column-reverse; } row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿...
HTML & CSS笔记(没有基础内容，比如br标签是换行什么的)，CSS2.1，CSS3，响应式布局
殷志鹏的博客
07-04 618
每一个知识点都有相应的测试代码，你可以将代码复制到文件中，然后在浏览器中打开测试即可 推荐使用谷歌浏览器Chrome 文章目录一、基础（HTML和CSS中较复杂内容）1、meta标签2、CSS选择器1、伪类选择器2、伪元素3、属性选择器4、子元素伪类5、兄弟选择器6、否定伪类选择器7、选择器的优先级和顺序3、盒模型4、 一、基础（HTML和CSS中较复杂内容） 1、meta标签 meat标签 meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是...
bootstrap-栅格系统（响应式布局）
kjw888的博客
07-22 2848
文章目录一、优点二、实现三、执行过程（1）定义容器（2）定义行（3） 定义元素四、注意事项（1） 自动换行（2）向上兼容性（3）向下不兼容性 一、优点 同一套页面可以兼容不同分辨率的设备（例如手机和电脑访问同一页面可能由于分辨率的不同减低用户体验度，而响应式布局就很好的解决了这个问题） 二、实现 依赖与bootstrap的栅格系统来实现：将一个页面的一行划平均分为12个格子，栅格系统基于不同的分辨...
【Bootstrap】bootstrap入门之栅格布局、弹性布局、组件类_02
青春木鱼的博客
10-24 4660
Boot最重要的3个知识：手写媒体查询@media；栅格布局；scss。栅格布局，把所有的布局看做一行，用列数来表示每一个块占据宽度的大小，一行一共12列。栅格系统分为行.row和列.col,行必须包裹列。可以是一行包多列，也可以写多行包多列。
flex布局和响应式布局
qq_43711676的博客
05-10 3511
flex伸缩布局 页面响应式布局设计
Bootstrap——flex布局（定义弹性盒子、排列方向、内容排列、项目对齐、自身对齐、自动对等、等宽变换、自动边距、包裹、排序、对齐内容）
m0_69034993的博客
10-10 4199
使用flexbox容器上的.justiiy-content-*类可以改变flex子元素在主轴上的对齐（默认x轴开始，如果flex-direction:column则为y轴开始）*可以是从start(浏览器默认值）、end、center、between或around。改变Flex子容器在Flex容器中的包裹方式（可以实现弹性布局），其中包括无包裹.flex-nowrap类（浏览器默认）、包裹.flex-wrap类，或者反向包裹.flex-wrap-reverse类。任何一个容器都可以指定为Flex布局。
Bootstrap样式之Flex布局
qq_44701472的博客
03-16 1418
Flex弹性布局（b站上面的李炎恢老师的视频） 1、 使用.d-flex和.d-inline-flex开启flex布局样式； 同时这一样式也支持响应式的媒体查询：.d– [ sm | md | lg | xl ]-flex; 2、 使用.flex-row呈现子元素在水平方向，默认从左至右显示； 3、 使用.flex-row-reverse让子元素从屏幕的右边开始显示，从由到左1,2,3 两个...
Bootstrap Flex（弹性）布局
书香水墨
07-26 5542
一、Bootstrap Flex（弹性）布局 1.1 弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。 弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计。 注意：IE9 及其以下版本不支持弹性盒子，所以如果你需要兼容 IE8-9，请使用 Bootstrap 3。 以下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值