So I created a web app using visual studio .net core 3.1. I see that boostrap came with it by default. So what I did was copy and paste the accordion example from bootstrap and was expecting it to work by default but it is not rendering. I double checked and see that jquery is referenced before boost strap. I checked the css and JS file and it is loaded, and there is no error in the console. Is there something else I need to do?
Update:
This is where I got the sample code, it is the very first example: Bootsrap example
You can open bootstrap.js in your project,you will find the version of bootstrap is v4.3.1,and you are referencing the official document of bootstrap v5.0,so you need to add the css and js of v5.0.
You can try to add the css and js of v5.0 to your _layout.cshtml.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Related
I've created a new application with Vue CLI and I'm using the following code in my index.html to embed an SVG icon.
<link rel="icon" type="image/svg+xml" sizes="any" href="/img/icons/icon.svg">
This on it's own should work without any issues.
However, when Vue builds the application, I can see this line gets commented out in the source code.
Regular (png) icons work just fine without being wrapped in the [if IE] tag.
<!--[if IE]><link rel="icon" type="image/svg+xml" sizes="any" href="/img/icons/icon.svg"><![endif]-->
I would like my original code to be used instead of it being wrapped in the [if IE] tag, is there any way to tell Vue not to edit it?
EDIT: Here's the code to reproduce the issue: https://github.com/CerxMe/vue-icon-bug
I'm used to working on .NET MVC. I'm trying to learn .NET Core now and want to include Bootstrap with SASS. I'm completely new to the setup side of things and can't get it properly up and running.
I have set up my .NET core project and I've managed to install bootstrap 4 with libman. After I'd done it, I read that it's preferred to do it with npm but it seems to be fine.
All the defaults work as expected.
Now I'm trying to make custom changes and that's where it gets troublesome. Just to see if changes are applied, I've changed the primary colour code in the _variables file but nothing changes. I've also tried to create a custom scss file to override the others but again, it doesn't work. I'm sure it's me doing something wrong but I'm not sure what.
my file structure looks like this. It was created when I installed bootstrap 4:
file structure top
file structure bottom
the only thing I changed was adding the site.scss file for customisation.
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</environment>
</head>
My custom site.scss:
$orange: #d95700;
#import "bootstrap";
$theme-colors: ( "primary": $orange );
When I make changes to the bootstrap.css they either show up or they get overridden by the _reboot.scss, depending on what it is. e.g. I can change the body bg color to red.
If anyone needs me to add any more information, I'm happy to do that.
Libman merely pulls in the libraries statically. Changing any of the SCSS files isn't going to cause the CSS file you're referencing to be updated. For that to happen, you'll need to set up a build of the SCSS with something like Webpack or Gulp.
However, if you want to actually modify the SCSS, then you should not rely on libman or even npm to pull in Bootstrap for you. Both of these will update the library in place, overriding any of your changes. Instead, you should simply download Bootstrap directly or you can include it in your project in a more updatable way by forking the Bootstrap project on GitHub and then including that in your repo as a remote. Then, you can commit changes out to your fork, and merge updates from the Bootstrap official repo into your fork.
I have included a bootswatch theme in my website.
<!-- Bootstrap CSS served from a CDN -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" integrity="sha384-zF4BRsG/fLiTGfR9QL82DrilZxrwgY/+du4p/c7J72zZj+FLYq4zY00RylP9ZjiT" crossorigin="anonymous">
<!-- Scripts -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
The problem is that bootstrap.min.css file loads twice. I can see it twice in resources when I open developer console on any browser. It is the same file because I can see that it is loaded by the same html line. Because of this, when I want to close a collapse or a menu, it just closes and opens again fast. I have no idea why it loads twice. How can I fix this?
I can think about two reason for your issue---
No.1
You have a plugin that uses bootstrap and it is loading the additional cdn.
No.2
You are adding some include file in your page which have the bootstrap cdn inside it. Hence your main page loads two bootstrap cdn.
Suggestion
Try removing bootstrap cdns from the bootswatch theme. As I am assuming that your website has already bootstrap cdn included in it.
I know it's a old thread, but I was searching for the same and also found the answer.
Remove integrity attribute from the url and it downloads only once.
This new attribute integrity attribute which I think is what makes the browser to call the cdn the first time to check that the file is not manipulated and then the second call happens to load the file.
Somehow it is flawed and should not download twice.
I'm trying to make a simple page with bootstrap and glypicons in jsf 2.2. I've included webjar's bootstrap dependency (and opening the jar I can see the fonts file are present).
When deploying the app to wildfly, bootstrap css works correctly, but icons shown are horrible (like a default font or something). Looking at the network tab in the browser, I only see 404 errors:
http://localhost:8080/proto/javax.faces.resource/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.woff 404
http://localhost:8080/proto/javax.faces.resource/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.ttf 404
I tried including the other dependency (bootstrap-glypicons) and I only get the 404 errors twice. What am I missing?
This is how I'm including boostrap, which works correctly for css:
<h:outputStylesheet library="webjars" name="bootstrap/3.1.1/css/bootstrap.min.css" />
And this is how I'm using the css classes:
<button><span class="glyphicon glyphicon-minus"></span></button>
You should use <link> tag instead of <h:outputStylesheet>
eg.
<link rel="stylesheet" type="text/css" media="all" href="webjars/bootstrap/3.1.1/css/bootstrap.min.css"/>
--- UPDATE
This happen because ResourceHandler in JSF add library value (webjars) to the end of URI as a parameter:
faces/javax.faces.resource/bootstrap/3.1.1/css/bootstrap.min.css?ln=webjars
in bootstrap.min.css CSS there are such references to files:
url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
so if you want to use <h:outputStylesheet> you can write own ResourceHander or you can edit bootstrap.min.css and fix paths to glyphicons-halflings-regular.* files
In my opinion is better to use standard html tag <link> instead of <h:outputStylesheet> because JSF component tree will be smaller and it act on performance. Inside bootstrap.min.css there is no EL so there is no need to use <h:outputStylesheet>
Small update: webjars has JSF specific versions of several CSS libraries, in case of the bootstrap CSS the following will work just fine:
<h:outputStylesheet library="webjars" name="bootstrap/3.3.5/css/bootstrap-jsf.css" />
Note the -jsf suffix.
I am trying to integrate DOJO to my existing struts application.
Listed below are the steps I followed.
1.Downloaded DOJO 1.4, copied dijit,dojo and dojox folders under my application folder jsp->js>DOJO
copy paste "dialog via mark up example" (http://www.dojotoolkit.org/reference-guide/dijit/Dialog.html#dijit-dialog)
When I run the application, I am getting javasript error dojo undefined.
What I am missing?
Also where is dojo.xd.js? I don't see it under dojo folder
You are probably missing a reference to the dojo script on your page.
http://www.dojotoolkit.org/reference-guide/quickstart/install.html#quickstart-install
You need to add a <script src="path to where you put dojo"></script> to your page.
Simple alternative is to use the DOJO from CDN - Content Distribution Network (Multiple repositories which has all dijit,dojo and dojox folders . So you don't have to copy anything). Use the following code if you want to use the latest DOJO.
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.4/dojo/dojo.xd.js"></script>
If you want a specific version, then
<script type="text/javascript" src="http://o.aolcdn.com/dojo/<version>/dojo/dojo.xd.js"></script>