I have a little problem with Angular2 and a CSS-Stylesheet.
I included boostrap in the index.html file of the Angular2-App.
It is no problem in the whole application...
Then I included another library (Bootstrap-switch) in the same way:
<!-- Load external Libraries / Modules -->
<!-- Bootstrap & JQuery -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Bootstrap Toggle Switch -->
<link rel="stylesheet" href="css/bootstrap-toggle.min.css">
<script src="js/bootstrap-toggle.min.js"></script>
<!-- eigener Stylesheet -->
<link rel="stylesheet" href="css/custom.css">
But now I have a little problem:
While the "normal" Bootstrap is functional over the entire application, the Bootstrap Toggle I can only use at the index.html.
If I use it there, no problem, but if I use it at any other page, the styles won´t apply...
Here is how I use the toggle-switch:
<div class="checkbox">
<label><input type="checkbox" data-toggle="toggle" value="">Passwort
speichern (Auto-Login)</label>
</div>
Can someone can help me? Thanks!
Related
I watched the video tutorial Laravel 9 and Vue 3 SPA online store 11. Transferring the html store template to App vue. In it, the server part is made on Laravel, and the client part on Vue.
I downloaded the layout of the client part of the online store - HTML template of the client part of the online store from Course Laravel 9 and Vue 3 SPA online store 0. Overview of the html store template and task priorities in the description under the video.
Copied the contents of the file C:\OpenServer\domains\karteecommerce\karte-fashion-multipurpose-ecommerce-html-template\index. html to the C:\Openserver\domains\clientpart\public\index.html file of the vue clientpart project (as in the video). Copied the folder (with styles, fonts and pictures) C:\OpenServer\domains\karteecommerce\karte-fashion-multipurpose-ecommerce-html-template\assets instead of C:\Openserver\domains\clientpart\src\assets.
The assets folder in the karte-fashion-multipurpose-ecommerce-html-template directory has the following location relative to the karte-fashion-multipurpose-ecommerce-html-template\index.html file
The structure of the project, as can be seen from the screenshot below, is as follows
Changed all paths starting with assets to ../src/assets (in C:\Openserver\domains\clientpart\public\index.html) and got the following file
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required Meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title For This Document -->
<title> Karte - Multipurpose E-Commerce Html Template</title>
<!-- Favicon For This Document -->
<link rel="shortcut icon" href="../src/assets/images/logo/favicon-32x32.png" type="image/x-icon">
<!-- Bootstrap 5 Css -->
<link rel="stylesheet" href="../src/assets/css/bootstrap.5.1.1.min.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#300;400;500;600;700&family=Roboto:wght#300;400;500;700&display=swap" rel="stylesheet">
<!-- FlatIcon Css -->
<link rel="stylesheet" href="../src/assets/fonts/flaticon.css">
<!-- Slick Slider Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/slick.css">
<!-- Ui Tabs Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/jquery-ui.min.css">
<!-- Magnific-popup Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/magnific-popup.css">
<!-- Nice Select Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/nice-select.v1.0.css">
<!-- Animate Css -->
<link rel="stylesheet" href="../src/assets/css/plugin/animate.css">
<!-- Style Css -->
<link rel="stylesheet" href="../src/assets/css/style.css">
</head>
<body class="shoe">
<!-- ==========Preloader========== -->
<div class="loader"><span>Karte...</span></div>
<!-- ==========Preloader========== -->
<!--===scroll bottom to top===-->
<i class="flaticon-up-arrow"></i>
<!--===scroll bottom to top===-->
<div id="app"></div>
<!--==== Js Scripts Start ====-->
<!-- Jquery v3.6.0 Js -->
<script src="../src/assets/js/jquery.v3.6.0.min.js"></script>
<!-- Popper v2.9.3 Js -->
<script src="../src/assets/js/popper.v2.9.3.min.js"></script>
<!-- Bootstrap v5.1.1 js -->
<script src="../src/assets/js/bootstrap.v5.1.1.min.js"></script>
<!-- jquery ui js -->
<script src="../src/assets/js/plugin/jquery-ui.min.js"></script>
<!-- Parallax js -->
<script src="../src/assets/js/plugin/jarallax.min.js"></script>
<!-- Isotope js -->
<script src="../src/assets/js/plugin/isotope.js"></script>
<!-- Slick Slider Js -->
<script src="../src/assets/js/plugin/slick.min.js"></script>
<!-- magnific-popup v2.3.4 Js -->
<script src="../src/assets/js/plugin/jquery.magnific-popup.min.js"></script>
<!-- Tweenmax v2.3.4 Js -->
<script src="../src/assets/js/plugin/tweenMax.min.js"></script>
<!-- Nice Select Js -->
<script src="../src/assets/js/plugin/nice-select.v1.0.min.js"></script>
<!-- Wow js -->
<script src="../src/assets/js/plugin/wow.v1.3.0.min.js"></script>
<!-- Wow js -->
<script src="../src/assets/js/plugin/jquery.countdown.min.js"></script>
<!-- Main js -->
<script src="../src/assets/js/main.js"></script>
<!--==== Js Scripts End ====-->
<script type="module" src="../src/main.js"></script>
</body>
</html>
The page looks like this
And it should look like
The App.vue file contains the content and all images starting with ../src/assets/images are rendered normally, and the styles included in public/index.html with `../src/assets/ css' didn't work.
Tell me how to achieve the inclusion of css files and thus the correct display of the page.
P.S. In the video tutorial, the index.html file is located at C:\Openserver\domains\clientpart\index.html instead of C:\Openserver\domains\clientpart\public\index.html. I'm not sure if it affected, but I wrote it just in case.
P.S. Here are screenshots of the developer tools (in which you can see the connection of css files in the lower right corner) - as it should be and as it is
P. S. Add errors
Suggest solution for Vue, on Stackoverflow link given solution for Node.js.
<h1 class="h1name" style="" ><bold><%= #user %></bold><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></h1>
I don't know why I'm getting a fat glyphicon-pencil instead of the correct one as seen in the Bootstrap Components website. http://getbootstrap.com/components/#glyphicons-how-to-use
gem 'twitter-bootstrap-rails'
Is the bootstrap version I'm using on my ruby on rails project
I am using roboto for fonts
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
Another Sample with the envelope glyphicon
without the roboto font it looks like this (still very different from the desired one)
I faced the same problem, I tried by replacing the local file with cdn path. And it works.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional: Include the jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
I'm using BOOTSTRAP via the CDN hosted by MAXcdn. But now I want to change something in the CSS files, but it's not on my server.
So my question is, how to deal with additional CSS when you are embedding your files via a CDN solution?
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Create a new file called custom.css and include it inside <head></head> after the CDN versions.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Your Custom theme -->
<link rel="stylesheet" href="your/path/to/custom/css/file">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
The best possible solution is overwriting CSS rules from bootstrap.css file into custom.css file.
for eg
If you include your css (custom.css) after Bootstrap's (bootstrap.css), you can override rules by redefining them.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Your Custom CSS code should go in this file-->
<link rel="stylesheet" href="css/custom.css">
tip: make sure to add your custom.css file after bootstrap CDN file into your HTML document.
I am trying to use bootstrap to style my page, and I have it linked with
<link href="css/bootstrap.min.css" rel="stylesheet"> which is what given on the website. But bootstrap won't apply when I run my code. I have them in the same folder.
Bootstrap should be the first css link in your head tag, after that the other css links. I don't really know what you mean with "I have them in the same folder." but I hope you mean that you have the bootstrap css files in your css folder.
Try putting it at the top like this:
<head>
<title>Title</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- General CSS -->
<link href="css/general.css" rel="stylesheet">
<!-- font awesome CSS link -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Javascript here -->
</head>
You can also try to use the bootstrap.css file. This will probably be the one you'll be editing as well.
All I am trying to do is to get some text to begin in the middle of the screen.
Here is the code below. Note that I have included the minified bootstrap css and js files in my project directory along with my html file without subdirectories. I got those files from the precompiled Bootstrap 3.0.1 download. I also tried using the links to the CDN instead. Still didn't work. When I open this code in Firefox I don't see any positioning active at all. Other Bootstrap styles didn't work either, like I tried to do <p class = "large"> blah </p> and it didn't make the text large.
NOTE: To make it easier for people to test the page, I replaced links to local bootstrap files with a link to the bootstrap CDN file.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="span3 offset9">
<p class="large">This Text</p>
</div>
</div>
<h1>Hello, world!</h1>
</body>
</html>
in your jsfiddle, the bootstrap stuff isn't correctly used, all it needs is
<body>
<div class="row">
<div class="span9 offset3"><p>Seven thousand thousands of a thousand unique people</p></div>
</body>
and some externe resouces, http://jsfiddle.net/N5n4Z/1/, is a Bootstrap 2 skeleton, with your example in it, and it work. Well unless the preview window is to small. If the Window is to small, bootstrap, due to its media querys, automatically arrange all rows underneath, and ignore every offset.
On a side note, why not using the new Bootstrap 3? http://getbootstrap.com/
Update
Since you use Bootstrap 3 now, you have to change the markup a bit.
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p>test loc</p>
</div>
fiddle
bootstrap docu
You forgot to import the javascript part of bootstrap.
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>