11 changed files with 20285 additions and 0 deletions
@ -0,0 +1,31 @@
|
||||
var gulp = require('gulp'); |
||||
var browserSync = require('browser-sync').create(); |
||||
var sass = require('gulp-sass'); |
||||
|
||||
// Compile sass into CSS & auto-inject into browsers
|
||||
gulp.task('sass', function() { |
||||
return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss']) |
||||
.pipe(sass()) |
||||
.pipe(gulp.dest("src/css")) |
||||
.pipe(browserSync.stream()); |
||||
}); |
||||
|
||||
// Move the javascript files into our /src/js folder
|
||||
gulp.task('js', function() { |
||||
return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js']) |
||||
.pipe(gulp.dest("src/js")) |
||||
.pipe(browserSync.stream()); |
||||
}); |
||||
|
||||
// Static Server + watching scss/html files
|
||||
gulp.task('serve', gulp.series('sass', function() { |
||||
|
||||
browserSync.init({ |
||||
server: "./src"
|
||||
}); |
||||
|
||||
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.series('sass')); |
||||
gulp.watch("src/*.html").on('change', browserSync.reload); |
||||
})); |
||||
|
||||
gulp.task('default', gulp.parallel('js','serve')); |
||||
@ -0,0 +1,26 @@
|
||||
{ |
||||
"name": "bootstrap-tutorial", |
||||
"version": "1.0.0", |
||||
"description": "", |
||||
"main": "index.js", |
||||
"scripts": { |
||||
"test": "echo \"Error: no test specified\" && exit 1" |
||||
}, |
||||
"repository": { |
||||
"type": "git", |
||||
"url": "http://git.mumech.com/yutsuo/bootstrap-tutorial.git" |
||||
}, |
||||
"keywords": [], |
||||
"author": "", |
||||
"license": "ISC", |
||||
"devDependencies": { |
||||
"browser-sync": "^2.26.7", |
||||
"gulp": "^4.0.2", |
||||
"gulp-sass": "^4.0.2" |
||||
}, |
||||
"dependencies": { |
||||
"bootstrap": "^4.4.1", |
||||
"jquery": "^3.4.1", |
||||
"popper.js": "^1.16.0" |
||||
} |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,129 @@
|
||||
<!DOCTYPE html> |
||||
<html class="no-js" lang="en"> |
||||
|
||||
<head> |
||||
<title>Bootstrap 4 Layout</title> |
||||
<meta http-equiv="x-ua-compatible" content="ie=edge"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800"> |
||||
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> |
||||
<link rel="stylesheet" href="/css/bootstrap.css"> |
||||
<link rel="stylesheet" href="/css/styles.css"> |
||||
</head> |
||||
|
||||
<body> |
||||
<script src="/js/jquery.min.js"></script> |
||||
<script src="/js/popper.min.js"></script> |
||||
<script src="/js/bootstrap.min.js"></script> |
||||
<div class="container"> |
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary"> |
||||
<a class="navbar-brand" href="#">CompanyName</a> |
||||
<!--Add here --> |
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"> |
||||
<span class="navbar-toggler-icon"></span> |
||||
</button> |
||||
<!--Add here --> |
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent"> |
||||
<ul class="navbar-nav ml-auto"> |
||||
<li class="nav-item"> |
||||
<a class="nav-link" href="#">Home</a> |
||||
</li> |
||||
<li class="nav-item"> |
||||
<a class="nav-link" href="#">About</a> |
||||
<li class="nav-item dropdown"> |
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown"> |
||||
Products |
||||
</a> |
||||
<div class="dropdown-menu"> |
||||
<a class="dropdown-item" href="#">Product 1</a> |
||||
<a class="dropdown-item" href="#">Product 2</a> |
||||
<div class="dropdown-divider"></div> |
||||
<a class="dropdown-item" href="#">Another Product</a> |
||||
</div> |
||||
</li> |
||||
<li class="nav-item"> |
||||
<a class="nav-link" href="#">Contact</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</nav> |
||||
<!-- Add here --> |
||||
|
||||
<div class="jumbotron"> |
||||
<h1 class="display-4">Simple. Elegant. Awesome.</h1> |
||||
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut |
||||
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi |
||||
ut aliquip ex ea commodo consequat. </p> |
||||
|
||||
<p class="lead"> |
||||
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> |
||||
</p> |
||||
</div> |
||||
<div class="row"> |
||||
<div class="col-sm-12 col-md-4"> |
||||
<!-- <div class="col"> --> |
||||
<div class="card mb-4"> |
||||
<div class="card-body text-center"> |
||||
<h5 class="card-title">Card title</h5> |
||||
<p class="card-text">Some quick example text to build on the card title</p> |
||||
<a href="#" class="card-link">Another link</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="col"> |
||||
<div class="card"> |
||||
<div class="card-body text-center"> |
||||
<h5 class="card-title">Card title</h5> |
||||
<p class="card-text">Some quick example text to build on the card title</p> |
||||
<a href="#" class="card-link">Another link</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="col"> |
||||
<div class="card"> |
||||
<div class="card-body text-center"> |
||||
<h5 class="card-title">Card title</h5> |
||||
<p class="card-text">Some quick example text to build on the card title</p> |
||||
<a href="#" class="card-link">Another link</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="row mt-sm-4 mt-md-0"> |
||||
<div class="col-sm-12 col-md-8 text-sm-center text-md-left"> |
||||
<h3>An important heading</h3> |
||||
<p class="lead">A sort of important subheading can go here, which is larger and gray.</p> |
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore |
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut |
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
||||
cillum dolore eu fugiat nulla pariatur.</p> |
||||
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat |
||||
nulla pariatur.</p> |
||||
</div> |
||||
|
||||
<div class="col-sm-12 col-md-4"> |
||||
<h3 class="mb-4">Secondary Menu</h3> |
||||
|
||||
<ul class="nav flex-column nav-pills"> |
||||
<li class="nav-item"> |
||||
<a class="nav-link active" href="#">Active</a> |
||||
</li> |
||||
<li class="nav-item"> |
||||
<a class="nav-link" href="#">Link</a> |
||||
</li> |
||||
<li class="nav-item"> |
||||
<a class="nav-link" href="#">Link</a> |
||||
</li> |
||||
<li class="nav-item"> |
||||
<a class="nav-link disabled" href="#">Disabled</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
|
||||
</html> |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,14 @@
|
||||
// Variable Overrides |
||||
$theme-colors: ( |
||||
"primary": darkblue |
||||
); |
||||
|
||||
$body-bg: darkgray; |
||||
|
||||
.jumbotron { |
||||
background-color: #ffffff !important; |
||||
border-top: 3px solid rgb(219, 219, 219); |
||||
} |
||||
|
||||
// Bootstrap Sass Imports |
||||
@import "node_modules/bootstrap/scss/bootstrap"; |
||||
Loading…
Reference in new issue