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

已于 2022-08-21 22:38:23 修改
阅读量635 收藏
点赞数
分类专栏： 黑马 博学谷学习 前端 文章标签： css html 前端
于 2022-08-21 22:24:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64371862/article/details/126092754
版权
本文介绍了Flex布局的核心概念，包括如何通过flex-direction改变元素排列方向，以及利用flex-wrap实现多行排列。接着探讨了响应式布局的概念，强调了媒体特性的使用，如max-width和min-width。最后，详细讲解了BootStrap框架在快速开发响应式网页中的作用，包括引入CSS、调用样式以及栅格系统的运用。
摘要由CSDN通过智能技术生成
#博学谷IT学习技术支持#
一 、flex布局
1.使用flex-direction改变元素排列方向，Flex布局模型中，弹性盒子默认沿着水平方向排列。
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction
row：行, 水平(默认值)
column ：* 列, 垂直
row-reverse ：行, 从右向左
column-reverse ：列, 从下向上
2.使用flex-wrap实现弹性盒子多行排列效果
最低0.47元/天 解锁文章
小刘儿啊
关注
专栏目录
响应式布局内容
Shelia_的博客
11-04 1135
响应式布局 课堂目标 掌握flex布局 掌握网格布局 掌握响应式布局 知识点 flex 布局（弹性布局）参考 分为主轴（main axis）和交叉轴（cross axis） flex容器属性： flex-direction：设置主轴的方向，默认 row row（默认值）：主轴为水平方向，起点在左端 row-reverse：主轴为水平方向，起点在右端 column：主轴为垂直方向，起点在上沿 column-reverse：主轴为垂直方向，起点在下沿 flex-wrap：定义换行方式，默认不
Bootstrap 4 Flex（弹性）布局
weixin_45116096的博客
07-12 327
Bootstrap 4 通过 flex 类来控制页面的布局。 弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。 弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计， 以下实例使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素： <!DOCTYPE html> <html> <head> <title>Boot.
Bootstrap5 Flex换行
最新发布
听海边涛声
08-31 4057
Bootstrap5 Flex换行
【响应式布局】使用 flexbox 实现简单响应式布局
落叶无声的专栏
11-19 941
使用 flex 实现响应式布局
前端之响应式布局,过度以及flex布局
上善若水
09-27 1133
一,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 1465
最简单的相应布局  父标签CSS配置 display: flex; /*外部容器设置为flex布局 内部才能进行布局操作*/ flex-direction: row;/*表示元素的走向*/ flex-wrap:wrap;/*声明元素是否换行*/ 子标签CSS配置 height:200px; margin:5px; flex-grow:1; flex-basis:300px; 这样就...
Bootstrap(包括scss)复习
qq_42199147的博客
10-05 1086
BootStrap 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。 中文镜像网站：http://www.bootcss.com 英文官网 http://getbootstrap.com 用于开发响应式布局、移动设备优先的 WEB 项目。 1.使用boot 1.创建boot02文件夹，在boot02中创建css和js文件，把4个文件复制进去，使用ws open boot02 2.在w...
技术分享PPT整理（一）：Bootstrap基础与应用
lmx736338483的博客
03-17 951
最近在复习的时候总感觉有些知识点总结过，但是翻了一下博客没有找到，才想起来有一些内容是放在部门的技术分享里的，趁这个时候跳了几篇相对有价值的梳理一下，因为都是PPT，所以内容相对零散，以要点和图片为主。 第一篇是我在工作上刚刚能稳步前行时完成的，Boostrap在我们的工作中占有一定的比重，为此我专门进行了深入学习，标题比较宽泛，但内容绝不是复述官网的流水账，Bootstrap虽然简单，而且也有新的布局模式诸如Flex、Grid此类，但其核心的开发思想————移动设备优先仍然对我们现在的开发有所指导，这篇分
CSS day_12(6.27) Boot常用组件
m0_70328115的博客
06-28 769
Boot常用组件（导航条、下拉菜单、模态框、轮播图）
读读antd源码之布局组件
ershing的博客
03-07 970
上次分享完antd的通用组件源码，这篇文章接着分享一下布局组件。
css弹性盒模型详解----flex-direction
qq_34451947的博客
11-13 965
本篇文章详细介绍flex-direction flex-direction 是控制盒模型容器下一级子元素的排列方式的属性 一共有四种 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 //第一种属性 flex-direct...
响应式布局
Emfts的博客
08-02 806
响应式布局1. 中文布局css库 响应式就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本，这个概念是为解决移动互联网浏览而诞生的，无论你的屏幕多大。 响应式布局通常分为三种： 一是利用弹性盒子Flex、网格布局Grid或左浮动法Float等 CSS 属性来实现的在一列上根据屏幕大小的不同而进行自动换行。 二是利用媒体查询来根据当前屏幕大小来运行相应的 CSS 代码。 三是利用 JavaScript 来获取窗口宽高来动态操作 DOM 元素。 响应式布局就是要达到这样的效果：无论屏幕宽窄，左右
flex 布局总结
weixin_30659829的博客
06-21 80
flex 布局总结 可调节横纵轴。有方便水平居中，设置等距间隔等好处。 1、确定主轴方向 .box { flex-direction: row | row-reverse | column | column-reverse; } row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿...
flex布局
xuxiaoping1989的博客
08-16 289
一、Flex布局是什么？ Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{  display: flex;} 行内元素也可以使用Flex布局。 .box{  display: inline-flex;} Webkit内核的浏览器，必须加上-webkit前缀。 .box{  display:
HTML & CSS笔记(没有基础内容，比如br标签是换行什么的)，CSS2.1，CSS3，响应式布局
殷志鹏的博客
07-04 644
每一个知识点都有相应的测试代码，你可以将代码复制到文件中，然后在浏览器中打开测试即可 推荐使用谷歌浏览器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 3075
文章目录一、优点二、实现三、执行过程（1）定义容器（2）定义行（3） 定义元素四、注意事项（1） 自动换行（2）向上兼容性（3）向下不兼容性 一、优点 同一套页面可以兼容不同分辨率的设备（例如手机和电脑访问同一页面可能由于分辨率的不同减低用户体验度，而响应式布局就很好的解决了这个问题） 二、实现 依赖与bootstrap的栅格系统来实现：将一个页面的一行划平均分为12个格子，栅格系统基于不同的分辨...
【Bootstrap】bootstrap入门之栅格布局、弹性布局、组件类_02
青春木鱼的博客
10-24 5028
Boot最重要的3个知识：手写媒体查询@media；栅格布局；scss。栅格布局，把所有的布局看做一行，用列数来表示每一个块占据宽度的大小，一行一共12列。栅格系统分为行.row和列.col,行必须包裹列。可以是一行包多列，也可以写多行包多列。
flex布局和响应式布局
qq_43711676的博客
05-10 3672
flex伸缩布局 页面响应式布局设计
Bootstrap——flex布局（定义弹性盒子、排列方向、内容排列、项目对齐、自身对齐、自动对等、等宽变换、自动边距、包裹、排序、对齐内容）
m0_69034993的博客
10-10 4364
使用flexbox容器上的.justiiy-content-*类可以改变flex子元素在主轴上的对齐（默认x轴开始，如果flex-direction:column则为y轴开始）*可以是从start(浏览器默认值）、end、center、between或around。改变Flex子容器在Flex容器中的包裹方式（可以实现弹性布局），其中包括无包裹.flex-nowrap类（浏览器默认）、包裹.flex-wrap类，或者反向包裹.flex-wrap-reverse类。任何一个容器都可以指定为Flex布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值