Web前端105天-day14-BOOT

day14-boot第二天

目录

前言

一、工具类

1. 边框border

2. display显示

3.浮动

4.定位

5.flex布局

6.文本

二、布局 栅格系统 Grid

1.行和列

2.栅格布局中的间距

3.响应式栅格布局

总结

---

前言

boot第二天学习

---

一、工具类

1. 边框border

• 文档地址：Borders · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网
• 边框样式
  • border 边框的基础类，默认四个方向各有1px的边框
• 单方向边框
  • border-top 上边框
  • border-end 右边框
  • border-bottom 下边框
  • border-start 左边框
• 边框的宽度
  • border-{number} 0~5 0是去掉边框 1~5对应1px~5px的边框宽度
• 边框的颜色

  • border-{color} 颜色是用的是boot提供的颜色

• 边框圆角
  • rounded 边框圆角的基础类，四个方向都有圆角
  • rounded-circle 圆形  
  • rounded-pill 胶囊型

2. display显示

• 文档地址：display 属性 · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网
• 使用display属性，可以改变元素的显示模式
  • .d-none 表示元素消失
  • .d-block 表示元素以块级形式显示
  • .d-inline 表示元素以行内形式显示
  • .d-inline-block 表示元素以行内块形式显示
  • .d-flex 表示元素以弹性形式显示
• 显示方式都有响应式的写法，如.d-{类中缀}-{显示模式}

3.浮动

• 文档地址：Float · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网
• .float-start 左浮动
• .float-end 右浮动
• .float-none 不浮动
• 浮动也可以响应式 .float-{类中缀}-{浮动方式}
• 清除浮动

  • .clearfix 专门用于清除父元素高度坍塌问题的，要写在父元素中

  • 文档地址：清除浮动（Clearfix） · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网

4.定位

• 文档地址：Position · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网

• 定位方式：

  • position-relative 相对定位

  • position-absolute 绝对定位

  • position-fixed 固定定位

  • 注意：boot5版本新增了定位方向，5版本以前是没有定位方向，因此5以前版本定位需要自己写

• 位移方向：
  • top-{number} 对于顶部的位移，数值支持0 50 100，对应0% 50% 100%
  • bottom-{number} 对于底部的位移，数值支持0 50 100，对应0% 50% 100%
  • start-{number} 对于左侧的位移，数值支持0 50 100，对应0% 50% 100%
  • end-{number} 对于右侧的位移，数值支持0 50 100，对应0% 50% 100%
• 中心位置位移
  • .translate-middle 使用位移，X轴Y轴居中
  • 底层源码：transform: translate(-50%, -50%) !important;

5.flex布局

• 文档地址：Flex · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网
• flex主轴排序：

  • 行模式 flex-row 和 flex-row-reverse

  • 列模式 flex-column 和 flex-column-reverse

  • 还可以写成响应式flex-{类中缀}-{排序方式}

• 主轴的对齐方式：

  • .justify-content-start 起点对齐

  • .justify-content-end 终点对齐

  • .justify-content-center 居中对齐

  • .justify-content-between 两端对齐

  • .justify-content-around 环绕对齐

  • .justify-content-evenly 公平对齐

  • 还可以写成响应式.justify-content-{断点}-{对齐方式}

• 项目的交叉轴对齐方式：

  • .align-items-start 交叉轴起点对齐

  • .align-items-end 交叉轴终点对齐

  • .align-items-center 交叉轴居中对齐

  • 还可以写成响应式.align-items-{断点}-{对齐方式}

• 项目的增长与收缩：

  • .flex-grow-0 项目不可放大

  • .flex-shrink-0 项目不可收缩

  • .flex-grow-1 项目允许放大

  • .flex-shrink-1 项目允许收缩

	
		
		
		
		
		
		
	
	
		
		

			
			
第1个div
			
第2个div
			
第3个div
		
	

6.文本

• 文档地址：Text · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网
• 文本对齐方式

  • 注意：这个对齐方式是写给外层的块级父元素的

  • .text-start 文本、内联左对齐

  • .text-end 文本、内联右对齐

  • .text-center 文本、内联居中对齐

  • 响应式写法： .text-{断点}-{对齐方式}

• 字体

  • fw-bold 加粗体

  • fw-normal 正常体

  • fw-light 细体

  • fst-italic 斜体

