BootStrap4
文章平均质量分 84
学习笔记
May21☀️
这个作者很懒,什么都没留下…
展开
-
Day-15 bootstrap Flex(弹性)布局、多媒体对象
Flex(弹性)布局、多媒体对象弹性盒子(flexbox)1. 基础弹性盒子2. 水平方向(.flex-row / .flex-row -reverse)3. 垂直方向(.flex-column / .flex-column-reverse)4. 内容排列(.justify-content-* )5. 等宽(.flex-fill )6. 扩展(.flex-grow-1 )7. 排序(.order-1 到12)8. 外边距(.mr-auto / .ml-auto)9. 包裹(.flex-nowrap (默认原创 2020-10-22 17:12:24 · 833 阅读 · 0 评论 -
Day-14 bootstrap 滚动监听、小工具
滚动监听、小工具滚动监听(Scrollspy)1. 如何创建滚动监听2. 垂直滚动监听小工具1. 边框2. 边框圆角设置3. 浮动4. 响应式浮动5. 居中对齐6. 宽度、高度滚动监听(Scrollspy) 滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。1. 如何创建滚动监听 向您想要监听的元素(通常是 body)添加 data-spy=“scroll” 。 然后添加 data-target 属性,它的值为导航栏的 id 或 class (原创 2020-10-22 11:36:18 · 447 阅读 · 0 评论 -
Day-13 bootstrap 轮播图、模态框、提示框、弹出框
这里写目录标题轮播图1. 说明2. 简单的图片轮播3. 轮播图片上添加描述模态框1. 如何创建模态框2. 模态框尺寸提示框1. 如何创建提示框2. 指定提示框的位置弹出框![在这里插入图片描述](https://img-blog.csdnimg.cn/20201021221657529.png#pic_center)1. 如何创建弹出框2. 指定弹出框的位置3. 关闭弹出框轮播图1. 说明以下实例中使用的类说明:2. 简单的图片轮播代码如下:<!DOCTYPE html><原创 2020-10-22 09:18:18 · 485 阅读 · 0 评论 -
Day-12 bootstrap 输入框组、自定义表单
输入框组、自定义表单输入框组1. 基础输入框2. 输入框的大小(.input-group-lg / .input-group-sm)3. 多个输入框和文本4. 复选框与单选框5. 输入框添加按钮组6. 设置下拉菜单7. 输入框组标签自定义表单1. 自定义复选框2. 自定义单选框3. 自定义控件显示在同一行( .custom-control-inline )4. 自定义选择菜单5. 自定义滑块控件6. 自定义文件上传控件输入框组1. 基础输入框 我们可以使用 .input-group 类来向表单输入框原创 2020-10-21 20:41:49 · 592 阅读 · 0 评论 -
Day-11 bootstrap 表单、表单控件
表单、表单控件表单1. 表单布局2. 堆叠表单3. 内联表单(.form-inline)表单控件1. 支持的表单控件2. input2. textarea3. 复选框(checkbox)4. 单选框(radio)5. 下拉菜单(select)表单1. 表单布局 - 堆叠表单 (全屏宽度):垂直方向 - 内联表单:水平方向 表单元素 < input >, < textarea >, 和 < select > 在使用 .form-control 类的情况下原创 2020-10-19 22:01:29 · 361 阅读 · 0 评论 -
Day-10 bootstrap 导航、导航栏、面包屑导航
这里写目录标题导航1. 简单的导航(.nav .nav-item .nav-link)2. 导航对齐方式(.justify-content-center 局中 / .justify-content-end 局右)3. 垂直导航(.flex-column)4. 选项卡(.nav-tabs)5. 胶囊导航(.nav-pills)6. 导航等宽(.nav-justified)导航栏面包屑导航导航1. 简单的导航(.nav .nav-item .nav-link) 如果你想创建一个简单的水平导航栏,可以在原创 2020-10-19 21:03:57 · 1020 阅读 · 0 评论 -
Day-9 bootstrap 卡片、下拉菜单
卡片、下拉菜单卡片1. 简单的卡片(.card .card-body)2. 头部和底部(.card .card-head .card-body .card-footer)3. 多种颜色卡片4. 标题、文本和链接(.card-title .card-text .card-link)5. 图片卡片1. 卡片在头部 / 底部(.card-img-top / .card-img-bottom)2. 图片设置为背景(.card-img-overlay)下拉菜单1. 基础下拉菜单(.dropdown .dr原创 2020-10-15 21:37:32 · 340 阅读 · 0 评论 -
Day-8 bootstrap 徽章、进度条、分页、列表组
徽章、进度条、分页、列表组徽章1. 徽章(.Badges)2. 各种颜色类型的徽章3. 药丸形状徽章(.badge-pill)4. 徽章插入到元素内进度条1. 进度条(.progress)2. 进度条高度3. 进度条标签4. 不同颜色的进度条5. 条纹进度条(.progress-bar-striped)6. 动画进度条(.progress-bar-animated)7. 混合色彩进度条分页1. 分页2. 当前页页码状态(.active)3. 不可点击的分页链接(.disabled)4. 不同大小的分页(.p原创 2020-10-15 16:48:39 · 549 阅读 · 0 评论 -
Day-7 bootstrap 按钮、按钮组
按钮、按钮组按钮1. 样式( .btn-link 链接 .btn-颜色 )2. 按钮类可用于 < a >, < button >, 或 < input > 元素上3. 设置边框( .btn-outline-颜色)4. 不同大小的按钮( .btn-lg 大 .btn-sm 小 )5. 块级按钮( .btn-block )6. 激活和禁用的按钮( .active disabled )按钮组1. 按钮组( .btn-group )2. 按钮组的大小( .btn-group-原创 2020-10-14 19:39:31 · 549 阅读 · 0 评论 -
Day-6 bootstrap 图像形状、巨幕、信息提示框
Day-6 图像形状、巨幕、信息提示框图像形状、巨幕、信息提示框1. 圆角图片( .rounded )2. 椭圆图片( .rounded-circle )3. 缩略图--图片有边框( .img-thumbnail )4. 图片对齐方式( .float-left 左对齐 .float-right 右对齐)5. 响应式图片 ( .img-fluid )巨幕1. Jumbotron(超大屏幕)2. 全屏幕的 Jumbotron信息提示框1. 提示框颜色( .alert-颜色 )2. 提添加链接的提示框( .al原创 2020-10-13 20:28:57 · 607 阅读 · 0 评论 -
Day-5 bootstrap 表格
表格1. 基础表格(.table)2. 条纹表格(.table-striped)3. 带边框表格(.table-bordered)4. 鼠标悬停状态表格(.table-hover)5. 带有背景颜色的表格(.table-颜色)6. 带有背景颜色的条纹表格(.table-颜色 .table-striped)7. 带有背景颜色的鼠标悬停效果表格(.table-颜色 .table-hover)8. 指定意义的颜色类9. 表头颜色(.thead-dark / .thead-light)二级目录三级目录1. 基础原创 2020-10-13 18:59:13 · 271 阅读 · 0 评论 -
Day-4 Bootstrap4 颜色
颜色颜色具有代表意义的颜色类三级目录颜色具有代表意义的颜色类重要 三级目录原创 2020-10-12 21:33:10 · 300 阅读 · 0 评论 -
Day-3 文字排版
文字排版Bootstrap 4 默认设置: font-size 为 16px,line-height 为 1.5。所有的 < p >元素 margin-top: 0 、 margin-bottom: 16px。< h1 > ~ < h6 >样式知识点:h1大小为40px h2大小为32px h3大小为28px h4大小为24px h5大小为20px h6大小为16px代码如下:<!DOCTYPE html><html&原创 2020-10-10 23:57:29 · 763 阅读 · 0 评论 -
Day-2 栅格系统
栅格系统简介网格类实例简介 栅格系统也称为网格系统:把一行等分为12列,用col来设置元素要用12列中的多少列。Bootstrap 4 的网格系统是响应式的,列会根据屏幕大小自动重新排列。网格类 .col-sm-平板 -屏幕宽度等于或大于576px .col-md-桌面显示器 -屏幕宽度等于或大于768px .col-lg-大屏显示器 -屏幕宽度等于或大于992px .col-xl-超大显示器 -屏幕宽度等于或原创 2020-10-09 21:46:55 · 270 阅读 · 1 评论 -
Day-1 初步了解bootstrap
初识bootstrap简介下载创建第一个 Bootstrap 4 页面简介 Bootstrap(web前端UI框架),是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,它使得 Web 开发更加快捷。Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。下载 Bootstrap4 目前是 Bootstrap 的最新版本,可以在官网下载。地址:https://v4.bootcss.com/创建第一个 Bootstrap原创 2020-10-09 20:30:39 · 247 阅读 · 0 评论