Bootstrap Resumé: the first step
Bootstrap is a framework for web pages created by Twitter employees. It uses a grid system, dividing each page into 12 vertical cells to control layouts. Out of the box it provides "responsive" layouts that change according to the width of the screen you use on your computer.
Create a new page from the Starter Templates for a
The other thing to do first is to create a blank stylesheet called something like cv.css for your specific styling that overrules the standard bootstrap styling: i.e. it should be linked in the head of the cv.htm after the bootstrap.css.
File Menu has an
Attach Style Sheet option but check the code to ensure it is properly placed.
F10 will call up the
Unlike other Dreamweaver Starter Templates, the Bootstrap specimens are poorly commented.
To get a proper WYSYWYG (what-you-see-is-what-you-get) view in Dreamweaver I had to set the display to Live View.
N.B. Dreamweaver wants you to hook up to
bootstrap.css but gave me the wrong link. You too may need to change the default link, and I prefer to link to the minified version,
bootstrap.min.css, then change tags in my separate css file, here
cv.css. You know where to find the
File|Attach Style Sheet command. Just make sure it comes after the bootstrap stylesheet in the head section.
Replace the defaults
To ensure you have the latest version of Bootstrap, once you have created your page with the Dreamweaver defaults, you can replace the head specifications with the online versions (currently 4.5.3) , though you will need to have an internet link to view it. Here's the code (ignore the line breaks):
<!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ email@example.com/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
You will need to add some more code in the bottom part of the html just after the
<!-- jQuery, Popper.js, and Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/ zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://firstname.lastname@example.org/dist/ umd/popper.min.js" integrity="sha384-9/ reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYl FhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://email@example.com /dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7 lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>