• 文本的修饰线

  • text-decoration-line-through 删除线

  • text-decoration-underline 下划线

  • text-decoration-none 去除所有修饰线

• 组件小知识：按钮与按钮组
  • 文档地址：Button group · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网

  • .btn 按钮的基类

  • .btn-{color} 按钮的颜色

  • .btn-outline-{color} 带轮廓线的按钮

  • .btn-lg 大号尺寸的按钮

  • .btn-sm 小号尺寸的按钮

  • 按钮组，一个外层的div包裹着需要的几个按钮，给这个外层div加.btn-group即可

	
		
		
		
		
		
		
		
	
	
		

			
加粗文字
			
细体文字
			
普通文字
			
斜体文字
			
我想要删除线
			我不想要下划线
		
	

	
		
		
		
		
		
		
	
	
		

			按钮
			按钮
			带轮廓线的按钮
			大号的按钮
			小号的按钮
			
			

				编辑
				删除
			
		
	

二、布局 栅格系统 Grid

文档地址：Grid system · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网

1.行和列

• 父子布局，父元素包裹子元素，父元素使用.row(行)，子元素是父元素的列，使用.col-{number}
• 一行可以分成12列，每列所占的份额是.col-1
• 一行最多可以容纳12列,如果超出12列，那最后一个元素会自动换行
• 我们可以通过调整栅格布局中每列所占的份数，来改变布局的分配，如：一行四列

本块要占3个份额，也就是3/12
    
本块要占3个份额，也就是3/12
    
本块要占3个份额，也就是3/12
    
本块要占3个份额，也就是3/12

• 栅格布局的底层其实就是flexbox,也就是说，我们在使用栅格的同时，也可以使用flex的相关属性
• .row就相当于是父容器，.col-{number}就相当于是子项目

2.栅格布局中的间距

• 栅格布局中的列已经把所有空间分配完毕，如果我想让元素之间有间距，该怎么写？
• 虽然在栅格布局中，我们没有办法之间给元素加外间距，但是我们可以利用”天沟”
• 我们可以给元素外层嵌套一个div,利用这个div的左右12px的天沟充当里层元素的外间距

3.响应式栅格布局

• 栅格系统最大的作用就是能够帮我们实现响应式的布局
• 比如商品卡片的展示，会随着.container容器的大小变化而改变布局形式
• 比如lg时一行显示4组，md时一行显示3组，sm时一行显示2组，以下情况显示1组

	
		
		
		
		
		
		
		
	
	
		
		

			

				

					
					
					
					
					

						
						
						
						

							
							
							
							戴尔（DELL）MS116 鼠标有线 商务办公经典对称 有线鼠标
							
							
￥ 19.90
						
					
					
					

						

							
							华为笔记本电脑MateBook D 14 SE版 14英寸 11代酷睿 i5
							
￥ 3899.00
						
					
					

						

							
							雷柏（Rapoo） V500PRO 机械键盘 有线键盘 游戏键盘 104键混光键盘
							
￥ 109.00
						
					
					

						

							
							先马（SAMA）平头哥M1电竞版 Mini小机箱 支持MATX主板240水冷
							
￥ 179.00
						
					
					

						

							
							英特尔i5 10400F/10600KF i511400F
							
￥ 1299.00
						
					
					

						

							
							金士顿（Kingston）32GB USB3.2 Gen 1 U盘 DTX
							
￥ 27.90
						
					
					

						

							
							罗技（Logitech）C270高清网络摄像头 网课 摄像头家用 视频通话 带麦克风台式机电脑摄像头
							
￥119.00
						
					
					

						

							
							微软 Xbox Elite 无线控制器2代 二代精英手柄 无线手柄 蓝牙手柄 自定义设置/按键 Type C接口
							
￥ 1398.00
						
					
					

						

							
							佳能（Canon）MG3080无线家用彩色喷墨多功能一体机
							
￥ 459.00
						
					
					

						

							
							尼康(Nikon)D3500数码单反相机 入门级高清数码家用旅游照相机
							
￥ 4899.00
						
					
					

						

							
							康佳KKTV 21.5英寸 电脑显示器 家用办公屏幕便携全高清液晶监控显示屏外接K22Y
							
￥ 479.00
						
					
					

						

							
							高漫1060pro 数位板可连接手机手绘板电脑绘画板手写板写字板电子绘图板
							
￥ 138.00
						
					
				
	
			
		
	

 

 

---

总结

第14天学习完成