Include bootstrap in my HTML page - javascript

I have this VERY simple line of code. I am just starting in doing some Javascript coding but I cannot make this work. Can you please tell me why?
<html>
<head>
<script src="bootstrap.min.js"></script>
<title>My Website</title>
</head>
<body>
<p>This is an example of a paragraph.</p>
<button type="button" class="btn btn-danger">Danger daw!</button>
</body>
</html>
The bootstrap is not appearing on the page.

Bootsrap has Javascript, CSS and an optional theme. From the Getting Started link on the bootstrap site you have the following code which will include them all for you.
If you are hosting the files yourself, just update the paths to the files.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Add this beetween your head tags:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

You should include css file path, here i used BootstrapCDN. And try to learn about bootstrap from here . I hope this is helpful.
<html>
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<title>My Website</title>
</head>
<body>
<p>This is an example of a paragraph.</p>
<button type="button" class="btn btn-danger">Danger daw!</button>
</body>
</html>

U miss incldue CSS.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Bootstrap requires jquery as a dependency.
Use the following code as suggested by rdn87
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap</h1>
<p>Text goes here</p>
</div>
</body>
</html>

Related

Vuejs: Multiple CSS template in one application

I'm Vuejs beginners. How can I have multiple template in one application?
Example, for SignIn page, i would like to use Flatkit template, and for Admin dashboard, i would like to use other template (Dashboard). How do i combine those template in one app? In my index.html file, I already insert element for Flatkit, but when I insert Dashboard element, the CSS not working. What is the way to combine those link and script element
Here the project flow
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<!-- LOGIN TEMPLATE -->
<!-- for ios 7 style, multi-resolution icon of 152x152 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-barstyle" content="black-translucent">
<link rel="apple-touch-icon" href="./Flatkit/assets/images/logo.png">
<meta name="apple-mobile-web-app-title" content="Flatkit">
<!-- for Chrome on Android, multi-resolution icon of 196x196 -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" sizes="196x196" href="./Flatkit/assets/images/logo.png">
<!-- style -->
<link rel="stylesheet" href="./Flatkit/assets/animate.css/animate.min.css" type="text/css" />
<link rel="stylesheet" href="./Flatkit/assets/glyphicons/glyphicons.css" type="text/css" />
<link rel="stylesheet" href="./Flatkit/assets/font-awesome/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="./Flatkit/assets/material-design-icons/material-design-icons.css" type="text/css" />
<link rel="stylesheet" href="./Flatkit/assets/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
<!-- build:css ../assets/styles/app.min.css -->
<link rel="stylesheet" href="./Flatkit/assets/styles/app.css" type="text/css" />
<!-- endbuild -->
<link rel="stylesheet" href="./Flatkit/assets/styles/font.css" type="text/css" />
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- build:js scripts/app.html.js -->
<!-- jQuery -->
<script src="./Flatkit/libs/jquery/jquery/dist/jquery.js"></script>
<!-- Bootstrap -->
<script src="./Flatkit/libs/jquery/tether/dist/js/tether.min.js"></script>
<script src="./Flatkit/libs/jquery/bootstrap/dist/js/bootstrap.js"></script>
<!-- core -->
<script src="./Flatkit/libs/jquery/underscore/underscore-min.js"></script>
<script src="./Flatkit/libs/jquery/jQuery-Storage-API/jquery.storageapi.min.js"></script>
<script src="./Flatkit/libs/jquery/PACE/pace.min.js"></script>
<script src="./Flatkit/scripts/config.lazyload.js"></script>
<script src="./Flatkit/scripts/palette.js"></script>
<script src="./Flatkit/scripts/ui-load.js"></script>
<script src="./Flatkits/cripts/ui-jp.js"></script>
<script src="./Flatkit/scripts/ui-include.js"></script>
<script src="./Flatkit/scripts/ui-device.js"></script>
<script src="./Flatkit/scripts/ui-form.js"></script>
<script src="./Flatkit/scripts/ui-nav.js"></script>
<script src="./Flatkit/scripts/ui-screenfull.js"></script>
<script src="./Flatkit/scripts/ui-scroll-to.js"></script>
<script src="./Flatkit/scripts/ui-toggle-class.js"></script>
<script src="./Flatkitscripts/app.js"></script>
<!-- ajax -->
<script src="./Flatkit/libs/jquery/jquery-pjax/jquery.pjax.js"></script>
<script src="./Flatkit/scripts/ajax.js"></script>
<!-- endbuild -->
</body>
</html>
you can use 2 different main html page if your main scripts are entirely different. You can configure it in backend.
Another idea is adding only common scripts and styles in html file. And use your scoped styles in components. Add style of each component in "style" tag below "script" tag. make the style scoped using :
VUE COMPONENT:
<template>
</template>
<script>
<script>
<style scoped>
/* your style */
</style>
Scope of this style would only be applicable to current component.

