{"id":20339981,"url":"https://github.com/tengge1/bootstrap-es6","last_synced_at":"2026-05-07T20:42:13.938Z","repository":{"id":111392720,"uuid":"105272318","full_name":"tengge1/bootstrap-es6","owner":"tengge1","description":"bootstrap-es6将bootstrap框架中的组件封装为类，可以像ExtJs那样通过javascript动态生成页面。这对于功能特别多、特别复杂的页面特别有用。","archived":false,"fork":false,"pushed_at":"2017-10-29T13:06:25.000Z","size":1267,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-14T18:08:46.880Z","etag":null,"topics":["bootstrap","bootstrap4","class","ecmascript6","es6","javascript"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tengge1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-29T12:58:13.000Z","updated_at":"2020-08-16T02:22:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"fe29a5ce-36fa-430a-b8e1-326401737d27","html_url":"https://github.com/tengge1/bootstrap-es6","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tengge1%2Fbootstrap-es6","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tengge1%2Fbootstrap-es6/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tengge1%2Fbootstrap-es6/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tengge1%2Fbootstrap-es6/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tengge1","download_url":"https://codeload.github.com/tengge1/bootstrap-es6/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241867649,"owners_count":20033815,"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","bootstrap4","class","ecmascript6","es6","javascript"],"created_at":"2024-11-14T21:19:13.625Z","updated_at":"2026-05-07T20:42:08.910Z","avatar_url":"https://github.com/tengge1.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# bootstrap-es6 v1.0.0\n\nbootstrap-es6将bootstrap框架中的组件封装为类，可以像ExtJs那样通过javascript动态生成页面。这对于功能特别多、特别复杂的页面特别有用。它提供了多种通过javascript渲染页面元素的方法。\n\n方法一：\n\n```javascript\nvar container = new XContainer({\n    container: document.body,\n    children: [{\n        xtype: 'html',\n        html: 'Hello, world!'\n    }]\n});\ncontainer.render();\n```\n\n方法二：\n\n```javascript\nvar html = new XHtml({\n    html: 'Hello, world!'\n});\n\nvar container = new XContainer({\n    container: document.body,\n    children: [html]\n});\ncontainer.render();\n```\n\n方法三：\n\n```javascript\nvar container = X.create({\n    xtype: 'container',\n    container: document.body,\n    children: [{\n        xtype: 'html',\n        html: 'Hello, world!'\n    }]\n});\ncontainer.render();\n```\n\n这三种方法渲染出的页面是完全相同的。推荐使用方法一或方法三。但是如果页面特别复杂的话，可以使用类似方法二的方法一部分一部分创建页面，最后再组装起来。\n\n## 版本\n\n* jquery版本：3.2.1\n* bootstrap版本：4.0.0-beta\n* popper版本：1.12.5\n\n## 类库\n\n|       类名         |       xtype       |        类名          |       xtype        |      类名          |       xtype           |\n|-------------------|-------------------|----------------------|--------------------|--------------------|-----------------------|\n|   XBootstrap      |        无         |   XAlert             |   alert            |   XTextarea        |   textarea            |\n|   XType           |        无         |   XBadge             |   badge            |   XFile            |   file                |\n|   XCache          |        无         |   XBreadcrumb        |   breadcrumb       |   XInputGroup      |   inputgroup          |\n|   XEvent          |        无         |   XBreadcrumbItem    |   breadcrumbitem   |   XInputGroupAddon |   inputgroupaddon     |\n|   X               |        无         |   XButton            |   button           |   XJumbotron       |   jumbotron           |\n|   XObject         |     object        |   XLinkButton        |   linkbutton       |   XModal           |   modal               |\n|   XHtml           |     html          |   XButtonGroup       |   buttongroup      |   XNav             |   nav                 |\n|   XChild          |     child         |   XCard              |   card             |   XNavItem         |   navitem             |\n|   XExample        |     example       |   XCardImage         |   cardimage        |   XNavLink         |   navlink             |\n|   XContainer      |     container     |   XCardBody          |   cardbody         |   XTabPanel        |   tabpanel            |\n|   XContainerFluid |    containerfluid |   XCardTitle         |   cardtitle        |   XTabPanelItem    |   tabpanelitem        |\n|   XRow            |    row            |   XCardSubTitle      |   cardsubtitle     |   XNavbar          |   navbar              |\n|   XCol            |    col            |   XCardText          |   cardtext         |   XNavbarBrand     |   navbarbrand         |\n|   XMedia          |    media          |   XCardLink          |   cardlink         |   XNavbarToggler   |   navbartoggler       |\n|   XList           |    list           |   XCardHeader        |   cardheader       |   XNavbarCollapse  |   navbarcollapse      |\n|   XDefinitionList |   definitionlist  |   XCardFooter        |   cardfooter       |   XNavbarNav       |   navbarnav           |\n|   XDefinitionItem |   definitionitem  |   XCarousel          |   carousel         |   XDropdownMenu    |   dropdownmenu        |\n|   XCode           |   code            |   XCarouselInner     |   carouselinner    |   XPagination      |   pagination          |\n|   XImage          |   image           |   XCarouselItem      |   carouselitem     |   XPageItem        |   pageitem            |\n|   XTable          |   table           |   XListGroup         |   listgroup        |   XPopOver         |   popover             |\n|   XTHead          |   thead           |   XListGroupItem     |   listgroupitem    |   XProgress        |   progress            |\n|   XTBody          |   tbody           |   XCollapse          |   collapse         |   XTooltip         |   tooltip             |\n|   XTR             |   tr              |   XAccordion         |   accordion        |                    |                       |\n|   XTH             |   th              |   XAccordionItem     |   accordionitem    |                    |                       |\n|   XTD             |   td              |   XDropdown          |   dropdown         |                    |                       |\n|   XFigure         |   figure          |   XDropdownItem      |   dropdownitem     |                    |                       |\n|   XH1             |   h1              |   XForm              |   form             |                    |                       |\n|   XH2             |   h2              |   XFormGroup         |   formgroup        |                    |                       |\n|   XH3             |   h3              |   XLabel             |   label            |                    |                       |\n|   XH4             |   h4              |   XInput             |   input            |                    |                       |\n|   XH5             |   h5              |   XFormText          |   formtext         |                    |                       |\n|   XH6             |   h6              |   XFormCheck         |   formcheck        |                    |                       |\n|   XP              |   p               |   XSelect            |   select           |                    |                       |\n|   XHr             |   hr              |   XOption            |   option           |                    |                       |\n\n## 原理\n\n* bootstrap-es6并不是通过拼接字符串的方式生成页面，而是通过两个函数`document.createElement`和`[HTMLElement].appendChild`来动态渲染页面。\n* 当调用`XObject.render`函数时，它首先渲染最外层元素，然后最外层元素根据`children`属性列表中的`xtype`，创建相对应的类，来一层一层向内渲染。\n\n## 核心函数\n\n`XType`：用于管理class和xtype对应关系的类。\n\nXType.add(xtype, cls)：可以将xtype和class的对应关系添加进来，这样就可以在children列表中使用了。  \nXType.get(config)：通过属性配置动态生成一个类的实例，config中必须包含xtype属性。  \nXType.remove(xtype)：将某个xtype从XType类中移除。  \n\n`XCache`：用于管理id和实例对应关系的类。  \n\nXCache.add(id, instance)：将id和实例对应关系保存。  \nXCache.get(id)：通过id获取实例，不存在则返回null。  \n\n`XEvent`：用于给控件添加事件的类。  \n\nconstructor(target, listener, scope)：给target元素添加一些监听事件，scope为事件中的命名空间。  \nenable()：启用所有事件监听。  \ndisable()：停用所有事件监听。  \nadd(eventName, callback, scope)：为target添加一个事件。  \nremove(eventName, callback)：为target元素移除一个事件。  \n\n`X`：为方便使用创建的帮助类。  \n\nX.create(config)：通过xtype配置动态生成一个实例。  \nX.get(id)：通过id获取实例。  \n\n`XObject`：所有控件的基类。  \n\nconstructor(config)：通过配置生成类的实例。  \nrender()：将该控件及其子控件渲染到config.container容器中。  \n\n## 示例\n\njavascript代码：\n\n```javascript\nvar container = new XContainer({\n    container: document.body,\n    children: [{\n        xtype: 'form',\n        children: [{\n            xtype: 'formgroup',\n            children: [{\n                xtype: 'label',\n                text: 'Email address'\n            }, {\n                xtype: 'input',\n                type: 'email',\n                placeholder: 'Enter email'\n            }, {\n                xtype: 'formtext',\n                text: 'We\\'ll never share your email with anyone else.'\n            }]\n        }, {\n            xtype: 'formgroup',\n            children: [{\n                xtype: 'label',\n                text: 'Password'\n            }, {\n                xtype: 'input',\n                type: 'password',\n                placeholder: 'Password'\n            }]\n        }, {\n            xtype: 'formgroup',\n            children: [{\n                xtype: 'label',\n                text: 'Example select'\n            }, {\n                xtype: 'select',\n                children: [{\n                    xtype: 'option',\n                    text: '1'\n                }, {\n                    xtype: 'option',\n                    text: '2'\n                }, {\n                    xtype: 'option',\n                    text: '3'\n                }]\n            }]\n        }, {\n            xtype: 'formcheck',\n            text: 'Check me out'\n        }, {\n            xtype: 'formgroup',\n            children: [{\n                xtype: 'textarea',\n                html: 'test'\n            }]\n        }, {\n            xtype: 'formgroup',\n            children: [{\n                xtype: 'file'\n            }]\n        }, {\n            xtype: 'button',\n            type: 'submit',\n            text: 'Submit'\n        }]\n    }]\n});\ncontainer.render();\n```\n\n页面截图：\n\n![image](https://github.com/tengge1/bootstrap-es6/blob/master/image/example1.png)\n\n## 注意事项\n\n* bootstrap-es6 v1.0.0目前包含90个类，37个测试用例。但是，每个类提供的属性和方法太少太少，远远无法满足开发需要。建议下载源码，遇到缺少的属性和方法时自己添加进去，然后双击`webpack4win.exe`，就可以自动合并成一个js文件。\n* 目前，ie内核浏览器不支持ECMAScript6的一些语法，推荐使用谷歌浏览器。如果必须要兼容ie，可以使用工具将`bootstrap-es6.js`转换为ECMAScript5语法，即使用原型链的方式创建类和实现继承。\n\n## 网站\n\njquery API中文文档：http://jquery.cuishifeng.cn/\n\nBootstrap中文网：http://www.bootcss.com/\n\nBootstrap4文档国内镜像：https://v4.bootcss.com/docs/4.0/getting-started/introduction/\n\nECMAScript6入门：http://es6.ruanyifeng.com/\n\nPopper.js：https://popper.js.org/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftengge1%2Fbootstrap-es6","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftengge1%2Fbootstrap-es6","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftengge1%2Fbootstrap-es6/lists"}