这个Bootstrap 主题UI用起来太爽了!

大家好,我是「前端实验室」爱分享的了不起~

激活开源项目地址:Rain/idea-jihuo (gitee.com)

FastBootstrap 是一个前端 UI 框架,由知名软件开发商 Atlassian 出品,精心设计、开发并且维护的免费开源的 Bootstrap 主题,这是一款以 Bootstrap 为基础的 UI 框架。

提供了大量的组件、模板和开发工具,能够帮助我们快速构建出响应式、现代化的 web 应用。

使用过Bootstrap 的小伙伴都知道,Bootstrap 有着强大的响应式机制,FastBootstrap 基于 Bootstrap 提供了大量用于创建响应式布局的工具和组件,可以快速的创建出自动适应各种桌面、手机和平板屏幕尺寸的界面。

FastBootstrap UI组件

FastBootstrap 提供了大量的组件,如按钮、表单、导航栏、卡片、弹出框等等,我们常用的基本支持,使用起来也非常的简单方便,能过帮助我们快速创建出各种功能页面。

下载安装

CSS样式和JS文件引入

ini 复制代码
CSS样式文件引入<link href="https://cdn.jsdelivr.net/npm/fastbootstrap@2.2.0/dist/css/fastbootstrap.min.css" rel="stylesheet" integrity="sha256-V6lu+OdYNKTKTsVFBuQsyIlDiRWiOmtC8VQ8Lzdm2i4=" crossorigin="anonymous">
xml 复制代码
JS文件引入<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

当然你也可以下载到本地项目中直接引入,比如:

xml 复制代码
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>FastBootstrap 演示项目</title>    <link href="test/css/fastbootstrap.min.css" rel="stylesheet">  </head>  <body>    <h1>开始使用 FastbootStrap!</h1>    <script src="test/js/fastbootstrap.min.js"></script>  </body></html>

组件使用

可以看到使用起来很方便,你可以根据项目的需求,添加各种组件来构建界面。

bash 复制代码
<button type="button" class="btn btn-default">默认按钮</button><button type="button" class="btn btn-default" disabled>禁用</button><button type="button" class="btn btn-default active">选择</button>

FastBootstrap 是一个免费开源的前端框架,大家喜欢的可以自行尝试体验一番。

官方地址:fastbootstrap.com/

Github地址:github.com/fastbootstr...

相关推荐
撰卢11 分钟前
总结一下vue3的组件之间数据转递,子组件传父组件,父组件传子组件
前端·javascript·vue.js
前端开发爱好者1 小时前
Vue3 超强“积木”组件!5 分钟搞定可交互 3D 机房蓝图!
前端·javascript·vue.js
前端开发爱好者1 小时前
尤雨溪力荐!Vue3 专属!100+ 动效组件!
前端·javascript·vue.js
前端开发爱好者1 小时前
尤雨溪力荐!Vue3 生态最强大的 14 个 UI 组件库!
前端·javascript·vue.js
lb29171 小时前
关于多个el-input的自动聚焦,每输入完一个el-input,自动聚焦到下一个
前端·javascript·vue.js
lingliang1 小时前
使用 JS 渲染页面并导出为PDF 常见问题与修复
javascript·pdf·vue
sorryhc2 小时前
【AI解读源码系列】ant design mobile——Divider分割线
前端·javascript·react.js
前端进阶者2 小时前
electron-vite_20配置依赖包运行时区外部加载commonjsExternals_vite-plugin-commonjs-externals
前端·electron
anyup2 小时前
🔥 uView Pro 全新升级来啦!一行配置,解锁 uView Pro 全局 TS 类型提示与校验
前端·vue.js·uni-app
Jimmy2 小时前
使用 Electron 在 5 分钟内创建一个桌面的 React 应用
前端·javascript·electron