7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Incorporate Bootstrap

By now our application has gotten some basic functionality, but it looks rather dull. I’m no designer, but I can show you how to integrate Bootstrap into your site to give the site a little more visual structure and appeal.

Related Links

3.1 Incorporate Bootstrap

The last time I left you, we had kind of stopped at this point where we had created our site. We had been able to request a URL. We went into a view. We got some data about our article or articles, if there's multiple in there. And then we presented them to the user via a template. And so this is kind of where we got. Now I mentioned that this is definitely rather dull. Now, I have to remind you that this is not a web design course, nor am I web designer. So having said those types of things, when it comes to quickly getting a demo or proof of concept up in front of somebody, a lot of times it definitely helps to go and head over and take a look at Bootstrap. So really what I did, is I went over to Bootstrap and I took a look at some of the examples. So one of the ways that you can do this is by heading over to getbootstrap.com/gettingstarted. And if you If you come down here you're gonna see a couple different ways of actually getting and downloading Bootstrap. So you can download the source code and actually include it into your website if you would like. Or you can use a CDN, which is ultimately what I am going to do and what I'm going to show you. And so you'll copy these and paste them into your website onto your pages and I'll show you how to do that momentarily. But if you were to head down just a little bit further, you'll get about halfway down the page and you're gonna see some examples here. So these are very helpful to get up and running very quickly when you really don't want to spend a lot of time with the design. You're just trying to get some data out there. So what I did is I went down here and I went and took a look at the Jumbotron example. So, I opened that up in a new page, so that's what you're looking at right here. And then I simply right clicked and I go to View Page Source and it took me over to this point here. And what you can see here is the source code, or HTML, that was used to create that previous page right here. So, what I did was, is I copied that, and then I made a few modifications to it. And let's hop over to the text editor and I'll show you the version that I have come up with. So here we are, this is the slightly modified version of that template that I pulled off of the Bootstrap site. So you see you have some basic header information here. And I"ve changed the title to be the Django News Aggregator. And then we get down to the first step that you're gonna need to start making some modifications. So the first thing that you're gonna notice is that when you come into get started here, or get started with Bootstrap, I come into this little box here. And so you can copy these all together using copy or you can copy them individually. So I copied the first minified CSS version of Bootstrap and simply pasted it into the head of my HTML page. So that's the first thing that I did. The second thing that I did is I went over and I grabbed the minified JavaScript. So I grabbed this script tag. And I came over and went down to the bottom of my HTML, inside my body, and put that in here as well. So what you'll see if you actually go and take a look at the original versions, they are referencing these files locally. So they have the absolute location or the relative location here to the bootstrap.mln.css file. As well as at the bottom, to the js/bootstrap.min.js file. So you can definitely choose either way to have it go one way or the other. Either way will be fine, I just tend to use the cdns cause it's easier and it's less files for me to have to manage. But you can ultimately do whatever you would like. So just making this little modification and pasting this code in here, you'll also see that it comes with a predefined section here for the jumbotron. And I just change the title to say Django News, and have a look around and see some of the latest and greatest news. And then within here we have a div container that has been defined, where I just put a paragraph tag right now that says, place your news content here. So that's kinda where we're gonna ultimately stick our data. So let's head back over to Chrome. Let's go to our page here. So let's go ahead and refresh this. And you're gonna see now that things changed just a little bit. So we now have this kind of header navigation bar where we have Django News Aggregator. So you can put some additional links up here and some menu information, maybe some login information if you want. And we'll play around with that in an upcoming lesson, but for now, this will be just fine. So then in our jumbotron here, we have Django News. And you can have a look and see some of the latest and greatest news. So that's all really nice. And then we have this footer down here, as you can see. And here's our little paragraph tag that says place our news content here. So there's a million different ways that we can present this information, but let's just kind of stick with what we've been doing so far. And I'm simply gonna create that unordered list. So let's come in and do that one more time. So we'll go back into our text editor. And once again, I'm gonna come in here, and I'm gonna do open and close curly brackets. And we're gonna do our percent sign in here like this. And we're gonna say, for article In articles. And then we will come in here and once again, this is all going to be within an unordered list, like so. And we're gonna make modifications to this a little bit later. But this is just, once again, to quickly get up and running. So we'll once again do our open and close curly brackets with percent signs. This is gonna be the endfor. And then within here we're simply going to create a list item. That's going to contain an anchor tag and that's going to be article.url. And then within here we're going to use article.title, like that. So let's go ahead and save. Then we can come back in here and refresh. And once again we get my article in here, so we're getting there a little bit. This is still a little ugly, I admit. And we're gonna make it a little more newsy, if you would like to call it that, in an upcoming lesson. But this is enough to kind of start to really get us going. So what I would like to do next is actually get to the point where we can start getting some actual data. We can actually start to incorporate some actual information from some newsfeeds out on the web. And the way that we're gonna do that is via a form. So in the next lesson we're gonna start creating a form and adding a link to that form. So that a user could come in and add a new feed that can ultimately be showing some data to us as interested news feed readers.

Back to the top