twbs / examples Goto Github PK
View Code? Open in Web Editor NEWFunctional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more!
License: MIT License
Functional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more!
License: MIT License
For when we ship the stable release.
This is the error message. straight from bootstrap docs.
Currently there are failures in some projects. Adding CI will help us for sure #95
In the example here
functions are below the customizations
But in
https://getbootstrap.com/docs/5.3/customize/sass/
The functions are above the customizations. And it even gives a 1. 2. 3. order to make that seem significant.
When I use sample scss files in V5.3.0, I receive the following errors:
"primary": $primary-text-emphasis-dark,
planned inventory
if expected Zero
in the list of items support swipe left to confirm Zero without opening item page
I have submitted a pull request at #5 to illustrate the issue I have encountered.
I am having trouble getting bootstrap to import into a basic Vue3/Vite app. I have studied the other examples in this repository, and cannot figure out what I am missing.
When the project builds, the following error is generated:
ENOENT: no such file or directory, stat '[base path]/vite-vue/node_modules/bootstrap/scss/bootstrap'
This is coming from the vite:css plugin, and I can find no information about how to configure that plugin correctly.
I have verified my vite.config.js has the correct ~bootstrap alias by hard-coding the path to node_modules/bootstrap/scss/bootstrap, and the same error occurs. If I reference the _bootstrap.scss file directly, another error occurs because the inline comments are unrecognized.
Any assistance would be greatly appreciated!
Like clean all package-lock.json files, update deps etc.
Our examples are technically sub-projects that have their own dependencies in their package.json
.
We should enable Dependabot for each sub-dir:
ATM I only update "vite" deps because I think of it thanks to the notification I receive of their new releases.
There is no instruction for production build with Vite JS & also how we can configure multipage bootstrap website using vite. please include a details documentation in the existing vite doc part.
Using Vite with Bootstrap for product ready website is confusing because there isn't any instruction about that.
Silly question; why does the color modes
example ship with <body data-bs-theme="auto">
in index.html
but in color-modes.js
the setTheme
is applied to document.documentElement
instead of document.querySelector('body')
for instance?
Trying 6422758 on StackBlitz: https://stackblitz.com/github/twbs/examples/tree/6422758f7fece281a675557ff102d9d9688ed685/vue?file=index.html fails.
It also fails for main.
Descrição da questão
Adicionar estilo escuro à documentação
Exemplo de uso
n/a
Why not add Gulp example https://gulpjs.com/ ?
etc
Feel free to CC me if someone starts working on it.
I want to connect Autoprefixer to the Vite setup.
Need help, thanks.
If Dependabot is able to check sub-directories, we might want to enable Dependabot for this repository in order to be informed when there are new versions of Wepack, Parcel, Vite, etc. so that we can bump the packages versions and check if everything's still working.
It might be a little trickier but if we move with #114 it should be easier
Reading the Vite example, I note that functions are imported after variable overrides:
examples/vite/src/scss/styles.scss
Line 40 in 2a7f56d
Official docs recommend include the functions first:
https://getbootstrap.com/docs/5.3/customize/sass/#importing
In Parcel example, Floating labels work only when I remove the following code from examples/parcel/node_modules/bootstrap/scss/forms/_floating-labels.scss
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
> .form-control:-webkit-autofill {
~ label {
opacity: $form-floating-label-opacity;
transform: $form-floating-label-transform;
}
}
Steps to reproduce the issue:
examples/parcel/src/scss/styles.scss
, uncomment @import "bootstrap/scss/forms";
examples/parcel/src/index.html
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
Not working on: Chrome 108.0.5359.71 (This version is outdated) on Ubuntu 16.04
Works on:
Firefox on Ubuntu 16.04 and Chrome 112 on Windows 11
Go to sass-js-esm
project and run npm i ; npm run start
:
> [email protected] css
> npm-run-all css-compile css-prefix
> [email protected] css-compile
> sass --style compressed --source-map --embed-sources --no-error-css --load-path=node_modules scss/:css/
Error: Undefined variable.
╷
135 │ --#{$prefix}body-color: #{$body-color-dark};
│ ^^^^^^^^^^^^^^^^
╵
bootstrap/scss/_root.scss 135:31 @content
node_modules/bootstrap/scss/mixins/_color-mode.scss 17:7 color-mode()
bootstrap/scss/_root.scss 133:3 @import
scss/styles.scss 45:9 root stylesheet
ERROR: "css-compile" exited with 65.
[nodemon] app crashed - waiting for file changes before starting...
in vite/vite.config.js file:
export default {
server: {
port: 8080,
hot: true
}
}
What does the 'hot: true' option does? I can't find that option in vite official docs.
Would be lovely to add build steps to each example and then run them on GitHub Actions.
pnpm start
> [email protected] start C:\laragon\www\bootstrap-parcel
> parcel serve src/index.html --public-url / --dist-dir dist
Server running at http://localhost:1234
� Build failed.
@parcel/transformer-sass: Can't find stylesheet to import.
╷
34 │ @import "bootstrap/scss/functions";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\scss\styles.scss 34:9 root stylesheet
Error: Can't find stylesheet to import.
╷
34 │ @import "bootstrap/scss/functions";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\scss\styles.scss 34:9 root stylesheet
at Object.wrapException (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:1252:43)
at C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:81769:25
at _wrapJsFunctionForAsync_closure.$protected (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:4022:15)
at _wrapJsFunctionForAsync_closure.call$2 (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:33876:12)
at _awaitOnObject_closure.call$1 (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:33864:32)
at Object._rootRunUnary (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:4408:18)
at StaticClosure.<anonymous> (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:115492:16)
at _CustomZone.runUnary$2$2 (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:35300:39)
at _Future__propagateToListeners_handleValueCallback.call$0 (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:34363:51)
at Object._Future__propagateToListeners (C:\laragon\www\bootstrap-parcel\node_modules\.pnpm\[email protected]\node_modules\sass\sass.dart.js:4201:93)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.