twitter-bootstrap


Disable bootstrap for small resolution


I'd like to create mobile version of my app without using bootstrap (which is used in desktop version)
Simplify, I don't want to download bootstrap stylesheets on resolution smaller than 768px.
Is it possible?
First:
if you are loading bootstrap css inside the <head> of your document, you should remove it. That will help your browser to load your page faster... instead of stop the rendering process to make an HTTP call to REQUEST bootstrap and then wait to download the Bootstrap CSS from your server or a CDN to finish parsing your DOM.
Instead you should load your css at the end of your file and just ask to load it just if your screen size is smaller than 768px :)
I hope this help...
<script>
(function(){
var screenSize = window.innerWidth;
if(screenSize>768) {
var bootstrapStyles = document.createElement('link');
bootstrapStyles.setAttribute('rel','stylesheet');
bootstrapStyles.href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css";
document.head.appendChild(bootstrapStyles);
}
})();
</script>
Visit http://getbootstrap.com/customize/ and from the settings disable the part of Bootstrap you don't want to use!
Another solution could be to use just the code of the bootstrap.css file you want, editing it manually! For example delete all the part where it says #media.... this will delete all the styling modifications for smaller screens plus you will make your bootstrap.css file smaller which will speed up your page load time!
Hope this solution helps!

Related Links

Space Between col-md fix?(bootstrap)
Background images flanking the Bootstrap container
Bootbox example not working
Can't get Bootstrap ScrollSpy to work on my page
Kendo UI based responsive web application
How can one manage front-end library dependencies in Clojure?
drag and drop is not working with higher versions of jquery.min.js
Scrollspy just active the last button of the navbar
bootstrap carousel within a column
Upgrading a framework/library in your project
Bootstrap: glyphicon-triangle-bottom not displaying
bootstrap type ahead not working
Why there are no bootstrap support for handling grid system breakpoint events ?
Helper class for text that will go on a dark background
How to Align Ingredients Form In Bootstrap [Inventory System]
Bootstrap alert will not show

Categories

HOME
reactjs
itunesconnect
locale
qemu
windows-server-2008
popover
reference
readdir
ubuntu-14.04
terminal
aggregation-framework
rmarkdown
rtc
coding-style
activejdbc
openbsd
core-data
ndepend
fine-uploader
css-float
sonarlint
bug-reporting
include-path
ecmascript-2017
policy
android-wear-2.0
inspec
edsdk
qt-designer
eclipse-jdt
ilog
n1ql
incapsula
intersection
javafxports
android-databinding
byobu
aspose.pdf
julia-jump
ssdp
file-descriptor
uitextview
datagridviewcombobox
cakephp-3.2
amazon-fire-tv
multivalue
vertex
bioperl
aot
robotc
deck.js
tinybox2
change-password
encode
sdkman
redquerybuilder
openhab
avd
mind-manager
windows-search
drawable
rails-migrations
android-jack-and-jill
nvcc
.net-reflector
nop
source-depot
qmainwindow
coinbase-php
brew
big-endian
custom-cursor
django-1.4
helicontech
pinchzoom
inserthtml
hs-err
netbeans7.0
mysql-logic
qprocess
numerical-computing
file-storage
pixel-bender
memory-consumption
paperless

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile