WEBVTT

00:00:08.280 --> 00:00:12.540
In this video we're going to learn how to create magination using bootstrap.

00:00:12.630 --> 00:00:20.190
First of all what is pagination pagination is the process of dividing contents into a limited number

00:00:20.280 --> 00:00:25.070
of pages how many web applications they will use pagination.

00:00:25.200 --> 00:00:33.080
For example if you use a search engine to look up a word then at the bottom of the page usually we'll

00:00:33.120 --> 00:00:34.200
see something like this.

00:00:34.200 --> 00:00:35.940
This is an example of pagination.

00:00:35.940 --> 00:00:42.270
You can see here links to a limited number of pages corresponding to search results and also you can

00:00:42.270 --> 00:00:46.340
navigate from one piece or another using the next and previous links.

00:00:46.380 --> 00:00:52.890
Also if you look up an item on ebay or the bottom of the page you will see a pagination example as well

00:00:52.890 --> 00:00:53.580
.

00:00:53.640 --> 00:00:56.570
And similarly you can see the same thing in Amazon.

00:00:57.140 --> 00:00:57.890
OK.

00:00:57.930 --> 00:01:01.300
So in a recession we create something like this.

00:01:01.470 --> 00:01:08.910
So a pagination example and then we can create a pager which is a little bit different from pagination

00:01:09.000 --> 00:01:09.170
.

00:01:09.420 --> 00:01:15.440
So rather than having a complex way showing all these links would only show a couple of things.

00:01:15.450 --> 00:01:17.910
One for the next page and one for the previous page.

00:01:18.020 --> 00:01:18.570
OK.

00:01:18.780 --> 00:01:23.220
So let's start by creating this pagination example.

00:01:23.220 --> 00:01:26.470
So first of all we're going to need the nuff tag.

00:01:27.300 --> 00:01:27.840
OK.

00:01:28.080 --> 00:01:32.860
And then inside the enough we can create a list.

00:01:34.390 --> 00:01:35.060
OK.

00:01:35.450 --> 00:01:37.770
And we're going to have our list items.

00:01:37.770 --> 00:01:41.560
Each one corresponding to one of these links.

00:01:41.580 --> 00:01:42.140
OK.

00:01:42.330 --> 00:01:45.070
So let's start with this one.

00:01:46.740 --> 00:01:48.810
So we're going to have we in a place

00:01:57.060 --> 00:02:06.410
we're going to place a link inside the list item.

00:02:06.640 --> 00:02:10.320
OK let's have an entry for the link.

00:02:11.220 --> 00:02:11.760
OK.

00:02:11.760 --> 00:02:23.280
And inside the link we can have a span where we're going to place an entity showing these couple of

00:02:23.280 --> 00:02:24.920
arrows pointing to the left.

00:02:25.200 --> 00:02:27.930
OK.

00:02:30.600 --> 00:02:36.270
But before we do that let's look at let's do that first.

00:02:36.330 --> 00:02:39.370
So let's use the entity.

00:02:40.500 --> 00:02:43.900
So we're going to go for luck

00:02:46.710 --> 00:02:48.290
against this one.

00:02:48.930 --> 00:02:50.440
OK.

00:02:50.580 --> 00:03:00.650
Now we need to give the love the list a class pagination.

00:03:01.090 --> 00:03:03.840
OK.

00:03:06.110 --> 00:03:07.750
OK.

00:03:08.760 --> 00:03:18.060
We can add a few more attributes to the link and also the span.

00:03:18.180 --> 00:03:25.670
So first one is going to be the area label is going to be used for assistive technologies.

00:03:26.310 --> 00:03:26.950
OK.

00:03:27.160 --> 00:03:34.540
And we're going to give it some text previous and also for the span we're going to use an attribute

00:03:34.920 --> 00:03:39.670
area hidden but we can set to true.

00:03:41.440 --> 00:03:42.490
OK.

00:03:43.070 --> 00:03:53.400
And this means that we're going to hide the span for you in the screen or read it reads OK so as screen

00:03:53.400 --> 00:04:04.100
readers is going to see the going to see previous rather than seen the span with the arrows.

