bootstrap
文章平均质量分 89
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。
我耀学IT
Patience is key in life(耐心是生活的关键)
展开
-
我耀学IT—day07-bootstrap轮播
您可以通过将data-bs-ride设置为carousel,使轮播界面在页面加载时自动播放。自动播放轮播会在鼠标悬停时自动暂停。根据您的轮播内容(例如,纯文本幻灯片),您可能希望将 .bg-body 或一些自定义 CSS 添加到 .carousel-items 中,以实现适当的交叉淡入淡出。如果data-bs-ride设置为 true,而不是轮播,则轮播不会在页面加载时自动开始循环。将 data-bs-interval=“” 添加到 .carousel-item 以更改自动循环到下一个项目之间的延迟时间。原创 2024-03-17 21:23:03 · 1056 阅读 · 0 评论 -
我耀学IT—day06-导航栏
可以使用以下类来创建不同颜色导航栏:.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)。我们可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xxl|xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠)。导航栏上的选项可以使用 <ul> 元素并添加 class="navbar-nav" 类。原创 2024-03-10 21:01:28 · 1003 阅读 · 0 评论 -
我耀学IT—day05-Bootstrap下拉菜单与导航
如果你要设置选项卡是动态可切换的,可以在每个链接上添加 data-bs-toggle="tab" 属性。然后在每个选项对应的内容的上添加 .tab-pane 类,对应选项卡的内容的 <div> 标签使用 .tab-content 类。div 元素上添加 .dropdown-menu 类来设置实际下拉菜单,然后在下拉菜单的选项中添加 .dropdown-item 类。如果我们想让下拉菜单右对齐,可以在元素上的 .dropdown 类后添加 .dropend 或 .dropstart 类。原创 2024-03-01 14:27:40 · 1246 阅读 · 0 评论 -
我耀学IT—day04-分页及列表组
我耀学IT] Patience is key in life。[我耀学IT] Patience is key in life。网页开发过程,如果碰到内容过多,一般都会做分页处理。Bootstrap 5 可以很简单的实现分页效果。如果你想鼠标悬停显示灰色背景就添加。可以将分页条目设置为不同的大小。要创建一个链接的列表项,可以将。元素的 <a> 标签上添加。要创建一个基本的分页可以在。大部分基础列表组都是无序的。类设置大字体的分页条目,原创 2024-02-27 09:14:54 · 1026 阅读 · 0 评论 -
我耀学IT—day03-徽章及进度条
如需使用徽章,只需要将 .badge 类加上带有指定意义的颜色类 (如 .bg-secondary) 添加到 <span> 元素上即可。我们可以在提示框中的 div 中添加 .alert-dismissible 类,然后在关闭按钮的链接上添加 class="btn-close" 和 data-bs-dismiss="alert" 类来设置提示框的关闭操作。[我耀学IT] Patience is key in life。[我耀学IT] Patience is key in life。原创 2024-02-26 09:15:57 · 893 阅读 · 0 评论 -
我耀学IT—day02-Bootstrap排版及按钮
提供背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。此外,所有的 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。原创 2024-02-25 10:01:36 · 972 阅读 · 0 评论 -
我耀学IT—day01-Bootstrap介绍
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap是前端开发中比较受欢迎的框架,简洁且灵活。它基于HTML、CSS和JavaScript,HTML定义页面元素,CSS定义页面布局,而avaScript负责页面元素的响应,Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件,用起来简洁灵活,使得 Web 开发更加快捷。原创 2024-02-25 09:35:45 · 1315 阅读 · 0 评论