This answer: https://stackoverflow.com/a/26198380/4370354 unfortunately doesn't seem to be working for BS4, even after trying André Rocha's answer at the end, so here is my problem:
I am trying to load bootstrap 4 via CDN, but have a fallback to a local CSS file in place, just in case.
The below code results in the bootstrap 4 css file being loaded twice, but I would like it to be loaded only once.
here is what I have (pretty much the same as in the answer above) The fallback function for the CSS file is at the very end:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap 4.1.1 CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<title>Home | phpMIDAS viewer</title>
</head>
<body>
<!-- jQuery 3.3.1 CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- Bootstrap 4.1.1 JS CDN -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" ></script>
<!-- Bootstrap 4.1.1 JS local fallback -->
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="bootstrap/js/bootstrap.min.js"><\/script>')}</script>
<!-- Bootstrap 4.1.1 CSS local fallback -->
<div id="bootstrapCssTest" class="hidden"></div>
<script>
$(function() {
if ($('#bootstrapCssTest').is(":visible")) {
$("head").prepend('<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">');
}
});
</script>
</body>
</html>
After experimenting further, I figured out that all I needed to do was to replace class="hidden" with class="collapse".
Here the corrected code, in case someone wants to see/use it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap 4.1.1 CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<title>Home | phpMIDAS viewer</title>
</head>
<body>
<!-- jQuery 3.3.1 CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- Bootstrap 4.1.1 JS CDN -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" ></script>
<!-- Bootstrap 4.1.1 JS local fallback -->
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="bootstrap/js/bootstrap.min.js"><\/script>')}</script>
<!-- Bootstrap 4.1.1 CSS local fallback -->
<div id="bootstrapCssTest" class="collapse"></div>
<script>
$(function() {
if ($('#bootstrapCssTest').is(":visible")) {
$("head").prepend('<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">');
}
});
</script>
</body>
</html>
Related
I've tried implementing the basics for bootstrap into an xmb forum templare but all I get is a blank page.
Prior to bootstrap:
<?xml version=\"1.0\" encoding=\"$charset\"?>
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<!-- $versionlong -->
<!-- Build: $versionbuild -->
<!-- $versioncompany -->
<head>
$baseelement$canonical_link
<title>{$SETTINGS[\'bbname\']} $threadSubject - $versionlong</title>
$css
<script language=\"JavaScript\" type=\"text/javascript\" src=\"./js/header.js\"></script>
</head>
and after bootstrap code:
<!-- ?xml version=\"1.0\" encoding=\"$charset\"? -->
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<!-- $versionlong -->
<!-- Build: $versionbuild -->
<!-- $versioncompany -->
<head>
<!-- Required meta tags -->
<meta charset=\"$charset\">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
$baseelement$canonical_link
<title>{$SETTINGS[\'bbname\']} $threadSubject - $versionlong</title>
<!-- $css -->
<script language=\"JavaScript\" type=\"text/javascript\" src=\"./js/header.js\"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
Any clues as to the issue[s] appreciated.
Try to paste the link like this, everywhere else you are escaping quotes but here.
<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css\" integrity=\"sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\" crossorigin=\"anonymous\">
Also, meta tag needs to be changed to
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">
On my meteor project, I embed bootstrap CDN on the header. But due to the merged stylesheet is embedded right after the <head> tag, some of my styles are overwritten by the bootstrap. Here is the rough HTML looks like on browser
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/merged-stylesheets.css?hash=e4358d3b8494bc13eda6b965c33b5902cd562a07">
<meta ..>
<title>...</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
...
</body>
</html>
How can I setup the merged stylesheet to be embedded after the CDN or right before </head> closing tag?
That's currently a Meteor caveat, discussions are on-going here: https://github.com/meteor/meteor-feature-requests/issues/24
The possibility to change it will probably come in a future release
I downloaded a premake template of a ecommerce platform that contains css js views and such to apply to my Laravel framework project. It looked very nice but I would like to make some changes, for example color of the background. However once I tried to modified any part of the css file and then undo the modification, the website views gone really bad. the changes were undone but some of the effects seems no longer working after I made such modification, any explanation or solution for me to undo my modification?
I used MarkUps-dailyShop. Modified style.css lets say delete the below code in it
#aa-header {
display: inline;
float: left;
width: 100%;
}
even though i undo such change, the homepage was of some sliding bar and dropdown menu before but now all these effects just gone and left with just words and colors.
I use Laravel 5.2
I place css and js script in the layouts.app as shown below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Soyegg</title>
<!-- Font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<!-- Bootstrap -->
<link href="{{public_path('css/bootstrap.css')}}" rel="stylesheet">
<!-- SmartMenus jQuery Bootstrap Addon CSS -->
<link href="{{public_path('css/jquery.smartmenus.bootstrap.css')}}" rel="stylesheet">
<!-- Product view slider -->
<link rel="stylesheet" type="text/css" href="{{public_path('css/jquery.simpleLens.css')}}">
<!-- slick slider -->
<link rel="stylesheet" type="text/css" href="{{public_path('css/slick.css')}}">
<!-- price picker slider -->
<link rel="stylesheet" type="text/css" href="{{public_path('css/nouislider.css')}}">
<!-- Theme color -->
<link id="switcher" href="{{public_path('css/theme-color/default-theme.css')}}" rel="stylesheet">
<!-- <link id="switcher" href="css/theme-color/bridge-theme.css" rel="stylesheet"> -->
<!-- Top Slider CSS -->
<link href="{{public_path('css/sequence-theme.modern-slide-in.css')}}" rel="stylesheet" media="all">
<!-- Main style sheet -->
<link href="{{public_path('css/style.css')}}" rel="stylesheet">
<!-- Google Font -->
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<!-- datepicker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<!-- datepicker end -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- contents-->
#include('layouts.navbar')
#yield('content')
#include('layouts.footer')
<!-- jquery-2.2.4.min.js -->
<script src="{{ public_path('/js/jquery-2.2.4.min.js') }}"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Bootstrap.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- JavaScripts -->
{{-- <script src="{{ elixir('js/app.js') }}"></script> --}}
<script src="js/jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery Bootstrap Addon -->
<script src="js/jquery.smartmenus.bootstrap.js"></script>
<!-- To Slider JS -->
<script src="js/sequence.js"></script>
<script src="js/sequence-theme.modern-slide-in.js"></script>
<!-- Product view slider -->
<script src="js/jquery.simpleGallery.js"></script>
<script src="js/jquery.simpleLens.js"></script>
<!-- slick slider -->
<script src="js/slick.js"></script>
<!-- Price picker slider -->
<script src="js/nouislider.js"></script>
<!-- Custom js -->
<script src="js/custom.js"></script>
</body>
</html>
I just found where the problem is. It worked again after I change public_path('css/style.css') to url('css/style.css')
Is Laravel not supposed to read css by local directory?
I am trying to make a simple login page with dojo, I have a button at the moment but it doesn't use the dojo theme. The css works when I copy everything from the theme of claro and make a local css file but it doesn't work when i try to load it from the link.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Button test</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css ">
</head>
<script src="lib/dojo/dojo.js"></script>
<body class="claro">
<script>
require(["dijit/form/TextBox", "dijit/form/SimpleTextarea", "dojo/parser", "dojo/domReady!"]);
</script>
</body>
<body class="claro">
<button id="Button" data-dojo-type="dijit/form/Button"
data-dojo-props="
iconClass: 'dijitIconNewTask',
showLabel: false,
onClick: function(){ console.log('Second button was clicked!'); }">
Login
</button>
</html>
This is first time I am trying bootstrap. Everything seems to be in place except the class jumbotron is not working. Class container works and brings content in center but jumbotron which is suppose to give some background does not seems to work. (adding or removing this like class="jumbotron" has no effect on page.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
</div>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>
I am attaching the of ide so you can see my file tree. I checked it myself also and seems I have loaded everything correctly.
Update: redownloading the bootstrap solved the problem with exact same code. somehow my first download was not working correctly.
Try:
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
without the ./ instead.
or the CDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Try to use
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
in your HTML head.