Bundle dependent javascript files without require using webpack

I am not sure if it is possible or not.
I have a bunch of javascript files, all are dependent on each other.
I want to bundle all of them but I can't add require and module.exports in every file since they are so many files.
So my question is, can I bundle all these files while keeping the dependencies intact.
This is how my HTML looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="ja">
<head>
<meta http-equiv="Expires" content="3600">
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico"/>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>3D BAT</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/w2ui-1.5.rc1.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/jquery-ui.min.css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/jspanel.css" rel="stylesheet" type="text/css">
<script src="js/lib/three.js"></script>
<script src="js/lib/controls/MapControls.js"></script>
<script type="text/javascript" src="js/lib/renderer/CSS2DRenderer.js"></script>
<script src="js/lib/jquery-2.2.4.min.js"></script>
<script src="js/lib/bootstrap.min.js"></script>
<script src="js/lib/raphael.js"></script>
<script src="js/lib/Toast.js"></script>
<script type="text/javascript" src="js/lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/lib/WebGL.js"></script>
<link href="css/main.css" rel="stylesheet">
<link href="css/label_tool.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="wrapper">
<div id="label-tool-wrapper"></div>
<script src="js/lib/controls/threex.keyboardstate.js"></script>
<script src="js/lib/SceneUtils.js"></script>
<script src="js/lib/PCDLoader.js"></script>
<script src="js/lib/OBJLoader.js"></script>
<script src="js/lib/controls/OrbitControls.js"></script>
<script src="js/lib/controls/TransformControls.js"></script>
<script src='js/lib/controls/PointerLockControls.js'></script>
<script src='js/lib/controls/KeyboardState.js'></script>
<script src="js/lib/controls/threex.keyboardstate.js"></script>
<script src="js/lib/Detector.js"></script>
<script src="js/lib/stats.min.js"></script>
<script src='js/lib/dat.gui.js'></script>
<script src='js/lib/Projector.js'></script>
<script type="text/javascript" src="node_modules/jszip/dist/jszip.js"></script>
<script type="text/javascript" src="node_modules/file-saver/dist/FileSaver.js"></script>
<script src="js/lib/html2canvas.js?ver=1.0"></script>
<script src="js/lib/base64-binary.js?ver=1.0"></script>
<script src="js/util/math.js?ver=1.0"></script>
<script src='js/util/classesBoundingBox.js?ver=1.0'></script>
<script src='js/util/boundingbox.js?ver=1.0'></script>
<script src='js/base_label_tool.js?ver=1.0'></script>
<script src='js/pcd_label_tool.js?ver=1.0'></script>
<script src="js/image_label_tool.js?ver=1.0"></script>
<script src='js/util/ajax_wrapper.js?ver=1.0'></script>
<script src='js/lib/w2ui-1.5.rc1.min.js?ver=1.0'></script>
<script src="node_modules/dragscroll/dragscroll.js"></script>
</div>
<div class="frame-selector">
<div class="current">1/900</div>
<div class="list-wrapper">
<div class="frame-selector__frames"></div>
</div>
</div>
<img id="left-btn" src="assets/textures/left.png" onClick="labelTool.previousFrame()" alt="left"/>
<img id="right-btn" src="assets/textures/right.png" onClick="labelTool.nextFrame()" alt="right"/>
<div id="time-elapsed"></div>
<ul class="toasts"></ul>
</body>
<script type="text/javascript">
labelTool.start();
</script>
</html>
in the above code script tag order is important since files are dependent on each other.
Can I bundle all these files into one without making any change into the current js files?
If the JS is written to certain standards, you can just combine them into to a single file with simple concatenation (e.g. with the standard unix tool [cat].)
This is quite fragile though, since semicolon insertion rules can break things when you just stick two JS files together.
e.g. if you have a couple of files that use IIFEs to scope variables, then putting them next to each other will cause the parenthesis around the second to act as a function call containing arguments for the first.
So you need a tool to do this. Last time I had cause to build a system in JS that didn't use Node.js or ES6 modules I used UglifyJS which can take care of that problem (while also shrinking the file size of the JS).
uglifyjs input.js other-input.js more-input.js --output combined.js -c

