You guys in this tutorial we're looking at Holy global customizing our views and our applications is
statics to you look more like or application as opposed to the auto generated application rental space
speed up net.
We can redesign or landing page scene on the screen here and we'll also look at boats.
What bootstrap has to offer to expedite this process.
Before I move on I need to remind you guys that we're using Bootstrap 3 defaults bootstrap that came
with our project is bootstrap 3.
We can upgraded to 4.
But if we do that and we run the risk of having to redo a lot of the work so I recommend that we continue
using Bootstrap or bootstrap documentation we can go to their website which is get bootstrap dot com
or you can just look for bootstrap 3 and Google as suggested
and here will be given all of the documentation behind all of the goodies the bootstrap has to offer.
You don't have to start from scratch but I just take you through a quick tour to help you appreciate
it.
We'll start brings to the table
now bootstrap is.
This framework in a nutshell the developers observed web development patterns over years and came up
with a bunch of classes or CSA stars that they think people need further to that they had a mobile first
agenda.
So using Bootstrap helps you to accomplish a mobile first and clean design as they would have packed
it up with commonly used assess styling.
And I keep on seeing this but let me.
For instance the cat tables people always long tables people always want their tables to not look quite
like tables so bootstrap gave us a table to us all we have to do when creating a table is the class
it was table to or table code and then it starts looking something like this.
And if we recall that's how our student and our courses tables look out of the box.
You can also add strength to properties you can make it ordered.
But the fact is that bootstrap is making this very easy because you don't have the right of see to accomplish
all of these the add on classes.
Let's take a look at buttons.
Last time we looked at changing whole buttons look.
So we saw that one skin was beaten and then eaten.
BASH something.
So you have each end dash defaults to get this equal looking woman.
Have you gender primary.
It's a blue wooden success.
These are green button and everything.
So it's all clearly outlined right here on their website.
They give you the example and they give you the code for this example and you need only translate that
into your need and your specification so that you can go ahead and start using it.
This support for sponsored images because I am the best responsive.
That means that your image will start to resize and flex according to your screen size.
All right so you can peruse.
I wouldn't recommend that you try committing it all to memory because it can be overwhelming.
But as you have a need if you want something to be red or blue or something you can come on over you
can go through the C assist category or you can go to the components category which has even more things
you have space for other Earths.
You have your danger alert versus your success alert.
You have labels that you can add to text in the javascript section you have stuff for more details if
you want to pop up it looks attractive.
You have four tabs if you want tub experience on a browser and they give you the javascript and if you
recall part of the scripts that would have been given to you with the project include a bootstrap GSA
you don't have any additional work to do but to incorporate this code with years and utilize it to your
benefit.
So I advise you to look through see what you need and use this on the bottom.
So for this section we're going to actually re style our landing page.
We're going to truly add a few images and bootstrap slider to our homepage section right here.
So we're going to report this entire area section and then we're going to replace it with a bootstrap
slider.
I went ahead and got some pictures from fix data.
That's my go to site for free high quality pictures and I've selected three pictures that I want to
use and we'll use this one back to school.
This one never stop learning and this one so speak to me you need only go there click free download
download and then it will ask you to sign up and just verify that you're not a robot.
And once you click download it will initiate the download for you somewhere to go ahead and do that
with the other two.
Now having done that I need to get them all into the project.
I would have downloaded them to my desktop and no I need to get them into my project for further use
in my web site.
I recommend you create a folder and you put all your images in that folder as you can see they give
you a folder structure for all types of files one file type that they may not have cater for as images.
So I'll just go ahead and content I think content is the best place to put images based on what's in
there and I see content add and new folder quality images
and then I can right click images click Add go to existing item.
So if the item exists meaning you're not going to use Visual Studio to create the item but it's something
that's already out there like in this case an image file and you want to bring it over into your project
and you click existing item and then you find it on your piece.
So I put mine on my test desk top
so I'll scroll through and find my image and I found one here scroll and find the other two and I changed
my mind was one of the images.
And there they are added to my project.
You can tow the plus sign that they're now being incorporated into the project.
And when you hover over each one you'll see a mini preview of what this image is best practice or for
ease of use.
You wouldn't use this long auto generated name calling from the Web site.
Now you want your image to be easy to use.
So you want to rename it to something that's more appropriate for the purpose that you have it wanted
for sliders so call this one slide dash one and the extension is that CPG and I rename Delta to accordingly.
I know we have all three images that we need or a slide show.
So like I said earlier the objective now is to change that gray area which would have been depicted
by this JumboTron.
Div and we want to put in bootstrap slider in that section.
We can just head over to the bootstrap website to see the documentation and get guidance as to how we
do that.
So go to the javascript section and look for carousel.
That's what bootstrap calls its carousel.
And then they give you an example.
First slide second slide.
Third slide as you can see the clicking works and then as you scroll down you'll see that they give
you mount enough code that is required to have something looking like this.
What they didn't give you are all the images but you just need to look at this.
Appreciate it.
And then modify it for your own purpose.
So I'm going to just copy out all of this section of code.
Go back to your project.
Paste it here and then it may look a bit overwhelming but if you take the time out to appreciate it
if you know HMO you see exactly what's going on here.
But before anything else let us take a preview of what the result is.
So this is a preview of what we get.
As you can see it is much less attractive than what we had before.
And we still have a bit of work to do.
What we can see that we have our arrows and actually clicking the IRA's actually animates something
that is visible.
So let's go ahead and go back to visual studio and see what additional changes need to happen to make
our castle look presentable.
So back in visual studio looking at the code you will see a break home for each section that should
produce an image.
All right.
So firstly you'll see that you have this ordered list which has allies and it has some data targets
and then you'll see that it has data that slide two.
One two three.
This one is tagged as active so zero will always be the default one but then for the actual slides you
see that each slide appears in its own div.
That's item number one and this item number two.
And we know we have three items.
So we just need to build on all of this some code according to what we need.
And then down here you see that they give us a section for the controls which are two tags using some
bootstrap classes here to looked like arrows.
And these are the arrows that go to the side for next and previous.
So the first thing I'm going to do is
modify the code for our first slider.
So image I'm going to set the source change it from ellipses and I can just his countries space to get
that intelligence hidden thing.
I remember my images folder inside of content.
And then my images inside the images folder and I see a slide one for the alternative text code.
We can for the caption I can use a spun tag and see we learn for the second section as to a very similar
modification of genes as I see the slide to
change that to never stop Mark Q I'm just putting in some random captions and alternative texts you'd
fill in years more appropriately when you have your chance to do so and then we have three sliders.
I'm just going to duplicate this one move this this and change this to Slide 3.
I will come back and change these to more appropriate captions and alternative text what I just want
to show you guys how you go about putting in a bootstrap slider and we don't have to modify much else.
And then we can preview that.
And here we go.
So now we have a slider in the space where we had that generated text a few things that we can observe
would be the varying heights for each image.
So that causes the carousel to push and pull the content on the page.
So you'd want to be mindful of that to ensure that your images are of the same dimensions and so your
content will look fairly consistent with each slider.
So that is a preview of how you go both incorporating bootstrap component into your website.
You do so at will and as you need to you may not use a curve so that's up to you.
Well you have quite a few options available to you.
Can a tool tips you get a touch and drop tones and all of this comes out of the box with bootstrap and
is that it comes out of the box with bootstrap.
So unless you're going to find another framework that you may prefer as you have a few out there you
can invest some time in experimenting with bootstrap and seeing what it has to offer.
No.
Another thing that we want to accomplish is to modify this section to only have two options one for
courses and one for students.
So as we can see we have three columns.
And if we look in our code we will see that we are using Bootstrap to divide or rule.
So bootstrap would you view construct call a role similar to a table and as you know each table has
columns.
So bootstrap has a grid system that once you have a rule you can divide it into up to twelve columns
and then further and as you can specify how many columns should be present or how big a column should
be based on the size of the screen.
So the typical screen on any laptop or computer would be in the end the region.
So they're giving you three columns once you're viewing it on this one two and three.
Now we only want to so on when to remove the third one
ones quantify this one bearing in mind that we have up to 12 columns that we can use some winds to change
this one to six to six.
And once again I know that I can do this because it was already outlined in the documentation so you
can always look to the documentation and read up on the grid system to have a better understanding of
what is happening here and then I go boats changing the title or the caption that is being used here.
So forces and students
also change out this paragraph I really don't need to be advertising it speed on it on my school management
system site.
So I will write a nice paragraph
and then I don't need to be linking to a tariff all the way outside of my purview someone to change
this to a button that welding to my courses H so I can use my action links some words that I sign and
call for my issue of helper maps and links.
And then I want to print the text.
Learn more I want this action link to go to index
and this index would be in my horses.
Controller and then I'm going to repeat that point the student section.
All right so I made the adjustments I added the students caption a paragraph for that section and action
link and then we can go ahead and preview this.
So we see here that our changes have been put into effect and we can see that we have an even split
between the two.
So remember I was saying we that twelve of the twelve Spears's twelve columns that we're able to use.
And I said I wanted either one to be six of those twelve so we of course is taking up up to six.
We'll get students thinking Oh does it.
So that's a nice easy way to get things side by side in traditional esteem.
You'd have to use leave and then you float to the left and then you transit margins in between to make
sure that they're you know a certain distance from each other bootstrap.
This gives you a grid system and that's a put them side by side.
Just tell me how big you want them kind of the rest.
And this varying height for the picture is kind of annoying so I'm not going to fix it.
I'm going to leave it to you to modify and find images that are consistent.
Now one other thing that we want to do is get our buttons back.
We have links but we want them to look like the ones that were there originally.
So I'm going to just go back on the project and we're going to add those subclasses though from the
earlier examples you remember that we initialize are very generic objects.
And in this generic Object we specify that we want attribute class and then we had our values so or
values would be according to bootstraps documentation beaten and beaten dash whichever class you want.
I want a blue one somewhere to see a primary and I'm going to do the same thing.
Just copy that or the students plural with I want to make this one the lighter shades info just so you
have a diversity so we can refresh and see what that looks like.
And there we go.
So we see that our booster code works.
We have older and more looking like a button and or students looking like a button also.
And you know that there were both anchor tags so bootstrap allows you to style typical anchor tug and
make it look like a button.
So go ahead and experiment with bootstrap experiment with making your website a little cleaner than
mine those at the very least and adding styles removing sort of the default cord and making its more
personalized.