Popular posts from this blog
Scroll After Fixed Navigation
jQuery : $(document).ready(function() { var toggleAffix = function(affixElement, scrollElement, wrapper) { var height = affixElement.outerHeight(), top = wrapper.offset().top; if (scrollElement.scrollTop() >= top){ wrapper.height(height); affixElement.addClass("affix"); } else { affixElement.removeClass("affix"); wrapper.height('auto'); } }; $('[data-toggle="affix"]').each(function() { var ele = $(this), wrapper = $('<div></div>'); ele.before(wrapper); $(window).on('scroll resize', function() { toggleAffix(ele, $(this), wrapper); }); // init toggleAffix(ele, $(window), wrapper); }); }); HTML <nav class="navbar navbar-expand-sm navbar-light" data-toggle="affix"> CSS .affix { position: fixed; top: 0; right: 0; left: 0;
Bootstrap CSS Customize with SCSS CSS
Using Bootstrap with Bower First let's make a package.json file for Node to see. Either use npm init -y or create a package.json file containing just an empty JSON object ( {} ). Now let's install gulp , gulp-bower , and gulp-sass : $ npm install --save-dev gulp gulp-bower gulp-sass Now let's use Bower to install bootstrap. This will allow us to import Bootstrap into our SCSS code and compile it down to CSS manually. Create a bower.json file using bower init or by manually creating one: Now let's install bootstrap-sass with Bower. $ bower install --save bootstrap-sass Create One file Now we can make an SCSS file that includes bootstrap into our project. Let's call our SCSS file css/app.scss : @ import "bootstrap" ; @ import "bootstrap/theme" ; Now let's use gulp to compile our app.scss , which includes Bootstrap SASS: Create On JS File with gulpfile.js var gulp = require
Comments
Post a Comment