first commit
This commit is contained in:
Mark Otto
Коммит
854c49cfeb
|
|
@ -0,0 +1 @@
|
|||
node_modules
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,22 @@
|
|||
// Importing JavaScript
|
||||
//
|
||||
// You have two choices for including Bootstrap's JS files—the whole thing,
|
||||
// or just the bits that you need.
|
||||
|
||||
|
||||
// Option 1
|
||||
//
|
||||
// Import Bootstrap's bundle (all of Bootstrap's JS + Popper.js dependency)
|
||||
|
||||
// import "../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js";
|
||||
|
||||
|
||||
// Option 2
|
||||
//
|
||||
// Import just what we need
|
||||
|
||||
// If you're importing tooltips or popovers, be sure to include our Popper.js dependency
|
||||
// import "../../node_modules/popper.js/dist/popper.min.js";
|
||||
|
||||
import "../../node_modules/bootstrap/js/dist/util.js";
|
||||
import "../../node_modules/bootstrap/js/dist/modal.js";
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="assets/css/starter.css">
|
||||
<title>Bootstrap npm starter</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
<p>You've successfully loaded up the Bootstrap npm starter project!</p>
|
||||
<p>If this button looks blue, you've done it.</p>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Click me!</button>
|
||||
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Success!</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
If you're seeing this modal after clicking the button on the page, Bootstrap's CSS and JS are both working properly.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
|
||||
<script type="module" src="assets/js/starter.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"name": "bootstrap-npm-starter",
|
||||
"version": "1.0.0",
|
||||
"description": "Demo project for building a Bootstrap powered site via npm.",
|
||||
"scripts": {
|
||||
"css-compile": "node-sass --include-path node_modules --output-style compressed --source-map true --source-map-contents true --precision 6 scss -o assets/css/",
|
||||
"css-prefix": "postcss --replace assets/css/starter.css --use autoprefixer",
|
||||
"css": "npm run css-compile && npm run css-prefix",
|
||||
"server": "npx http-server -c-1 --port 3000",
|
||||
"watch": "nodemon -e html,scss -x \"npm run css\"",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [
|
||||
"bootstrap"
|
||||
],
|
||||
"author": "mdo",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"bootstrap": "^4.4.1",
|
||||
"http-server": "^0.12.1",
|
||||
"jquery": "^3.5.0",
|
||||
"popper.js": "^1.16.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^9.7.6",
|
||||
"node-sass": "^4.13.1",
|
||||
"nodemon": "^2.0.3",
|
||||
"postcss-cli": "^7.1.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
# bootstrap-npm-starter
|
||||
|
||||
Use this repo as a template for new Bootstrap-powered npm projects, or as your own Bootstrap prototyping sandbox.
|
||||
|
||||
## What's included
|
||||
|
||||
- Single HTML page (`index.html`)
|
||||
- npm scripts for compiling and autoprefixing Sass, watching for changes, and starting a basic local server
|
||||
- Bootstrap source code via npm
|
||||
- Examples for importing all of Bootstrap's Sass, or only the parts you need
|
||||
- Examples for overriding default Sass variables and adding custom styles
|
||||
- Examples for importing Bootstrap's JS and dependencies wholesale, or only the modules you need
|
||||
|
||||
## Usage
|
||||
|
||||
Requires Node.js before proceeding.
|
||||
|
||||
```shell
|
||||
git clone https://github.com/twbs/bootstrap-npm-starter
|
||||
cd bootstrap-npm-starter
|
||||
|
||||
# Install dependencies
|
||||
npm i
|
||||
|
||||
# Compile Sass
|
||||
npm run css-compile
|
||||
|
||||
# Watch Sass for changes (uses nodemon)
|
||||
npm run watch
|
||||
|
||||
# Start local server (uses http-server)
|
||||
npm run server
|
||||
```
|
||||
|
||||
For the most straightforward development, open two Terminal tabs to execute `npm run server` and `npm run watch` at the same time.
|
||||
|
||||
Open <http://localhost:3000> to see the page in action.
|
||||
|
||||
## Copyright
|
||||
|
||||
© @mdo and licensed MIT.
|
||||
|
||||
---
|
||||
|
||||
### Required
|
||||
|
||||
1. `npm init`
|
||||
2. `npm i bootstrap jquery popper.js --save`
|
||||
3. `npm i node-sass postcss-cli autoprefixer --save-dev` to compile and automatically prefix Sass for browser support
|
||||
4. Import Bootstrap into your CSS
|
||||
|
||||
### Optional?
|
||||
|
||||
1. `npm i nodemon --save-dev` to trigger Sass compiler on save
|
||||
2. Move npm scripts to separate files
|
||||
|
||||
### Thanks
|
||||
https://medium.com/@brianhan/watch-compile-your-sass-with-npm-9ba2b878415b
|
||||
|
||||
### Sass
|
||||
|
||||
- node-sass compiles
|
||||
- sets the `--include-path` option to `node_modules`, so you don't need to include that in your `@import`s.
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
// Override Bootstrap's Sass default variables
|
||||
//
|
||||
// Nearly all variables in Bootstrap are written with the `!default` flag.
|
||||
// This allows you to override the default values of those variables before
|
||||
// you import Bootstrap's source Sass files.
|
||||
//
|
||||
// Overriding the default variable values is the best way to customize your
|
||||
// CSS without writing _new_ styles. For example, change you can either change
|
||||
// `$body-color` or write more CSS that override's Bootstrap's CSS like so:
|
||||
// `body { color: red; }`.
|
||||
|
||||
|
||||
//
|
||||
// Override Bootstrap here
|
||||
//
|
||||
|
||||
// Toggle global options
|
||||
$enable-gradients: true;
|
||||
$enable-shadows: true;
|
||||
|
||||
// Customize some defaults
|
||||
$body-color: purple;
|
||||
$body-bg: #f5f5f5;
|
||||
|
||||
|
||||
//
|
||||
// Bring in Bootstrap
|
||||
//
|
||||
|
||||
@import "bootstrap/scss/bootstrap";
|
||||
|
||||
|
||||
//
|
||||
// Custom styles
|
||||
//
|
||||
|
||||
body {
|
||||
padding: 3rem;
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче