How to Add Pagination with collapse in bootstrap
1 answers
solution1
0 2017-01-20 04:31:57
I give you an example for this. Try to use it.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav id="menu" class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a> </li> <li><a href="#">Page 1-2</a> </li> <li><a href="#">Page 1-3</a> </li> </ul> </li> <li><a href="#">Page 2</a> </li> <li><a href="#">Page 3</a> </li> </ul> </div> </div> </nav> </body> </html>
And this is change screen size when it collapse:
@media (min-width: 768px) and (max-width: 991px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}
.navbar-header {
float:none;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap collapse - how to add additional click behavior that depends on the state of collapse or not
How to add pagination and search on bootstrap table
how to disable bootstrap collapse
How to disable collapse in bootstrap
How to add toggling of expand/collapse icons to a Bootstrap accordion?
How can I add a bootstrap collapse to these dynamically loaded cards?
How can I add the active class to to the current <li> within bootstrap collapse navbar-collapse?
How to integrate Bootstrap collapse and scrollspy?
Bootstrap 4 Responsive menu - add items on collapse
Add separate button action for Bootstrap 3 collapse panel
Related Tags