1 Star 0 Fork 0

nygula / superadmin2

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
tabs.html 41.84 KB
一键复制 编辑 原始数据 按行查看 历史
nygula 提交于 2021-01-06 17:35 . 2.1.2
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Vendor styles -->
<link rel="stylesheet" href="vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css">
<link rel="stylesheet" href="vendors/bower_components/animate.css/animate.min.css">
<link rel="stylesheet" href="vendors/bower_components/jquery.scrollbar/jquery.scrollbar.css">
<!-- App styles -->
<link rel="stylesheet" href="css/app.min.css">
</head>
<body data-sa-theme="1">
<main class="main">
<div class="page-loader">
<div class="page-loader__spinner">
<svg viewBox="25 25 50 50">
<circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
</svg>
</div>
</div>
<header class="header">
<div class="navigation-trigger hidden-xl-up" data-sa-action="aside-open" data-sa-target=".sidebar">
<i class="zmdi zmdi-menu"></i>
</div>
<div class="logo hidden-sm-down">
<h1><a href="index.html">Super Admin 2.0</a></h1>
</div>
<form class="search">
<div class="search__inner">
<input type="text" class="search__text" placeholder="Search for people, files, documents...">
<i class="zmdi zmdi-search search__helper" data-sa-action="search-close"></i>
</div>
</form>
<ul class="top-nav">
<li class="hidden-xl-up"><a href="" data-sa-action="search-open"><i class="zmdi zmdi-search"></i></a></li>
<li class="dropdown">
<a href="" data-toggle="dropdown" class="top-nav__notify"><i class="zmdi zmdi-email"></i></a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu--block">
<div class="dropdown-header">
Messages
<div class="actions">
<a href="messages.html" class="actions__item zmdi zmdi-plus"></a>
</div>
</div>
<div class="listview listview--hover">
<a href="" class="listview__item">
<img src="demo/img/profile-pics/1.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">
David Belle <small>12:01 PM</small>
</div>
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/2.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">
Jonathan Morris
<small>02:45 PM</small>
</div>
<p>Nunc quis diam diamurabitur at dolor elementum, dictum turpis vel</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/3.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">
Fredric Mitchell Jr.
<small>08:21 PM</small>
</div>
<p>Phasellus a ante et est ornare accumsan at vel magnauis blandit turpis at augue ultricies</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/4.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">
Glenn Jecobs
<small>08:43 PM</small>
</div>
<p>Ut vitae lacus sem ellentesque maximus, nunc sit amet varius dignissim, dui est consectetur neque</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/5.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">
Bill Phillips
<small>11:32 PM</small>
</div>
<p>Proin laoreet commodo eros id faucibus. Donec ligula quam, imperdiet vel ante placerat</p>
</div>
</a>
<a href="" class="view-more">View all messages</a>
</div>
</div>
</li>
<li class="dropdown top-nav__notifications">
<a href="" data-toggle="dropdown" class="top-nav__notify">
<i class="zmdi zmdi-notifications"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu--block">
<div class="dropdown-header">
Notifications
<div class="actions">
<a href="" class="actions__item zmdi zmdi-check-all" data-sa-action="notifications-clear"></a>
</div>
</div>
<div class="listview listview--hover">
<div class="listview__scroll scrollbar-inner">
<a href="" class="listview__item">
<img src="demo/img/profile-pics/1.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">David Belle</div>
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/2.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">Jonathan Morris</div>
<p>Nunc quis diam diamurabitur at dolor elementum, dictum turpis vel</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/3.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">Fredric Mitchell Jr.</div>
<p>Phasellus a ante et est ornare accumsan at vel magnauis blandit turpis at augue ultricies</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/4.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">Glenn Jecobs</div>
<p>Ut vitae lacus sem ellentesque maximus, nunc sit amet varius dignissim, dui est consectetur neque</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/5.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">Bill Phillips</div>
<p>Proin laoreet commodo eros id faucibus. Donec ligula quam, imperdiet vel ante placerat</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/1.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">David Belle</div>
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/2.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">Jonathan Morris</div>
<p>Nunc quis diam diamurabitur at dolor elementum, dictum turpis vel</p>
</div>
</a>
<a href="" class="listview__item">
<img src="demo/img/profile-pics/3.jpg" class="listview__img" alt="">
<div class="listview__content">
<div class="listview__heading">Fredric Mitchell Jr.</div>
<p>Phasellus a ante et est ornare accumsan at vel magnauis blandit turpis at augue ultricies</p>
</div>
</a>
</div>
<div class="p-1"></div>
</div>
</div>
</li>
<li class="dropdown hidden-xs-down">
<a href="" data-toggle="dropdown"><i class="zmdi zmdi-check-circle"></i></a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu--block" role="menu">
<div class="dropdown-header">Tasks</div>
<div class="listview listview--hover">
<a href="" class="listview__item">
<div class="listview__content">
<div class="listview__heading">HTML5 Validation Report</div>
<div class="progress mt-1">
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a href="" class="listview__item">
<div class="listview__content">
<div class="listview__heading">Google Chrome Extension</div>
<div class="progress mt-1">
<div class="progress-bar bg-warning" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a href="" class="listview__item">
<div class="listview__content">
<div class="listview__heading">Social Intranet Projects</div>
<div class="progress mt-1">
<div class="progress-bar bg-success" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a href="" class="listview__item">
<div class="listview__content">
<div class="listview__heading">Bootstrap Admin Template</div>
<div class="progress mt-1">
<div class="progress-bar bg-info" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a href="" class="listview__item">
<div class="listview__content">
<div class="listview__heading">Youtube Client App</div>
<div class="progress mt-1">
<div class="progress-bar bg-danger" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a href="" class="view-more">View all Tasks</a>
</div>
</div>
</li>
<li class="dropdown hidden-xs-down">
<a href="" data-toggle="dropdown"><i class="zmdi zmdi-apps"></i></a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu--block" role="menu">
<div class="row app-shortcuts">
<a class="col-4 app-shortcuts__item" href="">
<i class="zmdi zmdi-calendar"></i>
<small class="">Calendar</small>
</a>
<a class="col-4 app-shortcuts__item" href="">
<i class="zmdi zmdi-file-text"></i>
<small class="">Files</small>
</a>
<a class="col-4 app-shortcuts__item" href="">
<i class="zmdi zmdi-email"></i>
<small class="">Email</small>
</a>
<a class="col-4 app-shortcuts__item" href="">
<i class="zmdi zmdi-trending-up"></i>
<small class="">Reports</small>
</a>
<a class="col-4 app-shortcuts__item" href="">
<i class="zmdi zmdi-view-headline"></i>
<small class="">News</small>
</a>
<a class="col-4 app-shortcuts__item" href="">
<i class="zmdi zmdi-image"></i>
<small class="">Gallery</small>
</a>
</div>
</div>
</li>
<li class="dropdown hidden-xs-down">
<a href="" data-toggle="dropdown"><i class="zmdi zmdi-more-vert"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a href="" class="dropdown-item" data-sa-action="fullscreen">Fullscreen</a>
<a href="" class="dropdown-item">Clear Local Storage</a>
<a href="" class="dropdown-item">Settings</a>
</div>
</li>
<li class="hidden-xs-down">
<a href="" class="top-nav__themes" data-sa-action="aside-open" data-sa-target=".themes"><i class="zmdi zmdi-palette"></i></a>
</li>
</ul>
<div class="clock hidden-md-down">
<div class="time">
<span class="time__hours"></span>
<span class="time__min"></span>
<span class="time__sec"></span>
</div>
</div>
</header>
<aside class="sidebar">
<div class="scrollbar-inner">
<div class="user">
<div class="user__info" data-toggle="dropdown">
<img class="user__img" src="demo/img/profile-pics/8.jpg" alt="">
<div>
<div class="user__name">Malinda Hollaway</div>
<div class="user__email">malinda-h@gmail.com</div>
</div>
</div>
<div class="dropdown-menu">
<a class="dropdown-item" href="">View Profile</a>
<a class="dropdown-item" href="">Settings</a>
<a class="dropdown-item" href="">Logout</a>
</div>
</div>
<ul class="navigation">
<li class="@@indexactive"><a href="index.html"><i class="zmdi zmdi-home"></i> Home</a></li>
<li class="navigation__sub @@variantsactive">
<a href=""><i class="zmdi zmdi-view-week"></i> Variants</a>
<ul>
<li class="@@sidebaractive"><a href="hidden-sidebar.html">Hidden Sidebar</a></li>
<li class="@@boxedactive"><a href="boxed-layout.html">Boxed Layout</a></li>
<li class="@@hiddensidebarboxedactive"><a href="hidden-sidebar-boxed-layout.html">Boxed Layout with Hidden Sidebar</a></li>
</ul>
</li>
<li class="@@typeactive"><a href="typography.html"><i class="zmdi zmdi-format-underlined"></i> Typography</a></li>
<li class="@@widgetactive"><a href="widgets.html"><i class="zmdi zmdi-widgets"></i> Widgets</a></li>
<li class="navigation__sub @@tableactive">
<a href=""><i class="zmdi zmdi-view-list"></i> Tables</a>
<ul>
<li class="@@normaltableactive"><a href="html-table.html">HTML Table</a></li>
<li class="@@datatableactive"><a href="data-table.html">Data Table</a></li>
</ul>
</li>
<li class="navigation__sub @@formactive">
<a href=""><i class="zmdi zmdi-collection-text"></i> Forms</a>
<ul>
<li class="@@formelementactive"><a href="form-elements.html">Basic Form Elements</a></li>
<li class="@@formcomponentactive"><a href="form-components.html">Form Components</a></li>
<li class="@@formvalidationactive"><a href="form-validation.html">Form Validation</a></li>
</ul>
</li>
<li class="navigation__sub @@uiactive">
<a href=""><i class="zmdi zmdi-swap-alt"></i> User Interface</a>
<ul>
<li class="@@colorsactive"><a href="colors.html">Colors</a></li>
<li class="@@cssanimationsactive"><a href="css-animations.html">CSS Animations</a></li>
<li class="@@buttonsactive"><a href="buttons.html">Buttons</a></li>
<li class="@@iconsactive"><a href="icons.html">Icons</a></li>
<li class="@@listviewactive"><a href="listview.html">Listview</a></li>
<li class="@@toolbarsactive"><a href="toolbars.html">Toolbars</a></li>
<li class="@@cardsactive"><a href="cards.html">Cards</a></li>
<li class="@@alertactive"><a href="alerts.html">Alerts</a></li>
<li class="@@badgesactive"><a href="badges.html">Badges</a></li>
<li class="@@breadcrumbsactive"><a href="breadcrumbs.html">Bredcrumbs</a></li>
<li class="@@jumbotronactive"><a href="jumbotron.html">Jumbotron</a></li>
<li class="@@navsactive"><a href="navs.html">Navs</a></li>
<li class="@@paginationactive"><a href="pagination.html">Pagination</a></li>
<li class="@@progressactive"><a href="progress.html">Progress</a></li>
</ul>
</li>
<li class="navigation__sub navigation__sub--active navigation__sub--toggled">
<a href=""><i class="zmdi zmdi-group-work"></i> Javascript Components</a>
<ul class="navigation__sub">
<li class="@@carouselactive"><a href="carousel.html">Carousel</a></li>
<li class="@@collapseactive"><a href="collapse.html">Collapse</a></li>
<li class="@@dropdownsactive"><a href="dropdowns.html">Dropdowns</a></li>
<li class="@@modalsactive"><a href="modals.html">Modals</a></li>
<li class="@@popoveractive"><a href="popover.html">Popover</a></li>
<li class="navigation__active"><a href="tabs.html">Tabs</a></li>
<li class="@@tooltipsactive"><a href="tooltips.html">Tooltips</a></li>
<li class="@@notificationsactive"><a href="notifications-alerts.html">Notifications & Alerts</a></li>
<li class="@@treeactive"><a href="treeview.html">Tree View</a></li>
</ul>
</li>
<li class="navigation__sub @@chartsactive">
<a href=""><i class="zmdi zmdi-trending-up"></i> Charts</a>
<ul>
<li class="@@flotchartsactive"><a href="flot-charts.html">Flot</a></li>
<li class="@@otherchartsactive"><a href="other-charts.html">Other Charts</a></li>
</ul>
</li>
<li class="@@calendaractive"><a href="calendar.html"><i class="zmdi zmdi-calendar"></i> Calendar</a></li>
<li class="@@photogalleryactive"><a href="photo-gallery.html"><i class="zmdi zmdi-image"></i> Photo Gallery</a></li>
<li class="navigation__sub @@samplepagesactive">
<a href=""><i class="zmdi zmdi-collection-item"></i> Sample Pages</a>
<ul>
<li class="@@profileactive"><a href="profile-about.html">Profile</a></li>
<li class="@@messagesactive"><a href="messages.html">Messages</a></li>
<li class="@@contactsactive"><a href="contacts.html">Contacts</a></li>
<li class="@@newcontactsactive"><a href="new-contact.html">New Contact</a></li>
<li class="@@groupsactive"><a href="groups.html">Groups</a></li>
<li class="@@pricingtablesactive"><a href="pricing-tables.html">Pricing Tables</a></li>
<li class="@@invoiceactive"><a href="invoice.html">Invoice</a></li>
<li class="@@todoactive"><a href="todo-lists.html">Todo Lists</a></li>
<li class="@@notesactive"><a href="notes.html">Notes</a></li>
<li class="@@searchresultsactive"><a href="search-results.html">Search Results</a></li>
<li class="@@issuesactive"><a href="issue-tracker.html">Issues Tracker</a></li>
<li class="@@faqactive"><a href="faq.html">FAQ</a></li>
<li class="@@teamactive"><a href="team.html">Team</a></li>
<li class="@@blogactive"><a href="blog.html">Blog</a></li>
<li class="@@blogdetailactive"><a href="blog-detail.html">Blog Detail</a></li>
<li class="@@qaactive"><a href="questions-answers.html">Questions & Answers</a></li>
<li class="@@qadetailactive"><a href="questions-answers-details.html">Questions & Answers Details</a></li>
<li class="@@loginactive"><a href="login.html">Login & SignUp</a></li>
<li class="@@lockscreenactive"><a href="lockscreen.html">Lockscreen</a></li>
<li class="@@lockscreenactive"><a href="404.html">404</a></li>
<li class="@@emptyactive"><a href="empty.html">Empty Page</a></li>
</ul>
</li>
</ul>
</div>
</aside>
<div class="themes">
<div class="scrollbar-inner">
<a href="" class="themes__item active" data-sa-value="1"><img src="img/bg/1.jpg" alt=""></a>
<a href="" class="themes__item" data-sa-value="2"><img src="img/bg/2.jpg" alt=""></a>
<a href="" class="themes__item" data-sa-value="3"><img src="img/bg/3.jpg" alt=""></a>
<a href="" class="themes__item" data-sa-value="4"><img src="img/bg/4.jpg" alt=""></a>
<a href="" class="themes__item" data-sa-value="5"><img src="img/bg/5.jpg" alt=""></a>
<a href="" class="themes__item" data-sa-value="6"><img src="img/bg/6.jpg" alt=""></a>
<a href="" class="themes__item" data-sa-value="7"><img src="img/bg/7.jpg" alt=""></a>
<a href="" class="themes__item" data-sa-value="8"><img src="img/bg/8.jpg" alt=""></a>
<a href="" class="themes__item" data-sa-value="9"><img src="img/bg/9.jpg" alt=""></a>
<a href="" class="themes__item" data-sa-value="10"><img src="img/bg/10.jpg" alt=""></a>
</div>
</div>
<section class="content">
<header class="content__title">
<h1>Tabs</h1>
<small>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</small>
<div class="actions">
<a href="" class="actions__item zmdi zmdi-trending-up"></a>
<a href="" class="actions__item zmdi zmdi-check-all"></a>
<div class="dropdown actions__item">
<i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
<div class="dropdown-menu dropdown-menu-right">
<a href="" class="dropdown-item">Refresh</a>
<a href="" class="dropdown-item">Manage Widgets</a>
<a href="" class="dropdown-item">Settings</a>
</div>
</div>
</div>
</header>
<div class="card">
<div class="card-body">
<h4 class="card-title">Basic example</h4>
<h6 class="card-subtitle">Basic example with static contents.</h6>
<div class="tab-container">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active fade show" id="home" role="tabpanel">
<p>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nulla sit amet est. Praesent ac massa at ligula laoreet iaculis. Vivamus aliquet elit ac nisl. Nulla porta dolor. Cras dapibus. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
<p>In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam eget dui. In ac felis quis tortor malesuada pretium. Phasellus consectetuer vestibulum elit. Duis lobortis massa imperdiet quam. Pellentesque commodo eros a enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Phasellus a est. Pellentesque commodo eros a enim. Cras ultricies mi eu turpis hendrerit fringilla. Donec mollis hendrerit risus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Praesent egestas neque eu enim. In hac habitasse platea dictumst.</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel">
<p>Morbi mattis ullamcorper velit. Etiam rhoncus. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Cras id dui. Curabitur turpis. Etiam ut purus mattis mauris sodales aliquam. Aenean viverra rhoncus pede. Nulla sit amet est. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Praesent ac sem eget est egestas volutpat. Cras varius. Morbi mollis tellus ac sapien. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Fusce vel dui.</p>
</div>
<div class="tab-pane fade" id="messages" role="tabpanel">
<p>Etiam rhoncus. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Cras id dui. Curabitur turpis. Etiam ut purus mattis mauris sodales aliquam. Aenean viverra rhoncus pede. Nulla sit amet est. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Praesent ac sem eget est egestas volutpat. Cras varius. Morbi mollis tellus ac sapien. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Fusce vel dui.Morbi mattis ullamcorper velit. Etiam rhoncus. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Cras id dui. Curabitur turpis. Etiam ut purus mattis mauris sodales aliquam. Aenean viverra rhoncus pede. Nulla sit amet est. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Praesent ac sem eget est egestas volutpat. Cras varius. Morbi mollis tellus ac sapien. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Fusce vel dui.</p>
</div>
<div class="tab-pane fade" id="settings" role="tabpanel">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Justified tab links</h4>
<h6 class="card-subtitle">To proportionately fill all available space with your <code>.nav-items</code>, use <code>.nav-fill</code></h6>
<div class="tab-container">
<ul class="nav nav-tabs nav-fill" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home-2" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile-2" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages-3" role="tab">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings-4" role="tab">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active fade show" id="home-2" role="tabpanel">
<p>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nulla sit amet est. Praesent ac massa at ligula laoreet iaculis. Vivamus aliquet elit ac nisl. Nulla porta dolor. Cras dapibus. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
<p>In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam eget dui. In ac felis quis tortor malesuada pretium. Phasellus consectetuer vestibulum elit. Duis lobortis massa imperdiet quam. Pellentesque commodo eros a enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Phasellus a est. Pellentesque commodo eros a enim. Cras ultricies mi eu turpis hendrerit fringilla. Donec mollis hendrerit risus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Praesent egestas neque eu enim. In hac habitasse platea dictumst.</p>
</div>
<div class="tab-pane fade" id="profile-2" role="tabpanel">
<p>Morbi mattis ullamcorper velit. Etiam rhoncus. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Cras id dui. Curabitur turpis. Etiam ut purus mattis mauris sodales aliquam. Aenean viverra rhoncus pede. Nulla sit amet est. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Praesent ac sem eget est egestas volutpat. Cras varius. Morbi mollis tellus ac sapien. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Fusce vel dui.</p>
</div>
<div class="tab-pane fade" id="messages-2" role="tabpanel">
<p>Etiam rhoncus. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Cras id dui. Curabitur turpis. Etiam ut purus mattis mauris sodales aliquam. Aenean viverra rhoncus pede. Nulla sit amet est. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Praesent ac sem eget est egestas volutpat. Cras varius. Morbi mollis tellus ac sapien. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Fusce vel dui.Morbi mattis ullamcorper velit. Etiam rhoncus. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Cras id dui. Curabitur turpis. Etiam ut purus mattis mauris sodales aliquam. Aenean viverra rhoncus pede. Nulla sit amet est. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Praesent ac sem eget est egestas volutpat. Cras varius. Morbi mollis tellus ac sapien. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Fusce vel dui.</p>
</div>
<div class="tab-pane fade" id="settings-2" role="tabpanel">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
</div>
</div>
<footer class="footer hidden-xs-down">
<p>© Super Admin Responsive. All rights reserved.</p>
<ul class="nav footer__nav">
<a class="nav-link" href="">Homepage</a>
<a class="nav-link" href="">Company</a>
<a class="nav-link" href="">Support</a>
<a class="nav-link" href="">News</a>
<a class="nav-link" href="">Contacts</a>
</ul>
</footer>
</section>
</main>
<!-- Older IE warning message -->
<!--[if IE]>
<div class="ie-warning">
<h1>Warning!!</h1>
<p>You are using an outdated version of Internet Explorer, please upgrade to any of the following web browsers to access this website.</p>
<div class="ie-warning__downloads">
<a href="/www.google.com/chrome">
<img src="img/browsers/chrome.png" alt="">
</a>
<a href="https://www.mozilla.org/en-US/firefox/new">
<img src="img/browsers/firefox.png" alt="">
</a>
<a href="/www.opera.com">
<img src="img/browsers/opera.png" alt="">
</a>
<a href="https://support.apple.com/downloads/safari">
<img src="img/browsers/safari.png" alt="">
</a>
<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">
<img src="img/browsers/edge.png" alt="">
</a>
<a href="/windows.microsoft.com/en-us/internet-explorer/download-ie">
<img src="img/browsers/ie.png" alt="">
</a>
</div>
<p>Sorry for the inconvenience!</p>
</div>
<![endif]-->
<!-- Javascript -->
<!-- Vendors -->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="vendors/bower_components/popper.js/dist/umd/popper.min.js"></script>
<script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="vendors/bower_components/jquery.scrollbar/jquery.scrollbar.min.js"></script>
<script src="vendors/bower_components/jquery-scrollLock/jquery-scrollLock.min.js"></script>
<!-- App functions and actions -->
<script src="js/app.min.js"></script>
</body>
</html>
HTML
1
https://gitee.com/nygula/superadmin2.git
git@gitee.com:nygula/superadmin2.git
nygula
superadmin2
superadmin2
master

搜索帮助