Highlighted

Can I set up Bootstrap to use BootstrapCDN by default on Dreamweaver?

New Here ,
Mar 25, 2020

Copy link to clipboard

Copied

It's just a matter of personal preference, but it would seem that Dreamweaver wants me to download the dependencies onto my site. I would just prefer to link to BootstrapCDN instead as I am mainly using these sites for learning purposes.

Is there a neat solution which allows me to start a document with

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

in the header, and

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

 in the body?

Views

645

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Can I set up Bootstrap to use BootstrapCDN by default on Dreamweaver?

New Here ,
Mar 25, 2020

Copy link to clipboard

Copied

It's just a matter of personal preference, but it would seem that Dreamweaver wants me to download the dependencies onto my site. I would just prefer to link to BootstrapCDN instead as I am mainly using these sites for learning purposes.

Is there a neat solution which allows me to start a document with

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

in the header, and

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

 in the body?

Views

646

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Mar 25, 2020

Copy link to clipboard

Copied

Open your Snippets Panel.

https://helpx.adobe.com/dreamweaver/using/reuse-code-with-snippets.html

I have created re-usable code snippets for CDN hosted Bootstrap and jQuery scripts.  I saved them to my custom Snippets folder.  For quicker insertion into new documents, use Snippet trigger keys.

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 25, 2020

Copy link to clipboard

Copied

If you want all of your Bootstrap-based HTML documents to use the code above, [assuming you have administrative rights on your machine,] you can edit the Bootstrap.html file to prefill the links with the code you listed above. 

 

I'm on a Windows 10 machine, so the file is located in the following location:

C:\Program Files\Adobe\Adobe Dreamweaver 2020\configuration\BuiltIn\BootstrapNewDocs

 

Locate Bootstrap.html in the folder. (*Be safe! Be Sure to BACK UP your original file by duplicating it and saving with a new name, such as Bootstrap-original.html) Open it and paste over the code with your setup:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <!-- Bootstrap -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	<!-- Insert BS3 comment -->
  </head>
  <body>
  	<!-- body code goes here -->


	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

 

Save the file, then close Dreamweaver and restart it. When you go to the New Document dialog and choose HTML > Bootstrap (Create New CSS - will be prefilled; do not include pre-built layout), you'll be able to open a blank document with all of your presets ready to go. I use this for other setups and it works well.

New Dialogue BootstrapNew Dialogue Bootstrap

Hope this helps!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 25, 2020

Copy link to clipboard

Copied

There may come a time in the not too distant future when you

  a) need upgraded versions of Bootstrap, jQuery, etc...

  b) no longer need Bootstrap, jQuery, etc...

  c) need to switch to scripts that are hosted on your own CDN/servers.

 

For those reasons, I think I prefer the flexibility of Snippets.

But use whatever works best for you.

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Learn Resources
Add a group