Okay, so here I am in Sublime Text and I'm looking at the file called index.html, which is located in the examples, Lecture25 folder. You could see there are some extra folders that are inside the Lecture25 folder, namely css, fonts, and js folders. Now where did I get them? Well, they come from the installation or download, to be more exact, of Bootstrap. Let's switch to the Bootstrap web page, which can be found at getbootstrap.com, and we're looking at the Getting started page. We could look at actually the front page. Here is that quote that I actually put on one of the slides. But if we click on Getting started, the very first section here is Download, and we could choose a whole bunch of different options here, but the simplest one is to choose Bootstrap itself. It's already compiled from some sources and you can just click Download. When you download this and unzip it, inside that zip file, you'll have three folders, and the three folders will be css, fonts and js. And if you open up the css folder, you'll see that this is where the bootstrap.css is located, and bootstrap.min.css, it's just a different version of bootstrap.css. That is the minified version, meaning they removed all the spaces and extra things like that, that when you download it to your browser, those extra spaces and carriage returns wouldn't be downloaded because they don't really make any difference. Then there is the fonts folder and we're not going to talk about this right now, but it's definitely needed for basic Bootstrap functionality. And there's the js or JavaScript folder. And Bootstrap does have a JavaScript component, so you're definitely going to need this. And again, there's two different files, there's bootstrap.js and there's bootstrap.min.js. Now the min, again, is the minified version, spaces taken out, certain variables are renamed so they're not so long, and so on and so forth. Now you can also see here that I've downloaded a version of jQuery. Now the reason I did that is because bootstrap.js depends on jQuery. And in order to get this file, I would go to jQuery.com and let's go back to the front page, jQuery.com, and I'll click on this Download link.
And you'll see that there's two different jQuery versions, there's 1.x and 2.x. Well, the difference between them is none. There is no difference. The only real difference is that the 2.x does not support 6, 7, or 8, Internet Explorer 6, 7, or 8. And for now, I think we're just going to go ahead and use jQuery 1.x. But I think in the future, as we keep moving along with the course, we will switch to the jQuery 2.x since the support for Internet Explorer is really kind of dying and Microsoft just recently announced they're basically not supporting anything in Internet Explorer, anything below version 11. So it makes sense just to move on from it, and the user base for those earlier versions is really, really small at this point.
So if you download this right here and save that file to your js folder, it will end up being jQuery.1.11.3.min.js, and this is obviously as of this recording. Let's close that up and take a look at the main HTML page. Well, the beginning of it is nothing that you haven't seen before already. You've seen this already. And there's the heading tag, or the head tag I should say, declares to be utf-8. This tag, or this meta tag, you haven't seen, but this is something that Bootstrap recommends you do, and basically just tells some versions of Internet Explorer that they should go ahead and use the latest version, or the latest compatibility version, of its rendering engine. There's our familiar meta viewport tag, exactly the same as we had it in some of the previous lectures. And there's the HTML5 shim and Respond.js. And what basically this is is a way for Internet Explorer 8 to support HTML5 and media queries. Well, hopefully, this is going to be taken out soon as Internet Explorer 8 will become less and less relevant. Then we have the title tag and, finally, we have the two link tags. The first one is the bootstrap.min.css, that's the actual Bootstrap CSS framework, and the second one is styles.css and that's really our styles. If we take a look at the CSS styles, it's an empty file, we haven't really put any of our custom styles there yet. So, all we're doing right now is relying on the Bootstrap framework and we put the styles here already just so we have a placeholder for our styles in the future. Note that we declared our style after we declared the Bootstrap CSS styles. And the reason that is is because we're going to be customizing whatever Bootstrap gives us and, therefore, we want to be overriding what Bootstrap gives us, not having Bootstrap override what we are trying to style. Finally, we get to the body tag and at the very end of the body tag, right before we close it, we declare some JavaScript files or some JavaScript libraries that we're going to depend on. First of all, Bootstrap JavaScript depends on jQuery, and that means that we first have to declare jQuery and then we will declare and reference the bootstrap.js. And last, we reference our own JavaScript file, which is likely to be using either the jQuery or the Bootstrap JavaScript files. And again, if you go and actually take a look at that script.js, it's really just an empty file at this point. It's just a placeholder for our future script. Well, let's take a look at what this HTML file looks like in the browser.
Well, it looks just like that. There's absolutely nothing here, and that makes sense since we really didn't put any content in. Let's go ahead and put some content in right now. Let's go just start with h1 and say Hello Coursera! We save that and we go back to our browser and we see Hello Coursera shows up and clearly something's different than you would expect before. The font family clearly is not the default one and the color is a little bit different as well. So it looks like some Bootstrap styling is being applied. Well, to verify that, let's go ahead and right-click on it and go to Inspect Element. And when we inspect element, let's take a look. Yes, indeed, there's some styles that are being applied from the bootstrap.css. Another important thing to take a look at is the console because if you misspell something or you reference the wrong JavaScript file or something like that, there would've been some errors showing up right here. And since I don't see any errors, looks like we're in good shape. So this is the basic and the base Bootstrap starter page that you could take and start coding your Bootstrap based web pages. So to summarize, we got introduced to the most popular project on GitHub, which is Bootstrap. And we got introduced to the concept of Mobile First, that is, the importance of planning for the mobile version of your website from the very beginning. And we went over the Barebones Bootstrap web page. We saw how to download and install the Bootstrap artifact files as well as jQuery that is needed for the Bootstrap JavaScript framework. And we tested out that our Bootstrap page actually works and contains no errors. Next, we're going to talk about one of the core topics when discussing the Bootstrap CSS framework, and that is the Bootstrap Grid System.
Video Images
0 comments:
Post a Comment