Bootstrap is often criticized for its bloated framework — the bootstrap.css file contains over 6700 lines of code! The browser has to read and process this code as the page loads. The minified bootstrap.min.css file is formatted as a single chunk of code with no space marks or line breaks. The difference in file size is significant.
Downloading the Bootstrap framework directly from Bootstrap's website will allow you to choose the minified version of the Bootstrap CSS and JS framework. Let's try it out.
When you browse getbootstrap.com, you'll notice that there are several versions of Bootstrap to choose from. A beta version of Bootstrap 4 was released in August 2017 - feel free to check it out. However, we will be using the latest stable release of Bootstrap in this class: Bootstrap 3.3.7.
Head to the Download page for Bootstrap 3.3.7.
Click the "Download Bootstrap" button.
The bootstrap folder contains a css folder, a js folder, and a fonts folder. Drag all three files into your stop-drop-roll folder.
You've got the CSS and JS files, so now, you just need the HTML file. Go to File > New and choose "None". Click the Create button.
 |
The "None" option in the New Document window. |
The HTML file will open in a new document window. Right away, go to File > Save As, saving the HTML file as index.html in your stop-drop-roll folder.
Head to getbootstrap.com and copy the code for the basic template.
Back in your index.html file in Dreamweaver, choose Edit > Select All and hit your Delete key. Then Edit > Paste the code you copied from Bootstrap.
Toggle to view the files in the Related files toolbar. You have a minified CSS file and two minified JS files.
You'll need to create a custom.css file for any custom formatting. Toggle back to the Source Code in the Related Files toolbar. Go to Window > CSS Designer to open the CSS Designer panel, then drag the panel so it docks behind the Files panel (as you drag the panel, you'll see a blue outline when the panels are ready to dock). Click the + sign next to "Sources". Choose "Create a New CSS File". Open your CSS Designer panel and click the + sign next to "Sources". Choose "Create a New CSS File".
Type "custom.css" into the File/URL field and choose "Add as Link". Click OK.
Make sure that the custom.css appears after the bootstrap.min.css. You want your custom styles to override the default Bootstrap formatting.
Choose File > Save All. Your Bootstrap framework is installed!
