How to Navigate the Bootstrap Website
Zenva
ACCESS the FULL COURSE here: https://academy.zenva.com/product/full-stack-web-development-mini-degree/?zva_src=youtube-fullstackmd
TRANSCRIPT
Hello, everyone, and welcome to our tutorial on exploring the Bootstrap website. Here, what we're gonna do is navigate to our Bootstrap website. We're gonna open up the documentation and we'll just take a look at a few examples to gain an understanding of how to use Bootstrap. So, step number one, get to the website. Step number two, open up the documentation part. Step number three, we'll be examining a few choice elements. And step number four, we'll be discovering how to add these elements to our web apps, so we'll be taking a look at the source code themselves. After this, I'd encourage you guys to play around a little bit before moving to the next section just to familiarize yourselves a bit more. So, let's head on over there now. I'm just gonna open a new tab here. I'm using Chrome, although feel free to use whichever browser you'd like and we're gonna search for Bootstrap. We're gonna go to this first link here, getbootstrap.com, and we're gonna ignore this stuff. I'll show you how to download and incorporate Bootstrap a little bit later. What we're gonna do is head on over to Documentation up top. And we're actually gonna skip over this Getting Started. This just shows you how to add in the necessary headers, or rather, the necessary tags to our header file in order to actually gain access to Bootstrap's framework. What we'll take a quick look at is gonna be Layout. Although, we won't spend a ton of time on this because we will be focusing specifically on the grid layout in, I believe, the next section. Just for now, let's take a really quick look at that. You'll note that Bootstrap, this webpage, and pretty much all of the pages in our Bootstrap documentation are formatted this way. They'll have the actual examples of what something will look like using the Bootstrap code, and then the code that is used to generate this. So, this might be a container class, you'd have some content, and it might look something like this. This might be a fluid container class and it might look something like this, okay? Like I said, we'll be using grid for the most part and we'll just take a quick look at that, specifically. Grid is gonna be the basic way in which we'll lay stuff out using Bootstrap. It's actually very easy to use, kind of follows a little bit like the tables in HTML, which will have the overall structure, in this case, just a container. Each is divided into various rows. In this case, this is one row, I believe. The next one is a few rows, so this one is two rows here. And then there are columns for each rows. This is first column, second column, and third column. As you can see, we've got the overall ... https://www.youtube.com/watch?v=eO9NpFn1vss
46732339 Bytes