Converting Html Template to Thymeleaf Template - html

I am trying to convert my html5 template for my spring project. In this project i use thymeleaf template. In order to convert, i changed all scripts src into th:src or all style files (css files to) th:href etc. But design seems wrong.
<script th:src="#{/resources/js/jquery.min.js}" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Fonts -->
<link th:href="#{http://fonts.googleapis.com/css?family=Ubuntu:400,400italic,700}" rel='stylesheet' type='text/css'/>
<link th:href="#{http://fonts.googleapis.com/css?family=Pacifico}" href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
<link th:href="#{/resources/font-awesome/css/font-awesome.css}" href='font-awesome/css/font-awesome.css' rel="stylesheet" type="text/css"/>
<!-- Bootstrap -->
<link th:href="#{/resources/bootstrap/css/bootstrap.min.css}" href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Main Style -->
<link rel="stylesheet" th:href="#{/resources/style.css}" href="style.css" />
<!-- owl Style -->
<link rel="stylesheet" th:href="#{/resources/css/owl.carousel.css}" href="css/owl.carousel.css" />
<link rel="stylesheet" th:href="#{/resources/css/owl.transitions.css}" href="css/owl.transitions.css" />
<!-- rating -->
<script th:src="#{/resources/js/rate/jquery.raty.js}" src="js/rate/jquery.raty.js"></script>
<script th:src="#{/resources/js/labs.js}" src="js/labs.js" type="text/javascript"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" th:src="#{/resources/js/product/lib/jquery.mousewheel-3.0.6.pack.js}" src="js/product/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- fancybox -->
<script type="text/javascript" th:src="#{/resources/js/product/jquery.fancybox.js?v=2.1.5}" src="js/product/jquery.fancybox.js?v=2.1.5"></script>
<!-- custom js -->
<script th:src="#{/resources/js/shop.js}" src="js/shop.js"></script>
These are the converted tags. And also when i execute my page i get the exception shown below. This image is not exist in my bootstrap/img folder also it is not exist in template folder as well. But template seems to work without Thymeleaf.
jquery.fancybox.js?v=2.1.5:1994 GET http://localhost:8080/resources/bootstrap/img/glyphicons-halflings.png 404 (Not Found)

For those resources with "http://" prefix, no need to use th:href.
For those inner-site resources, "/resources/bootstrap/img/glyphicons-halflings.png", please remove "/resources", Spring Framework will append it by default.
Below is from Spring document for your reference.
By default Spring will serve static content from a directory called /static (or /public or /
resources or /META-INF/resources) in the classpath or from the root of the ServletContext.
It uses the ResourceHttpRequestHandler from Spring MVC so you can modify that behavior by
adding your own WebMvcConfigurerAdapter and overriding the addResourceHandlers method.

Related

is it possible to use bootstrap together with MDBootstrap?

I Have been using Bootstrap for many years, and it is been 9 days now that I am working on a project in which I used bootstrap CDN, the problem is I need some features, components of MDBootstrap but not all of it, and when I included MDBootstrap also, it conflicted with the bootstrap cdn, my buttons and all the components I used are now confused, some of my components corrupted, what is the solution? I will write down my CDNs I have used.
<!-- Google Fonts Roboto -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap"
/>
<!-- MDBootstrap CDN -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css"
/>
<!-- Bootstrap CDN -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
and these are all what I have at last of the body tag.
<!-- MDB -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.js"></script>
<!-- FontAwesome CDN -->
<script
src="https://kit.fontawesome.com/d455f30832.js"
crossorigin="anonymous"
></script>
<!-- Bootstrap js -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
any solution would be really appreciated.
please consider upvoting my question that I need for reputation. Thanks
As per bootstrap support team: Import only our package. With this package you'll be able to youse both: mdb, and standard bootstrap.
Reference: https://mdbootstrap.com/support/standard/can-i-use-bootstrap-with-mdbootstrap-can-i-use-bootstrap-and-mdbootstrap-together/

