-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathpagination.html
112 lines (88 loc) · 4.63 KB
/
pagination.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5">
<meta name="description"
content="Bootstrap Crystal 1.0 is a free and advanced open source front end development framework for the creation of websites and web apps.">
<meta name="keywords" content="HTML, CSS, JavaScript, Responsive, Mobile, App, Jquery">
<meta name="author" content="Irfan Ghuori">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/animation.css" />
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Favicon /-->
<link rel="apple-touch-icon" sizes="57x57" href="./images/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./images/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./images/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./images/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./images/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./images/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./images/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./images/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./images/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon/favicon-16x16.png">
<link rel="manifest" href="./images/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="./images/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Favicon \ -->
<title>Bootstrap Crystal 1.0</title>
<!-- Fonts and icons -->
<style>
body {
font: 1em/1.618 Inter, sans-serif;
color: #224;
background: url('./images/photo-1618005182384-a83a8bd57fbe.jpg') center/cover no-repeat fixed;
}
</style>
</head>
<body>
<br>
<div class="container ">
<div class="card">
<div class="card-body">
<div class="display-7"> Pagination </div>
<p>Documentation and examples for showing pagination to indicate a series of related content exists across
multiple pages.</p>
<div class="display-7"> Overview </div>
<p> We use a large block of connected links for our pagination, making links hard to miss and easily
scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers
can announce the number of
available links. Use a wrapping
<nav> element to identify it as a navigation section to screen readers and other assistive technologies.
In addition, as pages likely have more than one such navigation section,
it’s advisable to provide a descriptive aria-label for the <nav> to reflect its purpose. For example, if the
pagination component is used to navigate between a set of search results, an appropriate label could be
aria-label="Search results pages". <a href="https://getbootstrap.com/docs/4.0/components/pagination/" target="_blank"
rel="noopener noreferrer">More Documentation</a>
</p>
<!-- -->
<div class="mt-4">
<nav aria-label="Page navigation example " >
<ul class="pagination" >
<li class="page-item" ><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
<!-- -->
</div>
</div>
</div>
<a class="goup" id="" href="#home"><img src="images/top.png" alt=""></a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
</script>
<script src="js/bootstrap.js"></script>
<script>
</script>
</body>
</html>