In this lesson we're going to develop a bootstrap web page layout using the scrolls by plugging this
plug in allows us to create links that link to content on the same page as shown in this example.
When we click each link the content scores up to our line of view.
So the content corresponding to link 1 link to link 3 and link for to create this layout.
We'll be using many of the concepts we've already covered.
First we need to create a style sheet that defines the appearance of each one of our content areas.
Our page has four content areas.
One is sign in one is yellow.
One has a pink background and the last one has a magenta background.
Each div has a padding of 45 pixels height of 500 pixels so you can see that we've given each style
rule.
Each idea name Section 1 Section 2 Section 3 and section 4 and they're more.
They're identical.
The only difference is the background color tag or definition sorry is is different for each one
next in order for this scroll spy plug in to work.
We need to add the data SPI attribute in our body tag and set it to scroll.
Also create a data target attribute and set it to dot Navarre next create your not barn create the NAV
element and set the class to NAV bar nav bar inverse and that bar fixed top so a lot of this should
already look familiar.
As we worked with it in previous lessons in this section
next create the container it's gonna be a fluid container because as you saw it spans across the entire
content area from left to right
next create the collapse icon so that the browser doesn't show the full navigation bar items on small
handheld devices.
So remember when the when the webpage is viewed on a large screen we should be able to see the links
in the navigation bar but when we look it on on a very small screen we don't want to see all the links.
We want to see the collapsible menu.
So when you click the button that's when you see the links so this is for small handheld devices
this code block should look familiar as we worked with it earlier in the section.
Remember that your data target
will need to match the I.D. of the div containing the nav bar links
and once you finish creating this code block you can go ahead and create the links create each item
in an unordered list
inside this div so you'll see that we have we've given it the same I.D. as the data target value in
our button and in this unordered list we have all our linked items so there's four of them in total.
Link one link to link three and then for each link has to have an H R Yes attribute that links to this
section name
will now go ahead and create those sections.
So after your closing now tag
create each section in a diff element and make sure the I.D. matches the appropriate link.
So for example link one we gave it the H R F or we gave it the link.
Section 1.
So make sure that your I.D. is correctly attached to that first link.
This is the first section to section 1
also make sure to set the div class to container fluid so they did spend the entire viewport in and
now insert your heading in content into the dude.
So we've put the heading into an h1 tag in the content text into paragraph tags
and that's it for each content section.
Well all you need to do is copy in this and paste this code for each one of your sections and rename
the I.D. so it corresponds to your links.
So Section 2 should match Section 2 Section 3 and section 4
and once you've completed your sections all you need to do is save your file and and preview the file
in your web browser and just make sure it works.