CSS day_11(6.24) Boot栅格系统和常用组件
复习
- 颜色
- 背景色.bg-{color}
- 字体色 .text-{color}
- 边框色 .border .border-{color}
- 按钮色 .btn .btn-{color}
- 连接色 .link-{color}
- 标题相关的
- .h1~.h6 和h标签一样大小
- .display-1~.display-6 比标题标签还大的字号
- 表格
- 基础类.table
- table的背景色table-{color}，可以加给table中的任何结构标签
- 条形纹，隔行变色.table-striped
- 鼠标悬停的背景色.table-hover
- 边框色 .table-bordered 有默认颜色，在家bg-{color}
- td中的垂直对齐方式， .align-{位置} 位置：top，middle，bottom
- 表单
- .form-control ，input的空间
- .form-label label标签的样式
- .input-group 表单组，表单组的固定文本部分.input-group-text
- .form-check 选框组
- 针对单选和多选的选框form-check-input
- .form-check-label 选框的描述文字
- form-select下拉菜单
- 尺寸
- 宽度w-{num}，高度h-{num}，0,25,50,75,100
- vw-100和vh-100 针对视口的尺寸
- 边框
- .border 边框的基础类，.border-{方向}
- border-{num}，0-5
- border-{color}
- 圆角 .rounded ，圆角弧度rounded-{num} 1-3
- .rounded-circle 圆形
- .rounded-pill 胶囊型
- 间距（内外间距）
- m-{num}，p-{num} 0-5
- m-auto
- mt，pt上间距，mb，pb下间距，ms，ps左间距，me，pe右间距
- my，py上下间距，mx，px左右间距
- 响应式 m-{类中缀}-{num}，p-{类中缀}-{num}
- display
- .d-bolck 块级显示
- .d-inline 内联显示
- .d-inline-block 行内块
- .d-flex 弹性盒
- .d-none 元素消失
- 以上类有响应式写法 .d-{类中缀}-{显示形式}
- 浮动
- float-start 左浮动
- float-end 右浮动
- float-none 不浮动
- float-{类中缀}-{方式}
- clearfix 清除浮动。写给父元素
- 定位
- .position-relative 相对定位
- .position-absolute 绝对定位
- .position-fixed 固定定位
- 方向top-{num}，bottom-{num},start-{num},end-{num},0,50,100
- 回移translate-middle 双方向回移元素的50%
- .translate-middle-x
- .translate-middle-y
- 文本对齐
- .text-start 默认文本居左对齐
- .text-end 文本居右对齐
- .text-center 文本居中对齐
- 可使用响应式对齐 .text-{类中缀}-{方向}
- 字体字形
- .fw-bold 加粗体
- .fw-light 细体
- .fst-italic 斜体
- 文本修饰线
- text-decoration-none 无修饰线
- .text-decoration-underline 下划线
- .text-decoration-line-through 删除线
问题的总结
- 背框架名字，被类名
- 拷贝案例
栅格系统
1.栅格系统的底层
栅格系统的底层使用的是flex弹性盒布局，简言之，在栅格系统中就可以使用flex的相关属性。
Flex · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网
- 行布局或者列布局
- 是否换行
- 主轴的对齐方式
- 交叉轴对齐方式
- ……
2.栅格布局的行与列
栅格布局分行.row，列在行中.col-{num}num：1-12，每一个行中的列，都可以分12份中的其中n份。
在栅格布局中可以使用flex的属性，row行就是容器，col列就是项目
<div class="row">
<div class="col-4 zdy-h bg-primary"></div>
<div class="col-4 zdy-h bg-danger"></div>
<div class="col-4 zdy-h bg-info"></div>
<div class="col-4 zdy-h bg-success"></div>
<div class="col-4 zdy-h bg-warning"></div>
</div>
3.响应式的栅格布局
响应式支持六个断点，基于媒体查询的。栅格布局使用响应式的布局方式，行row不需要改，需要改的是列的写法。.col-{类中缀}-{num}
- .col-{num}小于sm的时候
- .col-sm-{num}在sm范围的时候
- .col-md-{num}在md范围的时候
- .col-lg-{num}在lg范围的时候
- .col-xl-{num}在xl范围的时候
- .col-xxl-{num}在xxl范围的时候
练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/bootstrap-icons.css">
<script src="../js/bootstrap.bundle.js"></script>
<title>Document</title>
<style></style>
</head>
<body>
<!-- 产品的列表页 products-->
<div class="products">
<div class="container">
<!-- 是一张大的全屏图 -->
<div class="">
<img src="" alt="">
</div>
<!-- row指的是左右两侧的列表和公告区 -->
<div class="row">
<!-- 左侧列表区域 -->
<div class="col-xl-9 col-12" style="background-color: red;height: 300px;"></div>
<!-- 右侧公告区 -->
<div class="col-xl-3 d-none d-xl-block" style="background-color: blue;height: 300px;"></div>
</div>
</div>
</div>
</body>
</html>
4.栅格嵌套使用
嵌套栅格布局，行套列，嵌套也必须是行套列
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
组件
1.按钮
- .btn 按钮的基础类
- .btn-primary 按钮颜色
- .btn-outline-{color}带轮廓线的按钮
- 按钮尺寸.btn-sm,.btn-lg
- 按钮组.btn-group
2.手风琴
Accordion · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网
- 手风琴最外层元素
- .accordion基础类
- id="sfq"id属性要写最外层的id值，这个值后面会用到
- 手风琴的其中一组
- .accordion-item手风琴组
- 手风琴组的标题区.accordion-header
- 手风琴组的按钮.accordion-button
- 手风琴组按钮有js功能
- data-bs-toggle="collapse"折叠功能
- data-bs-target="#one"折叠的内容对应折叠元素的id
- 折叠展示区.accordion-collapse
- .collapse消失
- 消失对应的类.show显示类
- 折叠区域因为要被控制打开或折叠因此需要id属性id="one"
<div class="accordion mt-3" id="sfq">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#one">数据管理
</button>
</h2>
<div id="one" class="accordion-collapse collapse show" data-bs-parent="#sfq">
<div class="accordion-body">
第一个手风琴的内容
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#two">
内容管理
</button>
</h2>
<div id="two" class="accordion-collapse collapse" data-bs-parent="#sfq">
<div class="accordion-body">
第二个手风琴内容
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#three">功能页面</button>
</h2>
<div id="three" class="accordion-collapse collapse" data-bs-parent="#sfq">
<div class="accordion-body">
第三个手风琴内容
</div>
</div>
</div>
</div>
3.列表组
List group · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网
<ul class="list-group list-group-flush">
<li class="list-group-item">商品列表</li>
<li class="list-group-item">多条件搜索</li>
<li class="list-group-item">添加商品</li>
</ul>
4.图标
需要引入图标的css类库,同时还需要一个文件夹fonts自定义字体的文件夹
<link rel="stylesheet" href="../css/bootstrap-icons.css">
使用方式，和文字相同，使用一个内联元素,图标都有对应文字可以挑选
Bootstrap 图标库 · Bootstrap 官方开源图标（icon）库
<i class="bi-sun"></i>
5.卡片
<div class="card">
<img src="./img/xz-img/products/57b12a31N8f4f75a3.jpeg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">联想x234 128g</h5>
<p class="card-text">￥6499.00</p>
<div class="d-flex mb-2">
<button class="btn btn-primary">-</button>
<input type="text" class="w-25 mx-1">
<button class="btn btn-primary">+</button>
</div>
<a href="#" class="btn btn-primary w-100">加入购物车</a>
</div>
</div>
CSS day_11(6.24) Boot栅格系统和常用组件相关推荐
- html栅格系统显示边框,Bootstrap整体框架之CSS12栅格系统
1.整体架构 BootStrap框架公共六个部分:(css组件和js插件是其表现形式,其余的是基础支撑平台) 表现形式CSS组件 JS插件 基础支撑平台CSS12栅格系统 基础布局组件 jQuery ...
- [css] 你有使用过哪些栅格系统？都有什么区别呢？
[css] 你有使用过哪些栅格系统?都有什么区别呢? bootstrap3 float完成的栅格 bootstrap4 flex完成的栅格 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易 ...
- CSS - 响应式布局（二）响应式栅格系统
目录 响应式栅格系统 栅格 栅格系统 响应式栅格系统 BootStrap响应式栅格系统 简单说明 利用SCSS实现BootStrap的响应式栅格系统 响应式栅格系统 栅格 在弄清楚响应式栅格系统前,我 ...
- CSS 学习笔记 - 网格布局（栅格系统）
CSS 学习笔记 - 网格布局(栅格系统) 开启网格模式 基本概念 属性说明 容器属性 内容属性 效果展示 grid-template-rows.grid-template-columns 基本用法 ...
- Bootstrap入门、CSS样式【栅格系统】
1.WWW:What.Why.Where What:Bootstrap是一个前端开发框架.简单点说就是别人写好的效果封装起来. Bootstrap是2011年Twitter团队为了方便维护PC端和手机 ...
- Bootstrap入门全局CSS之概览栅格系统
WWW What? ①.诞生于2011年,来自Twitter公司,是目前最受欢迎的前端框架 ②.是一个用于快速开发Web应用程序和网站的前端框架 ③.Bootstrap是基于HTML.CSS.JS的, ...
- html页面栅格系统,详解CSS中的栅格系统
说到栅格系统(grid system),你也许见过这样的概念: 像这样,通过固定的格子结构,来进行布局设计.这是一种设计风格,而且一直以来很广泛地应用于网页设计领域.这样的风格清晰.工整,可以让网页具 ...
- html页面栅格系统,分享响应式CSS栅格系统
分享响应式CSS栅格系统 栅格系统 这种东西和许多同类工具/素材一样,"系统"二字让它看起来无比高大上,而实际上大多数的栅格系统 只是一系列纵横交错的细线构成.很简单?看起来确实如 ...
- css删格系统填充颜色,CSS 栅格系统
Grid CSS 栅格布局中最重要的两个元素是 wrapper(parent) 和 items(children).wrapper 实际上就是栅格,而 items 就是栅格里面的元素. 以下面的代码为 ...
最新文章
- golang标准库http服务器处理流程
- python输出方格_Python蓝桥杯练习 剪格子
- Struts2整合SiteMesh
- 《网络编程》ioctl 操作
- go kegg_GO，KEGG富集分析工具——DAVID
- maven 生成本地库_在2017年从Maven工件生成P2存储库
- 数据的冗余和数据的完整性 1006
- Spring容器父子关系
- 个推消息推送SDK通知栏铃声功能解析及使用攻略
- 最详细、最全面的【Java日志框架】介绍，建议收藏，包含JUL、log4j、logback、log4j2等所有主流框架
- VARCHART XGantt v5.2用户手册：甘特图如何Drag Drop
- 小甲鱼Python第十九讲（函数，我的地盘听我的）
- HTML：如何设置网页标题上的图标
- Android8.0 NotificationChannel修改铃声和振动的坑
- UDP（用户数据报协议）
- 伤害你的，是你对事情的看法
- tf-toturial
- 软件工程师英文提高的方法分享
- IOS学习之斯坦福大学IOS开发课程笔记(第二课)
- 关于matlab licence许可到期问题