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\">
Related
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>
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 have an chrome app,with and iframe inside
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<title>Title</title>
</head>
<body >
<div class="container-fluid">
<iframe id="iframe" src="home.html" frameborder="0" height="150%" style="width: 100%;"></iframe>
</div>
</div>
</body>
</html>
in web is loading, but when it is called from index in the chrome app ,bootstrap-theme.css is not loading
I've tried too adding type="text/css" , but neither.
<link rel="stylesheet" type="text/css" href="/css/bootstrap-theme.css">
Does this work for you?
solution:
as #SaucedApples said but without the dot.
<link href="/css/bootstrap-theme.css" rel="stylesheet" />
I think you should allow this files to be appended at the manifest.json, something like this:
"content_scripts": [
{
"matches": ["http://test-website.com/*"],
"js": ["js/content-script.js"],
"css" : ["yourcss.css"]
}
],
In brackets now I can only code jQuery inside the lines of my html file.
But now I want to code jQuery in another file, but of course I stall want that it interact with the html, for example that I can still target the divs:
$(".navbar")
HTML File :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javscript" src="Javascript.js"</script>
</head>
<body>
<div class="navbar">
<p>Hello</p>
</div>
</body>
JS File :
$(document).ready(function(){
$(".navbar").click(function(){
$(".navbar").hide();
});
});
Apparently the reason why I can't have the jQuery-code in another file is a glitch in Brackets.
I have the following code in my html5.Master file for my C# ASP.NET pages using Twitter Bootstrap. Still some pages are rendered by IE 9 in Quirks 5.5 mode. Is there anything else that can be done to get them to render correctly and print correctly?
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="bootstrap.css" rel="stylesheet">
<!-- CSS concatenated and minified via ant build script-->
<link href="<%=Page.ResolveUrl("~/css/bootstrap.css?v=2")%>" rel="stylesheet">
<link href="<%=Page.ResolveUrl("~/css/docs.css?v=2")%>" rel="stylesheet">
<link href="<%=Page.ResolveUrl("~/css/prettify.css?v=2")%>" rel="stylesheet">
<link rel="stylesheet" media="print" href="<%=Page.ResolveUrl("~/css/print.css?v=2")%>" />
<script src="js/libs/modernizr-2.0.6.min.js"></script>
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script> window.jQuery || document.write("<script src='/scripts/libs/jquery-1.7.1.min.js'>\x3C/script>")</script>
<!--[if IE 6]>
<link href="ie6.css" rel="stylesheet">
<![endif]-->
</head>