I am new to web development and couldn't find a clear answer.
Is it possible to use Bootstrap in Vapor with Swift 3?
Yes, you can use Bootstrap. You will either:
Add the CDN links to your template files, i.e. .leaf files, which are in the Resources/Views/ folder, or
Download the Bootstrap files and add the CSS, JS, fonts, etc. to the Public/ folder which can be accessed by all the pages.
For the first suggestion, you could add the CDN links to your base.leaf, like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
#import("head")
</head>
<body>
#import("body")
</body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>
For the second suggestion, you would place the files in here:
Then access the files like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/styles/{CSS-FILE-NAME}">
#import("head")
</head>
<body>
#import("body")
</body>
<script src="/{JS-FILE-NAME}"></script>
</html>
Related
Is it possible to merge JS files (or CSS files) with parcel ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/aos.js"></script>
<script src="/js/club.js"></script>
</head>
<body>
</body>
</html>
When I run
parcel build js.html
I got 2 minified .js files into /dist
Is there a way to get one single file ?
regards
I don't think there's currently a config-driven way to get parcel to do this, but if your project can tolerate using modules (and if you have a choice - i.e. you wrote both aos.js and club.js), I would highly recommend this to avoid bugs that can come with global variables), then you can have your html reference a single index.js file, which then imports all of it's dependencies, like this:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/index.js" type="module"></script>
</head>
<body>
</body>
</html>
Note the type="module" property in the script tag - see documentation
js/index.js
import "js/aos.js"
import "js/club.js"
I am trying to create a GitHub Pages for one of my existing repositories. When I click on "Your site is published at ..." I just get a blank screen. Here is the link to the site: https://mrcj101111.github.io/Clipboard/
The page is correct. Your Body is empty, in the below example I added an h1 header with the a value of "geckos-23".
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<title>geckos-23</title>
</head>
<body>
<h1>geckos-23</h1>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
CoffeeScript code is not working when the 1.10.0 version coffee-script.min.js is linked.
<!DOCTYPE html>
<html lang="en">
<head> <meta charset='utf-8'> </head>
<body>
<div id="myDiv">Content</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js" > </script>
<!--
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.4.0/coffee-script.min.js" > </script>
-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.10.0/coffee-script.min.js" > </script>
<script type="text/coffeescript" >
$("#myDiv").text "New Content"
alert "Hello world"
</script>
</html>
The latest working CDN coffee-script.min.js is 1.4.0. What is the problem?
Those script hosted in CDN are not for browser, I think.
I tried your code, and as you say it did not work and there was the following console log.
Uncaught ReferenceError: require is not defined
require is a specification of commonJS and it is not implemented in browser default.
If you would not like to compile and make it work easily, the code below is available.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
</head>
<body>
<div id="myDiv">Content</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript" src="http://coffeescript.org/extras/coffee-script.js"></script>
<script type="text/coffeescript">
$("#myDiv").text "New Content"
alert "Hello world"
</script>
</html>
This way is introduced at the official site.
http://coffeescript.org/
While it's not recommended for serious use, CoffeeScripts may be included directly within the browser using tags. The source includes a compressed and minified version of the compiler (Download current version here, 39k when gzipped) as extras/coffee-script.js. Include this file on a page with inline CoffeeScript tags, and it will compile and evaluate them in order.
Error in packaging on the part of the CDN provider, see here:
https://github.com/jashkenas/coffeescript/issues/3811
https://github.com/cdnjs/cdnjs/issues/4869
I'm using the trial webide and trying to run myqunittest.qunit.html from the /test-resources folder. by using the url /test-resources/myqunittest.qunit.html. However it simply returns a 404 error whenever I attempt to run it.
Is this a problem with defining the resources? I don't understand how, for example, view/Main.view.xml can be found but not anything in the test-resources folder (I've tried just creating a simple js or html file containing a single line and it still 404'd).
I've copied the page directly from the qunit help page, QUnit Testing Fundamentals, this code seems to imply it should just work without any reference to the rest of the app.
I've tried various combinations of sap.ui.localResources and data-sap-ui-resourceroots in both html files to no avail.
My folder structure is as follows:
myapp
test-resources
myqunittest.qunit.html
view
Main.controller.js
Main.view.xml
index.html
myqunittest.qunit.html
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script id="sap-ui-bootstrap"
type="text/javascript"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-noConflict="true">
</script>
<link rel="stylesheet" href="resources/sap/ui/thirdparty/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="resources/sap/ui/thirdparty/qunit.js"></script>
<script type="text/javascript" src="resources/sap/ui/qunit/qunit-junit.js"></script>
<script type="text/javascript" src="resources/sap/ui/qunit/QUnitUtils.js"></script>
</head>
<body>
<div id="qunit"></div>
</body>
</html>
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-resourceroots='{"myapp": "./"}'
data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
sap.ui.localResources("view");
var app = new sap.m.App({initialPage:"idMain"});
var page = sap.ui.view({id:"idMain", viewName:"myapp.view.Main", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
In your index.html you are loading ui5 relatively to the index.html in a resources folder
so on your server there is another folder
myapp
resources
sap-ui-core.js
test-resources
myqunittest.qunit.html
view
Main.controller.js
Main.view.xml
index.html
The problem is, that you are loading the core also relatively to your test-resources. You probably need to go 1 directory up.
so in myqunittest.qunit.html
change the bootstrap to
<script src="../resources/sap-ui-core.js"
Best regards,
Tobias
The SAP WebIDE adds neo-app.json to a project you create. It contains this entry:
{
"path": "/test-resources",
"target": {
"type": "service",
"name": "sapui5",
"entryPath": "/test-resources"
},
"description": "SAPUI5 Test Resources"
}
This is interfering with creating my own test-resources folder (one doesn't already exist in the project), and was causing the 404 error. Removing this entry has fixed my problem.
I want to add a plugin(http://www.sencha.com/forum/showthread.php?150918-Grid-Header-Filters) to my application.
What's the best way to install it, considering I use sencha SDK-tools ...
The class name of plugin is: Ext.ux.grid.plugin.HeaderFilters
Any suggests?
Check basic setup here:
http://www.sencha.com/learn/html-page-setup/
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Velociraptor Owners</title>
<!--Ext JS-->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<!-- script type="text/javascript" src="extjs/bootstrap.js"></script-->
<script src="extjs/ext-all-debug.js"></script>
<script src="extjs/GridHeaderFilters.js"></script>
<!--Application JS-->
<script src="grid.js"></script>
<!-- script src="php/api.php"></script -->
<!--Application Aesthetics-->
<link rel="stylesheet" href="style.css" type="text/css">
</head>