{"id":19251368,"url":"https://github.com/springtype-org/st-bootstrap","last_synced_at":"2025-02-23T16:40:48.262Z","repository":{"id":41754853,"uuid":"223237222","full_name":"springtype-org/st-bootstrap","owner":"springtype-org","description":"Bootstrap 4 for SpringType","archived":false,"fork":false,"pushed_at":"2023-01-06T02:18:02.000Z","size":1339,"stargazers_count":0,"open_issues_count":20,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-05T06:29:49.195Z","etag":null,"topics":["bootstrap","bootstrap-4","components","springtype"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/springtype-org.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-21T18:22:48.000Z","updated_at":"2020-04-26T13:13:34.000Z","dependencies_parsed_at":"2023-02-05T02:45:25.342Z","dependency_job_id":null,"html_url":"https://github.com/springtype-org/st-bootstrap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springtype-org%2Fst-bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springtype-org%2Fst-bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springtype-org%2Fst-bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springtype-org%2Fst-bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/springtype-org","download_url":"https://codeload.github.com/springtype-org/st-bootstrap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240347764,"owners_count":19787231,"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","bootstrap-4","components","springtype"],"created_at":"2024-11-09T18:22:11.285Z","updated_at":"2025-02-23T16:40:48.242Z","avatar_url":"https://github.com/springtype-org.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003eBootstrap 4 for SpringType\u003c/h2\u003e\n\n\u003e \"How to use Bootstrap 4 with SpringType?\"\n\nSpringType comes with a lazy, fault-tolerant VDOM implementation that allows you to use standard HTML + CSS.\nUnlike other modern frontend frameworks, SpringType *doesn't need any special wrapper component libraries*.\n\nThis means, you can just use the standard Bootstrap 4 SCSS/CSS, it's HTML and JS plugins like we did back in the good old days - but with components and VDOM :-)\n\n\u003ca href=\"https://springtype-org.github.io/st-bootstrap/\" target=\"_blank\"\u003e\n  Live Demo\n  \u003cimg src=\"preview.png\" /\u003e\n\u003c/a\u003e\n\nYou can find a working integration example in the `playground` folder.\n\n\u003ch2 align=\"center\"\u003eScaffolding\u003c/h2\u003e\n\nFor your convenience, we've created a scaffolding template for SpringType / Bootstrap 4 projects.\nTo use it, please install the SpringType scaffolding CLI `st-create`:\n\n    yarn add global st-create\n\nThen simply run:\n\n    st-create -c project -t bootstrap-4 -n MyBootstrapProject\n\n...and seconds later, a SpringType / Bootstrap 4 application will be created for you.\n\n\u003ch2 align=\"center\"\u003eManual integration guide\u003c/h2\u003e\n\nIf you don't want to use `st-create`, the process of integrating Bootstrap 4 in a \nSpringType projects (or even any TypeScript project), is quite straigt forward.\n\nYou can choose to integrate third-party libraries via CDN or import them in JS \nto include them into the application JS bundle.\n\n\u003ch3 align=\"center\"\u003eImporting third-party JS in application JS bundle\u003c/h2\u003e\n\nInstall these dependencies:\n\n    npm i st-bootstrap bootstrap jquery popper.js\nOR:\n    yarn add st-bootstrap bootstrap jquery popper.js\n\n- jQuery is a Bootstrap 4 dependency\n- Bootstrap 4 comes with the SCSS (SASS) stylesheets and the jQuery plugins for interactive components\n- popper.js for \n\nMake sure to actually import these dependencies (e.g. in `src/index.tsx`):\n\n```ts\n// import jQuery, Bootstrap, popper.js\nimport { importBootstrap } from \"st-boostrap\";\n\nst.run(async() =\u003e {\n\n    // dynamically imports the dependencies jquery, bootstrap and popper.js\n    await importBootstrap();\n\n    // enabling SpringType support for Bootstrap 4 tooltip components \n    setupBootstrapComponent('tooltip');\n\n    st.render(\u003cYourAppIndex /\u003e);\n});\n```\n\n\u003ch3 align=\"center\"\u003eImporting third-party JS using a CDN\u003c/h2\u003e\n\nThe other option is to integrate Bootstrap 4 and it's dependencies in the `\u003chead\u003e` of your `index.html` just like described in the official Bootstrap 4 docs:\n\n```html\n  \u003cscript src=\"https://code.jquery.com/jquery-3.4.1.slim.min.js\" integrity=\"sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js\" integrity=\"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n```\n\nMake sure *not* to import and call `importBootstrap()` then.\n\n\u003ch2 align=\"center\"\u003eBootstrap 4 JS Components\u003c/h2\u003e\n\nSome components require an initialization (e.g. tooltips). To do this, just implement the lifecycle method `onAfterInitialRender` just like described in the official Bootstrap 4 docs:\n\n```ts\n  onAfterInitialRender() {\n\n    // tooltip integration\n    $(() =\u003e {\n        $('[data-toggle=\"tooltip\"]', this.el).tooltip()\n    });\n  }\n```\n\n\u003ch2 align=\"center\"\u003eCustom theming using Sass\u003c/h2\u003e\n\nWe also suggest, to create an SCSS file to integrate the Bootstrap 4 SCSS with custom themeing support.\nCreate a `theme.scss` in your `src` folder:\n\n```scss\n$theme-colors: (\n    \"primary\": #1a6da9,\n    \"secondary\": #2a863c,\n);\n\n@import \"bootstrap/scss/bootstrap\";\n```\n\nTo transpile the SCSS file to CSS, just activate the SASS processing feature of `st-start` by creating or modfiying the file `st.config.js`. Add the key `staticStyleEntryPoints`:\n\n```js\nmodule.exports = {\n    staticStyleEntryPoints: {\n        'src/theme.scss': 'dist/theme.css'\n    },\n};\n```\n\nFinally, import the resulting `dist/theme.scss` CSS file in the `\u003chead\u003e` section of your `src/index.html` file:\n\n```html\n\u003chead\u003e\n\n  \u003c!-- added this for Font Awesome icon support --\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css\" /\u003e\n\n  \u003c!-- just using the most recent style globally --\u003e\n  \u003clink href=\"../dist/theme.css\" rel=\"stylesheet\"\u003e\n\n\u003c/head\u003e\n```\n\nMost Bootstrap apps also use Font Awesome, so we recommend importing Font Awesome as well.\n\n\u003ch2 align=\"center\"\u003eMaintainers\u003c/h2\u003e\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg width=\"150\" height=\"150\"\n        src=\"https://avatars3.githubusercontent.com/u/454817?v=4\u0026s=150\"\u003e\n        \u003c/br\u003e\n        \u003ca href=\"https://github.com/kyr0\"\u003eAron Homberg\u003c/a\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg width=\"150\" height=\"150\"\n        src=\"https://avatars2.githubusercontent.com/u/12079044?s=150\u0026v=4\"\u003e\n        \u003c/br\u003e\n        \u003ca href=\"https://github.com/mansi1\"\u003eMichael Mannseicher\u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003ctbody\u003e\n\u003c/table\u003e\n\n\u003ch2 align=\"center\"\u003eContributing\u003c/h2\u003e\n\nPlease help out to make this project even better and see your name added to the list of our  \n[CONTRIBUTORS.md](./CONTRIBUTORS.md) :tada:","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspringtype-org%2Fst-bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspringtype-org%2Fst-bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspringtype-org%2Fst-bootstrap/lists"}