Bootstrap slider - CSS not showing properly

Okay, I've downloaded the Bootstrap slider: https://github.com/seiyria/bootstrap-slider
I got into \bootstrap-slider-master\dist and copied the bootstrap-slider.js and the bootstrap-slider.min.js into my js folder. I also copied the bootstrap-slider.css and the bootstrap-slider.min.css into my css folder.
I now tried the example 7, check the top link and go to examples.
But there is a problem.
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Test bootstrap slider </title>
<link href="css/bootstrap.min.css" rel="stylesheet" >
<link href="css/bootstrap-slider.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<input id="ex7" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false"/>
<input id="ex7-enabled" type="checkbox"/> Enabled
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="js/bootstrap-slider.min.js"></script>
<script>
$("#ex7").slider();
</script>
</body>
</html>
This is the result:
My result in browser (click)
The text is there and the radio button, but I cannot see the slider. I think the css is the problem, but I've implemented it in the head after the bootstrap css. So I don't know why won't it work.
Your code should work, you probably have referenced a wrong file or sth?
I embedded the online version of bootstrap/jquery but it should basically be the same:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<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://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.5.1/css/bootstrap-slider.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.5.1/bootstrap-slider.js"></script>
</head>
<body>
<div class="container">
<input id="ex7" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="5" data-slider-enabled="false"/>
<input id="ex7-enabled" type="checkbox"/> Enabled
</div>
<script>
$("#ex7").slider();
</script>
</body>
</html>
You put this wrong: <script type="js/bootstrap-slider.min.js"></script>.Not type, src.
It should be:
<script src="js/bootstrap-slider.min.js"></script>
Try it now!

How do I implement and use eyecon's bootstrap-datepicker?

I visited Eyecon and downloaded the datepicker. I got three folders. 'css', 'js' and 'less'. I have included the bootstrap-datepicker.js and the latest jquery.js and linked the .css in the head:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="../css/datepicker.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap-responsive.css">
</head>
<body>
<div class="well">
<!--What should I enter here and where/how do I call the function?-->
</div>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
</body>
</html>
As one can see, I'm already working with the bootstrap library and have therefore also included that.
My question now is: how do I implement and call the date picker function?
$('element').datepicker(); where element is some class, id etc.
http://jsfiddle.net/6kk3k/1/
HTML
<input type="text" class="datepicker">
jQuery
$('.datepicker').datepicker();

Combining and minifying JS and CSS in ASP.NET MVC

I created default ASP.NET MVC 3 web application. Then I added three css and three js files to \Views\Shared_Layout.cshtml view:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/StyleSheet1.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/StyleSheet2.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JScript1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JScript2.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<div id="header">
....
when I run the application, I html code is
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/StyleSheet1.css" rel="stylesheet" type="text/css" />
<link href="/Content/StyleSheet2.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/JScript1.js" type="text/javascript"></script>
<script src="/Scripts/JScript2.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
Is it possible to have a handler in MVC to change my output html to like:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<script src="js.axd=/Scripts/jquery-1.5.1.min.js,/Scripts/JScript1.js,/Scripts/JScript2.js" type="text/javascript"></script>
<link href="css.axd=/Content/Site.css,/Content/StyleSheet1.css,/Content/StyleSheet2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
So the link js.axd=/Scripts/jquery-1.5.1.min.js,/Scripts/JScript1.js,/Scripts/JScript2.js
will return content of all these js files to the browser, and link css.axd=/Content/Site.css,/Content/StyleSheet1.css,/Content/StyleSheet2.css will return content of all css files.
I did something before in ASP.NET by IHttpHandler, but can't figure out how to do that in MVC, since I'm just starter in MVC.
Any help and code samples will appreciate.
Thank you!
You can use bundle and minification nuget package. Bundling and Minification
At the NuGet console type: "Install-Package Microsoft.AspNet.Web.Optimization"
Example here:
Using Web Optimization with MVC 3
I use cassette in my own projects. Also, this list here contains top 20 in Nuget.

Categories