Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,971 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding the difference between default and fluid grids
- Nesting with fluid grids
- Creating a thumbnail gallery
- Adding block quotes and lists of text
- Incorporating images and icons
- Adding breadcrumb navigation and pagination
- Using tabs and pills navigation
- Adding dropdown menus to the nav bar, tabs, and pill
Skill Level Beginner
Now that we've downloaded our copy of Bootstrap, let's get started building our first HTML web page inside of Dreamweaver. I'm using Dreamweaver for this particular course because I've worked with Dreamweaver for a long time, and I'm familiar with it as an environment for editing HTML and CSS. You certainly don't have to use Dreamweaver to accomplish what I'm going to show you here, and in fact, we're going to be working in code view most of the time. You're welcome to use any sort of program whatsoever that will allow you to edit HTML and CSS files. That's what we'll be doing for the most part in this course.
So I'm in Adobe Dreamweaver CS6, I'm in the default designer view, as you take a look at the screen here. So if you want to make your screen look exactly like mine, over here at the top right there's this item for Designer view. Make sure yours is set to Designer view, and then here where you see this thing called Business Catalyst, I'm just going to go ahead and close that whole tab group. We won't be using it in this course, and I'd like to make a little bit more room for my files which are down here at the bottom, so I can see what's going on. As always, when we start working with Dreamweaver, the very first thing to do is to make a Dreamweaver site.
So I'm going to go ahead and do that now by going to Site > New Site, and I'm going to give this site a name. I'm going to call it bootstrap, and I'm going to indicate where my local site folder is located, and I can do that by clicking on the folder icon here. I'm going to go to my Desktop, and I'm going to go to my bootstrap folder right here on the desktop, and inside of that are those three folders that we just downloaded from getbootstrap.com, they're all present there. Go ahead and say Select and then say Save, and you should see those three folders now show up over here on the side inside of the files, paneled over on the right side of Dreamweaver.
The next thing, once we have the Dreamweaver site established is to create a new HTML web page. So to do that, go to File > New, and you get this grid of options that you can choose from. We're certainly going to build a blank page. Don't be confused by the fluid grid layout. This is a Dreamweaver-based fluid grid layout, it has nothing to do with Bootstrap's grid layout, which I'll be covering in some later videos. So we want just the blank page. It's going to be an HTML page type, and then for the layout, none of the layouts need to apply.
Over here for the doc type, make sure you choose HTML 5, because that is what we will be working with for Bootstrap, which is designed to work with HTML 5, and then go ahead and say Create, and you should see a document very similar to this on your web page. So first thing I'm going to do is change my title from Untitled Document to Up and Running with Bootstrap, which is the title of the course. The next thing you might want to take a look at it is inside of your exercise files, I've given you a tiny little bit here of extra code that needs to appear inside of your Bootstrap document.
One thing is this line here, this meta tag, this is a meta tag indicating that the viewport starts with an initial scale of 1.0. This is important in responsive design. So we're going to go ahead and copy this by doing Ctrl+C or Command+C to copy that particular text from the document, and then just after here, where it says meta characters set of UTF-8, I'm going to Ctrl+V or Command+V to paste that line of code right on into place. The next thing I need to do is attach the style sheets that I'll be using in this particular document, and we can do that over here through the Styles Palette which is located on the right side of the screen. If you just hit refresh, you should be able to see the Styles Palette as it normally appears.
Down at the bottom of the Styles Palette there is a link icon to attach a stylesheet, go ahead and click that, and we're going to browse for our CSS folder, and inside of that, you'll find that there's actually four stylesheets that are available to you, and you're probably wondering what the differences are between these. So first of all, you'll see that there are two sets of two, really bootstrap and bootstrap.min, bootstrap-responsive and bootstrap-responsive.min. The differences here are the .min files are what are called minimized they've been processed so that all the space that is normally present in a stylesheet file has been taken out, and that will help the files download more quickly, which is great when you're actually using a production site, and you want to make sure your file sizes are small as possible so that mobile phone users have very, very small files to download.
Since we're doing this in a development environment, I'm going to link to the full version of these stylesheet files in case we ever want to go and take a look at them. So we want the more human readable format. So I'm going to link directly to just the regular Bootstrap file here first, and I'm going to say OK. Dreamweaver is going to warn me that it's going to use a file path until I've saved my document, which we'll save in just a moment, so go ahead and say OK for that and OK again. So this has gone ahead and attached that bootstrap.css file to my document.
Right after that, we are going to attach the second stylesheet, hit the browse button here, and we want the bootstrap-responsive stylesheet. Make sure the bootstrap-responsive stylesheet comes after the bootstrap stylesheet, because in some cases, this bootstrap-responsive stylesheet will override within the bootstrap stylesheet, so the order does indeed matter. Go ahead and say okay, it'll give you the same message again about the file path, and so now you can see that I have two lines of code here, one calling for regular bootstrap.CSS, one calling for the bootstrap responsive, and to make that code a little easier, I'll go ahead and save this now.
So go to File > Save, and I'm going to save it right into the root of my website here. I'm just going to call this index.html, always a good named to call an HTML document, and you'll see that the paths here inside of Dreamweaver adjust accordingly and correctly to take a look at those two stylesheets. Before we leave the head of this document, there's one last thing I'd like to add, and this will come just after the CSS for the bootstrap-responsive. I'm going to put an extra space here inside of your exercise files. You'll see that I have a little snippet of code here, which is an HTML 5 shim.