首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

Web前端学习笔记之BootStrap

它支持响应式布局,并且在V3版本之后坚持移动设备优先。 为什么要使用Bootstrap?...Bootstrap下载 官方地址:https://getbootstrap.com 中文地址:http://www.bootcss.com/ 我们使用V3版本Bootstrap,我们下载是用于生产环境...我们只要在基本HTML元素通过设置class就能够应用上Bootstrap样式,从而使我们页面更美观和谐。... 表格 Class 描述 .table-striped 条纹状表格 .table-bordered 边框表格 .table-hover 鼠标悬停变色表格 .table-condensed...紧缩型表格 .table-responsive 响应式表格 状态类 Class 描述 .active 鼠标悬停在行或单元格时所设置颜色 .success 标识成功或积极动作 .info 标识普通提示信息或动作

2.8K20

【Java 进阶篇】深入了解 Bootstrap 栅格系统

Bootstrap 使用断点(breakpoint)来定义不同屏幕尺寸列宽。 以下是 Bootstrap 一些常见断点: sm(小屏幕):用于平板和较小桌面屏幕。...-- 列3(仅在大屏幕显示) --> 在这个示例中,我们有三列,每列都根据不同断点设置了不同宽度。...前两列在中等屏幕占据6列,在大屏幕占据4列。最后一列只在大屏幕显示,占据4列。 列偏移和偏移量 有时候,您可能希望在列之间创建一些空白,或将列向右移动。...在第二行第二列,我们使用了 offset-md-3 类来向右偏移3宽度,从而在列2和列3之间创建了空白。 列排序 有时,您可能希望在不同屏幕尺寸重新排列列顺序。...-- 列3 --> 在这个示例中,我们使用了 order-2 和 order-1 类来指定列1和列2在大屏幕显示顺序。

24520

BootStrap

Bootstrap下载   官方地址:https://getbootstrap.com   中文地址:http://www.bootcss.com/   我们使用V3版本Bootstrap,我们下载是用于生产环境...├── bootstrap.css.map │ ├── bootstrap.min.css // 核心CSS样式压缩文件,其他文件都是在这个核心文件基础加了一些其他样式 │ └── bootstrap.min.css.map...我们只要在基本HTML元素通过设置class就能够应用上Bootstrap样式,从而使我们页面更美观和谐。   基础模板:简单看看结构 表格 Class 描述 .table-striped 条纹状表格 .table-bordered 边框表格 .table-hover 鼠标悬停变色表格 .table-condensed...紧缩型表格 .table-responsive 响应式表格 状态类 Class 描述 .active 鼠标悬停在行或单元格时所设置颜色 .success 标识成功或积极动作

5.5K30

Bootstrap实用手册

Bootstrap 全局 css 样式-表格.table (1). .table 普通表格 (2). .table-bordered 边框表格 (3). .table-striped 隔行变色表格...栅格布局 好处:效率高,容易控制,实现响应式 不足:没有 栅格布局实际就是由 div 组成 table 样式响应式结构 使用方法: ①....可以在一个 div 中指定在不同屏幕下宽度占比,相同占比可简写为一个 语法: 释义:在 xs 中 占 9...Bootstrap 组件-媒体对象.media (1). .media-left:部分 (2). .media-body:主体 (3). .media-right:右部分 (4). 语法 ?...JS 插件.Bootstrap 基于 jQuery ,在 jQuery 基础提供了十几个插件函数,每个都是一个独立 JS 文件,可以一次性引入全部 JS 操作 - bootstrap.js,每个插件函数都有两种调用方式

5.9K20

Angular练习之animations动画二

引入动画模块>创建动画对象>在动画载体使用。我觉得其核心内容在创建动画对象,今天我们就来练习创建不同动画对象trigger ?...('left')">状态变成 状态变成右 <button (click)="changState...同时也有相反效果<em>的</em>":leave" 我们添加一个按钮,修改布局如下: 显示/隐藏 <div *ngIf="show"...每个关键帧都可以被指定一个偏移量,用来定义该关键帧将被用在动画期间哪个时间点。偏移量是一个介于0(表示动画起点)和1(表示动画终点)之间数组。 这里布局和ts代码我就跳过了。...并行动画组(Group)演示 总结 任意两个状态之间切换触发动画效果 入场和出场 Keyframes实现串联动画 Group实现并行动画 时间轴——等待100毫秒,然后运行200毫秒,并且缓动:'0.2s

91620

jQuery实现轮播效果

> 需求分析 点击向右(图标 平滑到下一页 无限循环切换,第一页一页为最后页,最后一页下页是第一页 每隔3s自动滑动到下一页 当鼠标进入图片区域时,自动切换停止,当鼠标离开后自动切换开始 切换页面时...,下面的圆点同步更新 点击圆点图标切换到对应页 点击向右(图标 平滑到下一页 要实现点击箭头向做向右移动我们需要 设置每次偏移量 PAGE_WIDTH 设置翻页持续时间 TIME 设置单元移动间隔时间...ITEM_TIME 求出单元移动偏移量 itemOffset = offset(偏移量)/(TIME/ITEM_TIME) 计算出要移动到目标位置 循环定时器进行平滑移动 代码实现 $(function...-PAGE_WIDTH : PAGE_WIDTH //计算单元移动偏移量 itemoffset var itemOffset = offset/(TIME/ITEM_TIME...nextPage我们要对nextPage进行一部分修改,因为传进来参数不止是boolean类型了,还有数字类型 /** * true:下一页 * false:一页 * 数值:指定下标页 *

6K20
领券