Bootstrap 5
文章平均质量分 91
Bootstrap 5 学习笔记
_ZestyJt
这个作者很懒,什么都没留下…
展开
-
学习 Bootstrap 5
学习 Bootstrap 51. [列使用 (栅格布局系统)](https://blog.csdn.net/qq_37354060/article/details/122516540)2. [列中的对齐方式 (列)](https://blog.csdn.net/qq_37354060/article/details/122510635)3. [排版](https://blog.csdn.net/qq_37354060/article/details/122513202)4. [背景颜色](https://b原创 2022-01-23 16:54:40 · 846 阅读 · 0 评论 -
学习 Bootstrap 5 之 Forms
学习 Bootstrap 5 之 概述表单 (Forms)原创 2022-01-22 11:21:11 · 2685 阅读 · 1 评论 -
学习 Bootstrap 5 之 Text
学习 Bootstrap 5 之 文本文本 (Text)文本 (Text)Bootstrap 5 官方文档原创 2022-01-22 10:30:00 · 1948 阅读 · 0 评论 -
学习 Bootstrap 5 之 Overflow 和 Vertical alignment
学习 Bootstrap 5 之 文本溢出 和 垂直排版文本溢出 (Overflow)垂直排版 (Vertical alignment)文本溢出 (Overflow)Bootstrap 5 官方文档垂直排版 (Vertical alignment)Bootstrap 5 官方文档原创 2022-01-22 00:15:00 · 1363 阅读 · 0 评论 -
学习 Bootstrap 5 之 Sizing 和 Spacing
学习 Bootstrap 5 之 尺寸 和 间距尺寸 (Sizing)尺寸 (Sizing)Bootstrap 5 官方文档原创 2022-01-20 17:15:42 · 1752 阅读 · 0 评论 -
学习 Bootstrap 5 之 Position 和 Shadows
学习 Bootstrap 5 之 层定位 和 阴影层定位 (Position)1. 层顶位方式 (Position values)2. 元素排列 (Arrange elements)(1). 属性(2). 值(3). 使用3. 元素居中化层定位 (Position)Bootstrap 5 官方文档1. 层顶位方式 (Position values)定位方式类固定定位.position-fixed相对定位.position-relative绝对定位.positio原创 2022-01-19 13:45:00 · 988 阅读 · 0 评论 -
学习 Bootstrap 5 之 Interactions
学习 Bootstrap 5 之 交互Interactions1. 网页文本选择 (Text selection)(1). 全部选中 class = "user-select-all(2). 按词选中 class="user-select-auto" (默认)(3). 不可选中 class="user-select-none"2. 鼠标指针事件 (Pointer events)注意简单处理InteractionsBootstrap 5 官方文档用户如何与网页内容交互1. 网页文本选择 (Text s原创 2022-01-18 23:00:00 · 691 阅读 · 0 评论 -
学习 Bootstrap 5 之 Colors 和 Opacity
学习 Bootstrap 5 之 颜色 和 不透明度原创 2022-01-18 10:29:12 · 2048 阅读 · 0 评论 -
学习 Bootstrap 5 之 Display 和 Float
学习 Bootstrap 5 之 显示属性 和 浮动流定位机制原创 2022-01-17 13:27:25 · 1030 阅读 · 0 评论 -
学习 Bootstrap 5 之 Borders
学习 Bootstrap 5 之 边框边框 (Borders)1. 添加边框 (Border)(1). 四周添加边框 class = "border"(2). 仅添加上边框 class = "border-top"(3). 仅添加下边框 class = "border-bottom"(4). 仅添加左边框 class = "border-start"(5). 仅添加右边框 class = "border-end"(6). 除去四周边框 class = "border-0"(7). 仅除去上边框 class原创 2022-01-17 02:00:00 · 2139 阅读 · 0 评论 -
学习 Bootstrap 5 之 Background
学习 Bootstrap 5 之 背景背景 (Background)1. 背景颜色 (Background color)2. 背景渐变 (Background gradient)3. 不透明度 (Opacity)背景 (Background)Bootstrap 5 官方文档1. 背景颜色 (Background color) <div class="bg-primary">.bg-primary</div> <div class="bg-secondary"&g原创 2022-01-16 17:43:54 · 2307 阅读 · 0 评论 -
学习 Bootstrap 5 之 Tables
学习 Bootstrap 5 之 表格表格 (Tables)1. 创建表格(1). 使用原生的表格标签(2). 使用Bootstrap 5 的提供的表格标签类(3). 原生与Bootstrap创建出来的表格的对比2. 表格样式(1). 表格样式的效果(2). 表格样式的使用1). 用于 <table> 标签2). 用于 <thead> <tbody> <tfoot> 标签表格 (Tables)1. 创建表格(1). 使用原生的表格标签<tabl原创 2022-01-16 01:05:42 · 1543 阅读 · 0 评论 -
学习 Bootstrap 5 之 Images 和 Figure
学习 Bootstrap 5 之 图片图片 (Images)1. 响应式图片(1). 原理(2). 使用 class = "img-fluid" 响应式图片(3). 图片简易边框 class = "img-thumbnail"(4). 图片排版1). 左对齐 class = "rounded float-start"2). 右对齐 class = "rounded float-end"Figure图片 (Images)Bootstrap 5 官方文档1. 响应式图片(1). 原理 通过设置图片的原创 2022-01-16 00:23:50 · 653 阅读 · 0 评论 -
学习 Bootstrap 5 之 Bootstrap 和 Breakpoints
学习 Bootstrap 5 之 Bootstrap 和 断点Bootstrap1. 什么是Bootstrap?2. 使用Bootstrap(1). 直接下载(2). 使用CND(3). 在Vue CLI中安装Breakpoints (断点)(1). 什么是断点(2). 默认的六种断点(3). 断点的作用Bootstrap1. 什么是Bootstrap? Bootstrap 是一个前端框架,用于构建响应式、移动设备优先的网站2. 使用Bootstrap(1). 直接下载官网下载地址:下载地址原创 2022-01-15 22:00:36 · 640 阅读 · 0 评论 -
学习 Bootstrap 5 之 Grid
学习 Bootstrap 5 之 栅格栅格布局系统 (Grid system)1. 什么是栅格布局系统?2. 特点(1). 支持六种响应式布局(2). 容器会居中和水平填充内容(3). 每一列都有水平填充器(称为gutter),用于控制列与列之间的间距(4). 每行有12个模板列,允许创建跨任意数量列的元素的不同组合(5). Gutter也是响应式和可自定义的(6). 修改sass文件中的值, 可以改变这些默认的设置3. 栅格布局选项4. 使用(1). 简单的例子(2). 默认情况下, 会均分每一行的12列原创 2022-01-15 21:51:10 · 1913 阅读 · 2 评论 -
学习 Bootstrap 5 之 Containers
学习 Bootstrap 5 之 容器容器 (Containers)1. 什么是容器?2. 三种容器(1). .container(2). .container-fluid(3). .container-{断点}(4). 容器宽度表格容器 (Containers)Bootstrap 5 官方文档1. 什么是容器? 容器是Bootstrap一个基本的构建块, 它包含、填充和对齐给定设备或视口中的内容。 可以简单理解为人家写好的样式, 只需要我们在class种加入这些容器对应的名字, 就可以使用这原创 2022-01-15 21:41:17 · 899 阅读 · 0 评论 -
学习 Bootstrap 5 之 Typography
学习 Bootstrap 5 之 排版排版 (Typography)1. 标题 (Headings)(1). 使用原生的标题标签(2). 使用Bootstrap 5 的提供的标题标签类(3). 使用Bootstrap提供的副标题类 class = "text-muted"(4). 使用Bootstrap 5 的提供的更大的标题标签类disply系列类与h系列标签比较display系列类的参数2. 段落突出 (Lead)3. 内联文本元素 (Inline Text Elements)(1). 使用原生的内联文原创 2022-01-15 18:44:04 · 603 阅读 · 0 评论 -
学习 Bootstrap 5 之 Colunms
学习 Bootstrap 5 之 列列 (Columns)1. 列在垂直方向的对齐方式 (整行都发生变化)(1). 居顶 class = "row align-items-start" (默认)(2). 居中 class = "row align-items-center"(3). 居低 class = "row align-items-end"(4). 三种对齐方式的比较2. 列在垂直方向的对齐方式 (指定列发生变化)(1). 居顶 class = "col align-self-start" (默认)(原创 2022-01-15 17:22:05 · 784 阅读 · 1 评论 -
学习 Bootstrap 5 之 Breakpoints Containers Grid
学习 Bootstrap 5 ------ 1Bootstrap1. 什么是Bootstrap?2. 使用Bootstrap(1). 直接下载(2). 使用CND(3). 在Vue CLI中安装BreakPoint三级目录Bootstrap1. 什么是Bootstrap? Bootstrap 是一个前端框架,用于构建响应式、移动设备优先的网站2. 使用Bootstrap(1). 直接下载官网下载地址:下载地址(2). 使用CND<link href="https://cdn.jsde原创 2022-01-14 19:53:06 · 625 阅读 · 0 评论