{"id":27228971,"url":"https://github.com/lszhn/bella","last_synced_at":"2025-04-10T12:39:37.343Z","repository":{"id":203499335,"uuid":"91422551","full_name":"lszhn/Bella","owner":"lszhn","description":"A JavaScript and SASS/SCSS based front frame.","archived":false,"fork":false,"pushed_at":"2018-08-01T00:12:15.000Z","size":1992,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-10-25T11:52:19.429Z","etag":null,"topics":["bootstrap","frontframe"],"latest_commit_sha":null,"homepage":"https://bella.huaji.io","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lszhn.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-05-16T06:17:10.000Z","updated_at":"2023-10-25T11:52:21.317Z","dependencies_parsed_at":null,"dependency_job_id":"2c37b2d4-1ac2-466d-917c-b41641accc63","html_url":"https://github.com/lszhn/Bella","commit_stats":null,"previous_names":["lszhn/bella"],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lszhn%2FBella","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lszhn%2FBella/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lszhn%2FBella/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lszhn%2FBella/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lszhn","download_url":"https://codeload.github.com/lszhn/Bella/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248217155,"owners_count":21066634,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","frontframe"],"created_at":"2025-04-10T12:39:36.282Z","updated_at":"2025-04-10T12:39:37.324Z","avatar_url":"https://github.com/lszhn.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Introduction and Demo\n\u003e NOTICE: Demo webpage is only for demonstrating, which are front-end functional ONLY.\n\nFor offical website, please visit:\n\nhttps://bella.huaji.io\n\n### Demo 1\n[Click Me!](https://bella.huaji.io/manage.html)\n\n\n\n![Demo1](demo_img/demo01.png)\n\n### Demo 2\n[Click Me!](https://bella.huaji.io/login.html)\n\n\n\n![Demo2](demo_img/demo02.png)\n\n### Documentation（zh-CN）\n\nBella FrontEnd Library 开发者文档\n\n  \n\n\n\u003e 此框架已停止维护！\n\n**最近的发行版：bl\\_tiger\\_1\\_5\\_1**\n\u003e \n\u003e 作者将继续无限期提供发行版CDN、文档和源码，但发行版不再更新。\n\u003e \n\u003e 项目（演示）官网：[https://bella.huaji.io](https://bella.huaji.io)\n\n\n\n# bellaScript\n\n使用 bellaScript 解释器来快速创建表单元素、表格等复杂HTML标签。\n\n### 3.1创建一个form\n```html\n    \u003cdiv class=\"bella-script\"\u003e\n    form{\n        (select)Select多重选择:(mySelect)[opt1,opt2];\n        (checkbox)CheckBox复选:(mycheck)[opt1,opt2];\n        (radio)Radio单选:(myradio)[opt1,opt2];\n    }\n    \u003c/div\u003e\n```\n### 3.2创建简单表格\n```html\n    \u003cdiv class=\"bella-script\"\u003e\n    table\n    {\n        col1 | col2 | col3 | col4;\n        data0 |data1 |data2 | \u003cbutton\u003e按钮\u003c/button\u003e;\n        data0 |data1 |data2 | \u003cbutton\u003e按钮\u003c/button\u003e;\n        data0 |data1 |data2 | \u003cbutton\u003e按钮\u003c/button\u003e;\n        data0 |data1 |data2 | \u003cbutton\u003e按钮\u003c/button\u003e;\n    }\n    \u003c/div\u003e\n```\n\n使用\n=======\n\n### 如何引入\n\n在header中添加\n```html\n    \u003clink href=\"https://bella.huaji.io/release/bella.css\" rel=\"stylesheet\"\u003e\n    \u003clink href=\"https://bella.huaji.io/release/default-theme.css\" rel=\"stylesheet\"\u003e\n    \u003cscript src=\"https://bella.huaji.io/release/jquery.bella.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://bella.huaji.io/release/bella.js\"\u003e\u003c/script\u003e\n```\n1\\. UI\n------\n\n### 1.1 单位长度与布局系统\n\n\u003e bella默认提供的单位长度为40px\n\n布局系统类似BS的栅格布局，但是远不如BS灵活（因为 bella 暂不支持响应式），我们可以用如下代码来创建一个简单的视图。\n```html\n     \u003cdiv class=\"raw-w\"\u003e\n            \u003cdiv class=\"raw-f\"\u003e\n                \u003cdiv class=\"col-24-10 bl-view bl-page\"\u003e\n                    \u003cdiv class=\"bl-view-header\"\u003ehello\u003c/div\u003e\n                    \u003cdiv class=\"bl-view-body\"\u003e\n                        hello bella!\n                    \u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n    \u003c/div\u003e\n```\n代码易见：bella 通过 _raw-{ WIDTH } _与 _col-{ WIDTH }-{ HEIGHT / AUTO } _来创建页面的骨架。\n\n### 1.2 视图\n\nbella 的页面是模块化的，任何一个基础的 可含content 的组件都是在视图的基础上继承而来。\n```html\n    \u003cdiv class=\"bl-view\"\u003e\n        \u003cdiv class=\"bl-view-header\"\u003e标题\u003c/div\u003e\n        \u003cdiv class=\"bl-view-body\"\u003e\n            视图体（允许多个）\n        \u003c/div\u003e\n    \u003c/div\u003e\n```\n### 1.3 标签视图\n\n继承自视图，是一种允许多 header 的视图。\n```html\n    \u003cdiv class=\"bl-tab-view\"\u003e\n        \u003cdiv class=\"bl-view-header\"\u003e\n            \u003cul\u003e\n                \u003cli class=\"bl-tab-view-active\"\u003eApple Inc.\u003c/li\u003e\n                \u003cli\u003eGoogle\u003c/li\u003e\n                \u003cli\u003eMicrosoft\u003c/li\u003e\n                \u003cli\u003eAmazon\u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"bl-view-body\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"bl-view-body\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"bl-view-body\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"bl-view-body\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n```\n### 1.4 弹出视图\n\n继承自视图，使用`bella.showPopView(\"#pop-view-id\")`来弹出视图。\n```html\n    \u003cdiv class=\"bl-pop-view\" id=\"demo-pop-view\"\u003e\n        \u003cdiv class=\"bl-view-body\"\u003e\n              This is a pop view!\n        \u003c/div\u003e\n    \u003c/div\u003e\n```\n2.功能\n----\n\n### 2.1 AjaxAuto\n```javascript\n    \u003ca href=\"#indexc.html\"\u003e\n```\n在 a 链接中使用 url-HASH，bella会自动执行 url 修改与内容替换。\n\n\u003e 旧版本的 IE 浏览器不兼容\n\n### 2.2 视图切换器（非Ajax实现，非iFrame）\n\n为 list 添加switch-tag后，bella 会根据 switch-tag 的 name（也即切换器的全局唯一名称），自动搜寻下一name，然后完成函数绑定操作。\n```html\n    \u003cul class=\"bl-sidebar switch-tag\" name=\"demo_switch\"\u003e\n        \u003ca\u003eApple Inc.\u003c/a\u003e\n        \u003ca\u003eGoogle\u003c/a\u003e\n        \u003ca\u003eMicrosoft\u003c/a\u003e\n        \u003ca\u003eAmazon\u003c/a\u003e\n    \u003c/ul\u003e\n    \n    \u003cul name=\"demo_switch\"\u003e\n        \u003cdiv class=\"bl-view-body\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"bl-view-body\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"bl-view-body\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"bl-view-body\"\u003e\u003c/div\u003e\n    \u003c/ul\u003e\n```\n\n### 2.3 页面通知\n\n\u003e 在 JavaScript 中通过 bella 对象使用框架内置函数\n```javascript\n    bella.notify(\"this is notification.\");\n    bella.alert(\"this is an alert message!\");\n```\n注意：本功能使用了时间戳来确定通知的唯一 ID，所以建议不要在其他功能中使用时间戳。\n\n### 2.4 MarkDown支持\n\n添加 bl-markdown 来实现自动的MarkDown转换。\n```html\n    \u003cdiv class=\"bl-view bl-markdown\"\u003e\n```\n\u003e API 修改：旧版本的 bella 在此处使用bl-page\n\n### 2.5 停驻式\n\n使用attach-tag实现滚动停驻\n```html\n    \u003cdiv class=\"raw-w default-subnav attach-tag\"\u003e\n        \u003cdiv class=\"raw-f\"\u003e\n            \u003ch2 class=\"col-13-a\"\u003e副标题\u003c/h2\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n```\n\n3.使用主题\n------\n\n替换dafault-theme.css来使用其他主题\n```html\n    \u003clink href=\"release/classic-theme.css\" rel=\"stylesheet\"\u003e\n```\n4.懒排版与自动排版\n----------\n\u003e 不建议使用的功能，会破坏文档流\n\n使用 .auto-compose 与 .lazy-compose 类，允许JavaScript 自动排版，请参考官网源码。\n\n5\\. 依赖库\n-------\n\nbella已经添加的依赖有：\n\nJQuery\n\nShowDown.js\n\nHighlight.js\n\nunslider.js\n\nECharts.js\n\n  \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flszhn%2Fbella","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flszhn%2Fbella","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flszhn%2Fbella/lists"}