bootstrap模仿coze扣子智能体agent列表布局代码
代码语言:html
所属分类:布局界面
代码描述:bootstrap模仿coze扣子智能体agent列表布局代码
代码标签: bootstrap 模仿 coze 扣子 智能体 agent 列表 布局 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.3.0.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.1.2.css"> <style> .sidebar { background-color: #f8f9fa; height: 100vh; } .content { background-color: #ffffff; } .nav-link { color: #333; } .nav-link.active { color: #6610f2; font-weight: bold; } .bot-card { border: 1px solid #e0e0e0; border-radius: 8px; } .bot-icon { width: 48px; height: 48px; border-radius: 8px; } </style> </head> <body> <div class="container-fluid"> <div class="row"> <!-- 左侧边栏 --> <div class="col-2 sidebar p-3"> <h4 class="mb-4"><i class="fas fa-ghost text-primary"></i> 扣子</h4> <button class="btn btn-primary w-100 mb-4">+ 创建 Bot</button> <ul class="nav flex-column mb-4"> <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-home"></i> 主页</a></li> <li class="nav-item"><a class="nav-link active" href="#"><i class="fas fa-user"></i> 个人空间</a></li> </ul> <h6 class="mb-2">探索</h6> <ul class="nav flex-column"> <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-robot"></i> Bot 商店</a></li> <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-puzzle-piece"></i> 插件商店</a></li> <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-project-diagram"></i> 工作流商店</a></li> <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-cubes"></i> 模型广场</a></li> </ul> <hr> <h6 class="mb-2">团队空间 <i class="fas fa-plus"></i></h6> <div class="mt-auto"> <ul class="nav flex-column"> <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-code"></i> 扣子 API</a></li> <li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-shopping-cart"></i> 扣子专业版购买</a></li> </ul> <div class="d-flex align-items-center mt-3"> <img src="//repo.bfw.wiki/bfwrepo/image/649d3ce22371b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_32,h_32/quality,q_90" alt="User" class="rounded-circle me-2"> <small>美女 @用户23423429...</small> </div> </div> </div> <!-- 右侧主内容 --> <div class="col-10 content p-4"> <div class="d-flex justify-content-between align-items-center mb-4"> <h5><i class="fas fa-user"></i> 个人空间</h5> <button class="btn btn-outline-primary">创建 Bot</button> </div> <ul class="nav nav-tabs mb-4"> <li class="nav-item"><a class="nav-link active" href="#">Bots</a></li> <li class="nav-item"><a class="nav-link" href="#">插件</a></li> <li class="nav-item"><a class="nav-link" href="#">工作流</a></li> <li class="nav-item"><a class="nav-link" href="#">图像流</a></li> <li class="nav-item"><a class="nav-link" href="#">知识库</a></li> <li class="nav-item"><a class="nav-link" href="#">卡片</a></li> </ul> <div class="d-flex justify-content-between mb-4"> <div class="input-group" style="width: 300px;"> <input type="text" class="form-control" placeholder="搜索"> <button class="btn btn-outline-secondary" type="button"><i class="fas fa-search"></i></button> </div> <div class="dropdown"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"> 全部 </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">全部</a></li> <li&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0