Bootstrap is not rendered in Scala Play framework

I have included Bootstrap into my Scala/Play Project in Intellij.
But it is not rendering.
I included bootstrap.min.css, bootstrap.min.js and jquery-3.4.1.min.js.
Folder structure:
in public folder: Folder css with bootstrap.min.css and main.css; Folder images with favicon.img; Folder js with bootstrap.min.js, jquery-3.4.1.min.js and main.js
HTML-Codes where I am trying to access bootstrap
in the HTML header
<link rel="stylesheet" media="screen" href=#routes.Assets.versioned("css/main.css")">
<link rel="shortcut icon" type="image/png" href=#routes.Assets.versioned("images/favicon.png")">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
Before the closing body-tag:
<script src=#routes.Assets.versioned("js/main.js")" type="text/javascript"></script>
<script src=#routes.Assets.versioned("js/jquery-3.4.1.min.js")" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src=#routes.Assets.versioned("js/bootstrap.min.js")" type="text/javascript"></script>
The result is a HTML page without any css (Default font: Times new Roman).
The HTML page is not rendered using bootstrap.
How I can include Bootstrap so that it is rendered correctly?

Why does my html import tag not work?

I have been looking at code reusability (for example) and have been experimenting with HTML import tags. I want to auto include my bootstrap code in every webpage and would like to do it with one line of code as opposed to multiple.
After doing some research online, the answer seemed to be to use the tag, most namely the following format:
<head>
<import rel="import" href="includes/bootstrap.html">
</head>
My bootstrap.html file is just some normal bootstrap links as follows:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I'm simply trying to avoid importing the same three lines across all my pages. However, my browser (Chrome) does not seem to implement include in any way, even when I use for reasons other than Bootstrap.
How should I properly include my bootstrap files across the head of all my pages?
Alex
Change import tag to link tag
<head>
<link rel="import" href="includes/bootstrap.html">
</head>
Refer this
How about creating a header file 'header.php' with the links like so,
<head>
<title>Your Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</head>
And when you write your code just include the header.php part.
<html>
<? include ("header.php");?>
</html>

index.html is unable to read from CSS after FTP to server

I have my website which consists of two pages, plus my own style.css that works perfectly on my local. But when I FTP it onto the server of my hosting service, the index.html is unable to read from my style.css. I've checked the path. I've checked the order of declaration. I've maintained the same file structure and the same order of CSS declaration (global to local)on my local, and its working fine. Does anyone have suggestions?
Here is how the head section looks:
I had to declare a CSS style for a script I'm using in the document. Since it won't read my style.css I did an internal declaration.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--Google Font: Source Code Pro-->
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Fancybox CSS -->
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.min.css">
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Fancybox jQuery -->
<script src="fancybox/jquery.fancybox.min.js"></script>
<style type="text/css">
.menuActive {
background-color: #ffffff;
}
</style>
</head>
A relevant portion of my file structure on the server is as follows (tried including a screenshot but apparently I can't do that on Stackoverflow just yet):
Folders & files:
css
fancybox
files
img
wp_admin
wp-content
wp-includes
.ftpquota
.htaccess
default.htm
index.html
The img folder is on the same level as the css folder and the images are loading properly.
It's probally because on your server you are using https://
change your style links to something like <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> and remove http part

How many bootstrap links do I need to use at the top of my index.html file to use a template

I am trying to use a bootswatch Bootstrap template that you can find here: http://www.bootstrapcdn.com/#bootswatch_tab (The template is Amelia).
Do I only add this to my index.html document:
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.1.1/amelia/bootstrap.min.css" rel="stylesheet">
or do I need to add these two as well to make it work:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
I figured I just needed the first piece of code but I need it to connect to my style.css document.
For Bootstrap, you need only these by default :
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Depending on the theme, which you want to use, you will have to go through the source code to check what other external files have been used for layout(css) and visible effects(.js) for it
go through src and you'll find a url for amelia :
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.1.1/amelia/bootstrap.min.css" rel="stylesheet">