00:04:04.940 --> 00:04:13.600
OK so let's move to the next list item which will show the first link.

00:04:13.760 --> 00:04:22.010
So we're going to need to place a link inside the list item and this ref.

00:04:22.460 --> 00:04:25.370
OK let's call it 1.

00:04:25.990 --> 00:04:30.270
And also we want this first thing to be active.

00:04:30.570 --> 00:04:36.110
So we're just going to add a class active to the list right.

00:04:37.510 --> 00:04:42.680
OK let's make the items a little bit bigger.

00:04:43.260 --> 00:04:47.880
So we can add another class to the list to make to make it large.

00:04:47.880 --> 00:04:51.340
So it's going to be pagination lots.

00:04:51.390 --> 00:04:55.310
Now you can see it looks like this.

00:04:55.920 --> 00:04:57.030
OK.

00:04:57.750 --> 00:05:04.640
So let's add another link another list item and gets rid of the active class.

00:05:04.690 --> 00:05:11.870
Now it's going to be to duplicate this three or

00:05:15.030 --> 00:05:20.840
three or five six

00:05:24.320 --> 00:05:27.470
line.

00:05:28.890 --> 00:05:30.850
All right.

00:05:31.380 --> 00:05:37.110
Now let's move to the final list item we can just copy the first one.

00:05:37.230 --> 00:05:44.920
It's going to be similar or going to change is previous to next.

00:05:45.900 --> 00:05:50.110
And we'll change the table and see.

00:05:51.620 --> 00:05:53.710
OK go.

00:05:54.180 --> 00:05:54.770
OK.

00:05:54.940 --> 00:05:58.430
And then it's OK.

00:05:58.860 --> 00:06:07.890
We can make we can disable a specific list item including the previous and next links.

00:06:08.010 --> 00:06:12.190
So let's disable the previous link.

00:06:12.390 --> 00:06:17.110
We're going to need to do is add a class to the list item itself disabled.

00:06:17.660 --> 00:06:18.590
OK.

00:06:18.660 --> 00:06:19.420
And you can try.

00:06:19.440 --> 00:06:23.370
Same thing with any other list item.

00:06:23.370 --> 00:06:26.720
This will go up and see.

00:06:27.030 --> 00:06:29.350
OK.

00:06:29.400 --> 00:06:33.290
All right.

00:06:33.300 --> 00:06:40.040
Now let's move two pages so we're going to create a pager like this one.

00:06:41.370 --> 00:06:48.840
So four pages again will need a love tag.

00:06:49.860 --> 00:06:53.360
OK.

00:06:55.320 --> 00:07:02.410
And we'll place a list inside the Navteq.

00:07:03.590 --> 00:07:04.370
OK.

00:07:04.550 --> 00:07:04.970
And

00:07:07.920 --> 00:07:15.930
our list is a class pager.

00:07:16.080 --> 00:07:24.320
Now let's have a couple of items one for previous and one for clicks.

00:07:24.330 --> 00:07:37.540
OK so let's have a link within the tree if it is going to be previous.

00:07:39.000 --> 00:07:39.810
Let's have another one

00:07:52.890 --> 00:07:55.630
for next.

00:07:57.480 --> 00:07:58.150
OK.

00:07:58.440 --> 00:08:02.610
So you can see how they are displayed in the middle of the page horizontally.

00:08:02.780 --> 00:08:03.900
OK.

00:08:03.970 --> 00:08:09.680
Sometimes you may want them to be displayed aligned to the right and left.

00:08:09.840 --> 00:08:15.310
So we can do that easily by adding a class to each of them.

00:08:15.750 --> 00:08:19.300
So for the previous we're going to have a class previous.

00:08:19.330 --> 00:08:19.960
OK.

00:08:20.500 --> 00:08:25.790
And for next we're going to have a class next.

00:08:25.810 --> 00:08:26.670
All right.

00:08:26.910 --> 00:08:33.760
And we can disable one of these so let's disable previous by adding another class disable

00:08:37.070 --> 00:08:38.820
the