Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
I'm working here in Sublime Text 2, and this is the text editor that we downloaded and installed earlier in the course. And I'm now going to set this up to work with my Bootstrap website. So in the last video I downloaded a copy of Bootstrap. It's in a folder called Bootstrap on my desktop. One of the things I can do with Sublime text is show that folder structure here within my work environment, which is very handy. I'm going to go ahead and to that now. So, I'm going to go to Project, Add Folder to Project. And it'll ask me which one.
There are really kind of two sets of two. So, for example, you'll see that there is bootstrap.css, and there's bootstrap.min.css. If I take a look at bootstrap.css by double clicking on it. You'll see that this is a fairly human readable document. We can scroll on through this and read all the CSS that's here. As opposed to bootstrap.mend.css which is actually one great big huge long line that scrolls continuously here all the way over to the right. So what's the difference? The difference is that the.
min files have be minified, meaning that all of the returns and all of the extra spaces and all of the tabs have been pulled out of the CSS to cram it all into one line. This makes the file size a little bit smaller. Which is very important for mobile devices, because of course, mobile devices are limited in bandwidth, they have a slower network to work with, and we like our websites to load as fast as possible. So essentially bootstrap.css and bootstrap.min.css are identical files. The difference is that one is really human readable, and the other one is just machine readable.
So we only need to link to of these in our html document, and we'll link to the minified version. But we have the other version here in case we ever need to look at something. The other two CSS files that are here, are bootstraptheme.css and bootstraptheme.min.css. So, once again, this is the human readable format of the file versus the minified. And Bootstrap Theme is something that's new in version 3. Bootstrap 3 is shipping with what's called flat design. You know, very flat colors, no gradients, not a lot of shading or anything like that.
Whereas Bootstrap 2 had a lot more of that kind of stuff involved in it's design. So what Bootstrap 3 has done is, it's written it's own theme here, which is a separate stylesheet. You could link to this if wish and you'll layer on some additional styling for your Bootstrap website. You can add that later if you like. I'm not going to address it here in this course, but it's here and available to you, if you'd like to explore that style sheet. Okay, then we have the Fonts Folder. In the Fonts Folder, you'll see that there are four fonts. They are all exactly the same font, they're just in four different formats, and these fonts are here to support the glyphicon fonts that are available to us. These are a series of icons.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.