网站模板

Simple Sidebar

An off canvas sidebar navigation Bootstrap HTML template created by Start Bootstrap

这个模板的介绍暂时还没有中文版本,先以英文显示。

Website · 免费

Simple Sidebar

页面

在线演示的逐页截图,在页面框内滚动可查看完整页面。

/startbootstrap-simple-sidebar/Simple Sidebar - Start Bootstrap Template
Simple Sidebar 网站模板,/startbootstrap-simple-sidebar/ 页面,第 1 部分

设计解读

AI 对这套模板设计的解读:配色、字体、间距、区块和标志性细节。使用模板时,Ottermind 会以它为起点。

这份解读暂时还没有中文版本,先以英文显示。

Overall

dashboard, clean, low density, light

Palette

background #ffffff; surfaces [#0d6efd]; text #212529; muted text #636464; primary #0d6efd; accents [#d63384]

Type

headings system-ui, 500, sentence-case; body system-ui, 16px; scale h1 40px

Shape & spacing

button radius 6px, no borders, no shadows, section spacing 24px, content width 100% (fluid)

Sections (top to bottom)
  • Top navbar — horizontal layout, 3 items right-aligned (Home, Link, Dropdown), blue toggle button left-aligned, white background, thin top border
  • Sidebar — vertical navigation on left, fixed width, light gray background, list items stacked with 1px bottom border, dark text, hover state not visible
  • Main content — full-width area with large headline, paragraph text, and inline code snippets in purple, white background, aligned to right of sidebar
Signature details
  • Blue "Toggle Menu" button with rounded corners
  • Purple inline code syntax highlighting (#page-content-wrapper, #sidebarToggle)
  • Collapsible sidebar behavior indicated by responsive design
  • Minimalist layout with ample whitespace
  • Fixed-position sidebar with non-overlapping content wrapper
  • System UI font stack across all elements
Other pages
  • /dashboard: same structure, different content
  • /shortcuts: same structure, different content
  • /overview: same structure, different content
  • /events: same structure, different content
  • /profile: same structure, different content
  • /status: same structure, different content

模板信息

分类
Website
技术栈
Bootstrap, HTML5
许可
MIT
作者
Start Bootstrap
价格
免费
  • bootstrap
  • bootstrap-4
  • bootstrap-5
  • bootstrap-5-template
  • bootstrap-template
  • bootstrap-theme
  • bootstrap4
  • bootstrap5
  • bootstrap5-template
  • css
  • free
  • html

原始设计来自 Start Bootstrap,发布于 Start Bootstrap。Ottermind 不会复制模板代码,而是根据需求生成一个全新的网站。

Ottermind 起步用的需求

它会作为草稿在 Studio 中打开,发送前先补充你的品牌、受众和页面。

Build a website website inspired by the "Simple Sidebar" template. Reference brief: An off canvas sidebar navigation Bootstrap HTML template created by Start Bootstrap Style and features to reflect: bootstrap, bootstrap-4, bootstrap-5, bootstrap-5-template, bootstrap-template, bootstrap-theme. Use original copy and imagery for my brand rather than the reference's placeholder content.

如何使用这个模板

  1. 1

    点击「使用这个模板」,在 Ottermind Studio 中打开并自动填入需求。

  2. 2

    在需求里补充你的品牌、受众、页面和内容。

  3. 3

    Ottermind 以这套设计为灵感生成一个全新网站,你可以在对话中继续修改。