I'm new to this HTML CSS stuff and I like it. A few days ago I stumbled upon Bootstrap, and I liked it. How can I use it with dreamweaver ?
you can add the bootstrap files to your source (if you want to edit the bootstrap docs this is recomended) or just use the online-versions and apply the tags in the head part of your html document.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
and with this it should run no matter what IDE you use.
/S
Related
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/
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>
I want to use bootstrap on my website. First, I put CDN in the head, and everything is fine. Then I don't want to apply bootstrap by CDN, so I download the bootstrap file, and put the CSS part in the <style>, and put the js part in the <script>. But it didn't work, why?
This is the CDN code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
Follow this step:
Go to https://getbootstrap.com/ and then click a big "Download" button.
Scroll down to "Compiled CSS and JS" section, click "Download" button.
You'll have a file named like bootstrap-4.0.0-beta-dist.zip downloaded (according to current version).
Extract it. It'll have 2 folders inside: css & js.
Include them on your web project directory e.g. in assets/bootstrap.
Include them inside your html <head> script:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src='assets/bootstrap/js/bootstrap.min.js'></script>
Good luck & keep learning!
In your <head> section you can Link your CSS stylesheet
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
And Link Js files on
<body>
<!-- html code -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js">
</body>
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.
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">