1 Star 1 Fork 3

lib_wiki/bootstrap-v4.0_demo

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
ui-navs.html 54.42 KB
一键复制 编辑 原始数据 按行查看 历史
lib_wiki 提交于 2019-10-22 15:52 . Init commit
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="author" content="">
<!-- Title -->
<title>Neptune</title>
<!-- Vendor CSS -->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="vendor/themify-icons/themify-icons.css">
<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="vendor/animate.css/animate.min.css">
<link rel="stylesheet" href="vendor/jscrollpane/jquery.jscrollpane.css">
<link rel="stylesheet" href="vendor/waves/waves.min.css">
<link rel="stylesheet" href="vendor/chartist/chartist.min.css">
<link rel="stylesheet" href="vendor/switchery/dist/switchery.min.css">
<!-- Neptune CSS -->
<link rel="stylesheet" href="css/core.css">
<!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="large-sidebar fixed-sidebar fixed-header">
<div class="wrapper">
<!-- Preloader -->
<div class="preloader"></div>
<!-- Sidebar -->
<div class="site-sidebar-overlay"></div>
<div class="site-sidebar">
<a class="logo" href="index.html">
<span class="l-text">Neptune</span>
<span class="l-icon"></span>
</a>
<div class="custom-scroll custom-scroll-light">
<ul class="sidebar-menu">
<li class="menu-title m-t-0-5">Navigation</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-dashboard"></i></span>
<span class="s-text">Dashboard</span>
</a>
<ul>
<li><a href="index.html">Dashboard 1</a></li>
<li><a href="index2.html">Dashboard 2</a></li>
<li><a href="index3.html">Dashboard 3</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="tag tag-danger">7</span>
<span class="s-icon"><i class="ti-package"></i></span>
<span class="s-text">Widgets</span>
</a>
<ul>
<li><a href="widgets-blog.html">Blog</a></li>
<li><a href="widgets-social.html">Social</a></li>
<li><a href="widgets-ecommerce.html">Ecommerce</a></li>
<li><a href="widgets-navigation.html">Navigation</a></li>
<li><a href="widgets-headers.html">Headers</a></li>
<li><a href="widgets-footers.html">Footers</a></li>
<li><a href="widgets-tiles.html">Tiles</a></li>
<li><a href="widgets-modals.html">Modals</a></li>
</ul>
</li>
<li class="menu-title">Main</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="tag tag-purple">12</span>
<span class="s-icon"><i class="ti-paint-bucket"></i></span>
<span class="s-text">UI Kit</span>
</a>
<ul>
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-dropdowns.html">Dropdowns</a></li>
<li><a href="ui-notifications.html">Notifications</a></li>
<li><a href="ui-cards.html">Cards</a></li>
<li><a href="ui-navs.html">Navs</a></li>
<li><a href="ui-progress.html">Progress</a></li>
<li><a href="ui-modal.html">Modal</a></li>
<li><a href="ui-carousel.html">Carousel</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-grid.html">Grid</a></li>
<li><a href="ui-other.html">Other</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-pencil-alt"></i></span>
<span class="s-text">Forms</span>
</a>
<ul>
<li><a href="forms-basic.html">Basic Elements</a></li>
<li><a href="forms-editors.html">Editors</a></li>
<li><a href="forms-plugins.html">Plugins</a></li>
<li><a href="forms-pickers.html">Form Pickers</a></li>
<li><a href="forms-masks.html">Form Masks</a></li>
<li><a href="forms-wizard.html">Form Wizard</a></li>
<li><a href="forms-xeditable.html">X-editable</a></li>
<li><a href="forms-upload.html">File Upload</a></li>
<li><a href="forms-typeahead.html">Typeahead</a></li>
<li><a href="forms-range-slider.html">Range Slider</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-menu-alt"></i></span>
<span class="s-text">Tables</span>
</a>
<ul>
<li><a href="tables-basic.html">Basic Tables</a></li>
<li><a href="tables-datatable.html">Data Tables</a></li>
<li><a href="tables-editable.html">Editable Tables</a></li>
<li><a href="tables-responsive.html">Responsive Tables</a></li>
<li><a href="tables-jsgrid.html">jsGrid Tables</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="tag tag-success">3</span>
<span class="s-icon"><i class="ti-gallery"></i></span>
<span class="s-text">Pages</span>
</a>
<ul>
<li><a href="pages-blank.html">Blank</a></li>
<li><a href="pages-403.html">Error 403</a></li>
<li><a href="pages-404.html">Error 404</a></li>
<li><a href="pages-500.html">Error 500</a></li>
<li><a href="pages-faq.html">FAQ</a></li>
<li><a href="pages-invoice.html">Invoice</a></li>
<li><a href="pages-profile.html">Profile</a></li>
<li><a href="pages-sign-in.html">Sign In</a></li>
<li><a href="pages-sign-in2.html">Sign In 2</a></li>
<li><a href="pages-reset-password.html">Reset Password</a></li>
<li><a href="pages-sign-up.html">Sign Up</a></li>
<li><a href="pages-contactform.html">Contact Form</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-view-grid"></i></span>
<span class="s-text">Apps</span>
</a>
<ul>
<li><a href="apps-inbox.html">Inbox</a></li>
<li><a href="apps-chat.html">Chat</a></li>
<li><a href="apps-contacts.html">Contacts</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-star"></i></span>
<span class="s-text">Icons</span>
</a>
<ul>
<li><a href="icons-fontawesome.html">Font Awesome</a></li>
<li><a href="icons-material.html">Material Design</a></li>
<li><a href="icons-themify.html">Themify Icons</a></li>
<li><a href="icons-weather.html">Weather Icons</a></li>
<li><a href="icons-ionicons.html">Ionicons</a></li>
<li><a href="icons-typicons.html">Typicons</a></li>
<li><a href="icons-pe7.html">Pe7 Icons</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-settings"></i></span>
<span class="s-text">Utilities</span>
</a>
<ul>
<li><a href="utilities-color.html">Color utilities</a></li>
<li><a href="utilities-border.html">Border utilities</a></li>
<li><a href="utilities-other.html">Other utilities</a></li>
</ul>
</li>
<li class="menu-title">More</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-location-arrow"></i></span>
<span class="s-text">Extra</span>
</a>
<ul>
<li><a href="extra-animations.html">Animations</a></li>
<li><a href="extra-comments.html">Comments</a></li>
<li><a href="extra-lightbox.html">Lightbox</a></li>
<li><a href="extra-nestable.html">Nestable</a></li>
<li><a href="extra-crop.html">Image Crop</a></li>
<li><a href="extra-loading-progress.html">Loading Progress</a></li>
<li><a href="extra-prices.html">Prices</a></li>
<li><a href="extra-timeline.html">Timeline</a></li>
<li><a href="extra-search.html">Search</a></li>
<li><a href="extra-scrollbar.html">Scroll Bar</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-new-window"></i></span>
<span class="s-text">Frontend</span>
</a>
<ul>
<li><a href="frontend.html">Frontend 1</a></li>
<li><a href="frontend2.html">Frontend 2</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="tag tag-info">6</span>
<span class="s-icon"><i class="ti-bar-chart-alt"></i></span>
<span class="s-text">Charts</span>
</a>
<ul>
<li><a href="charts-flot.html">Flot Chart</a></li>
<li><a href="charts-morris.html">Morris Chart</a></li>
<li><a href="charts-chartjs.html">Chart.js</a></li>
<li><a href="charts-peity.html">Peity Chart</a></li>
<li><a href="charts-sparkline.html">Sparkline Chart</a></li>
<li><a href="charts-chartist.html">Chartist Chart</a></li>
<li><a href="charts-easy.html">Easy Pie Chart</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-email"></i></span>
<span class="s-text">Email Templates</span>
</a>
<ul>
<li><a href="email-basic.html">Basic</a></li>
<li><a href="email-alert.html">Alert</a></li>
<li><a href="email-ecommerce.html">Ecommerce</a></li>
</ul>
</li>
<li class="with-sub">
<a href="#" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-location-pin"></i></span>
<span class="s-text">Maps</span>
</a>
<ul>
<li><a href="maps-vector.html">Vector Map</a></li>
<li><a href="maps-google.html">Google Map</a></li>
</ul>
</li>
<li>
<a href="calendar.html" class="waves-effect waves-light">
<span class="s-icon"><i class="ti-calendar"></i></span>
<span class="s-text">Calendar</span>
</a>
</li>
<li class="with-sub compact-hide">
<a href="javascript: void(0);" class="waves-effect waves-light">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-icon"><i class="ti-menu"></i></span>
<span class="s-text">Menu Levels</span>
</a>
<ul>
<li class="with-sub">
<a href="javascript: void(0);">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-text">Level 1</span>
</a>
<ul>
<li class="with-sub">
<a href="javascript: void(0);">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-text">Level 1.2</span>
</a>
<ul>
<li class="with-sub">
<a href="javascript: void(0);">
<span class="s-caret"><i class="fa fa-angle-down"></i></span>
<span class="s-text">Level 1.2.3</span>
</a>
<ul>
<li><a href="javascript: void(0);">Level 1.2.3.4</a></li>
<li><a href="javascript: void(0);">Level 1.2.3.4</a></li>
</ul>
</li>
<li><a href="javascript: void(0);">Level 1.2.3</a></li>
</ul>
</li>
<li><a href="javascript: void(0);">Level 1.2</a></li>
</ul>
</li>
<li><a href="javascript: void(0);">Level 1</a></li>
</ul>
</li>
<li class="menu-title compact-hide">Unique Visitors</li>
<li class="compact-hide">
<div id="sidebar-chart" class="chartist-animated chartist-light"></div>
</li>
<li class="menu-title compact-hide">Tags</li>
<li class="compact-hide">
<a href="javascript: void(0);" class="waves-effect waves-light">
<span class="s-icon"><i class="fa fa-circle-o text-danger"></i></span>
<span class="s-text">Ideas</span>
</a>
</li>
<li class="compact-hide">
<a href="javascript: void(0);" class="waves-effect waves-light">
<span class="s-icon"><i class="fa fa-circle-o text-warning"></i></span>
<span class="s-text">Projects</span>
</a>
</li>
<li class="compact-hide">
<a href="documentation.html" class="waves-effect waves-light">
<span class="s-icon"><i class="fa fa-circle-o text-primary"></i></span>
<span class="s-text">Documentation</span>
</a>
</li>
</ul>
</div>
</div>
<!-- Sidebar second -->
<div class="site-sidebar-second custom-scroll custom-scroll-dark">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab-1" role="tab">Chat</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-2" role="tab">Activity</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-3" role="tab">Todo</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-4" role="tab">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-1" role="tabpanel">
<div class="sidebar-chat animated fadeIn">
<div class="sidebar-group">
<h6>Favorites</h6>
<a class="text-black" href="#">
<span class="sc-status bg-success"></span>
<span class="sc-name">John Doe</span>
<span class="sc-writing"> typing...<i class="ti-pencil"></i></span>
</a>
<a class="text-black" href="#">
<span class="sc-status bg-success"></span>
<span class="sc-name">Vance Osborn</span>
</a>
<a class="text-black" href="#">
<span class="sc-status bg-danger"></span>
<span class="sc-name">Wolfe Stevie</span>
<span class="tag tag-primary">7</span>
</a>
<a class="text-black" href="#">
<span class="sc-status bg-warning"></span>
<span class="sc-name">Jonathan Mel</span>
</a>
<a class="text-black" href="#">
<span class="sc-status bg-secondary"></span>
<span class="sc-name">Carleton Josiah</span>
</a>
</div>
<div class="sidebar-group">
<h6>Work</h6>
<a class="text-black" href="#">
<span class="sc-status bg-secondary"></span>
<span class="sc-name">Larry Hal</span>
</a>
<a class="text-black" href="#">
<span class="sc-status bg-success"></span>
<span class="sc-name">Ron Carran</span>
<span class="sc-writing"> typing...<i class="ti-pencil"></i></span>
</a>
</div>
<div class="sidebar-group">
<h6>Social</h6>
<a class="text-black" href="#">
<span class="sc-status bg-success"></span>
<span class="sc-name">Lucius Skyler</span>
<span class="tag tag-primary">3</span>
</a>
<a class="text-black" href="#">
<span class="sc-status bg-danger"></span>
<span class="sc-name">Landon Graham</span>
</a>
</div>
</div>
<div class="sidebar-chat-window animated fadeIn">
<div class="scw-header clearfix">
<a class="text-grey pull-xs-left" href="#"><i class="ti-angle-left"></i> Back</a>
<div class="pull-xs-right">
<strong>Jonathan Mel</strong>
<div class="avatar box-32">
<img src="img/avatars/5.jpg" alt="">
<span class="status bg-success top right"></span>
</div>
</div>
</div>
<div class="scw-item">
<span>Hello!</span>
</div>
<div class="scw-item self">
<span>Meeting at 16:00 in the conference room. Remember?</span>
</div>
<div class="scw-item">
<span>No problem. Thank's for reminder!</span>
</div>
<div class="scw-item self">
<span>Prepare to be amazed.</span>
</div>
<div class="scw-item">
<span>Good. Can't wait!</span>
</div>
<div class="scw-form">
<form>
<input class="form-control" type="text" placeholder="Type...">
<button class="btn btn-secondary" type="button"><i class="ti-angle-right"></i></button>
</form>
</div>
</div>
</div>
<div class="tab-pane" id="tab-2" role="tabpanel">
<div class="sidebar-activity animated fadeIn">
<div class="notifications">
<div class="n-item">
<div class="media">
<div class="media-left">
<div class="avatar box-48">
<img class="b-a-radius-circle" src="img/avatars/1.jpg" alt="">
<span class="n-icon bg-danger"><i class="ti-pin-alt"></i></span>
</div>
</div>
<div class="media-body">
<div class="n-text"><a class="text-black" href="#">John Doe</a> <span class="text-muted">uploaded <a class="text-black" href="#">monthly report</a></div>
<div class="text-muted font-90">12 minutes ago</div>
</div>
</div>
</div>
<div class="n-item">
<div class="media">
<div class="media-left">
<div class="avatar box-48">
<img class="b-a-radius-circle" src="img/avatars/3.jpg" alt="">
<span class="n-icon bg-success"><i class="ti-comment"></i></span>
</div>
</div>
<div class="media-body">
<div class="n-text"><a class="text-black" href="#">Vance Osborn</a> <span class="text-muted">commented </span> <a class="text-black" href="#">Project</a></div>
<div class="n-comment m-y-0-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
<div class="text-muted font-90">3 hours ago</div>
</div>
</div>
</div>
<div class="n-item">
<div class="media">
<div class="media-left">
<div class="avatar box-48">
<img class="b-a-radius-circle" src="img/avatars/2.jpg" alt="">
<span class="n-icon bg-danger"><i class="ti-email"></i></span>
</div>
</div>
<div class="media-body">
<div class="n-text"><a class="text-black" href="#">Ron Carran</a> <span class="text-muted">send you files</span></div>
<div class="row row-sm m-y-0-5">
<div class="col-xs-4">
<img class="img-fluid" src="img/photos-1/1.jpg" alt="">
</div>
<div class="col-xs-4">
<img class="img-fluid" src="img/photos-1/2.jpg" alt="">
</div>
<div class="col-xs-4">
<img class="img-fluid" src="img/photos-1/3.jpg" alt="">
</div>
</div>
<div class="text-muted font-90">30 minutes ago</div>
</div>
</div>
</div>
<div class="n-item">
<div class="media">
<div class="media-left">
<div class="avatar box-48">
<img class="b-a-radius-circle" src="img/avatars/4.jpg" alt="">
<span class="n-icon bg-primary"><i class="ti-plus"></i></span>
</div>
</div>
<div class="media-body">
<div class="n-text"><a class="text-black" href="#">Larry Hal</a> <span class="text-muted">invited you to </span><a class="text-black" href="#">Project</a></div>
<div class="text-muted font-90">10:58</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-3" role="tabpanel">
<div class="sidebar-todo animated fadeIn">
<div class="sidebar-group">
<h6>Important</h6>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Mock up</span>
</label>
</div>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" checked>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Prototype iPhone</span>
</label>
</div>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Build final version</span>
</label>
</div>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Approval docs</span>
</label>
</div>
</div>
<div class="sidebar-group">
<h6>Secondary</h6>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" checked>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Website redesign</span>
</label>
</div>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" checked>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Skype call</span>
</label>
</div>
<div class="st-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Blog post</span>
</label>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-4" role="tabpanel">
<div class="sidebar-settings animated fadeIn">
<div class="sidebar-group">
<h6>Main</h6>
<div class="ss-item">
<div class="text-truncate">Anyone can register</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9" checked></div>
</div>
<div class="ss-item">
<div class="text-truncate">Allow commenting</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9"></div>
</div>
<div class="ss-item">
<div class="text-truncate">Allow deleting</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9"></div>
</div>
</div>
<div class="sidebar-group">
<h6>Notificatiоns</h6>
<div class="ss-item">
<div class="text-truncate">Commits</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9"></div>
</div>
<div class="ss-item">
<div class="text-truncate">Messages</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9" checked></div>
</div>
</div>
<div class="sidebar-group">
<h6>Security</h6>
<div class="ss-item">
<div class="text-truncate">Daily backup</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9" checked></div>
</div>
<div class="ss-item">
<div class="text-truncate">API Access</div>
<div class="ss-checkbox"><input type="checkbox" class="js-switch" data-size="small" data-color="#3e70c9" checked></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Template options -->
<div class="template-options custom-scroll custom-scroll-dark">
<div class="to-toggle"><i class="ti-settings"></i></div>
<div class="to-content">
<h6>Layouts</h6>
<div class="row m-b-2 text-xs-center">
<div class="col-xs-6 m-b-2">
<a href="index.html">
<img src="img/layouts/1.png" class="img-fluid">
</a>
<div class="text-muted">Default</div>
</div>
<div class="col-xs-6 m-b-2">
<label>
<input name="compact-sidebar" type="checkbox">
<div class="to-icon"><i class="ti-check"></i></div>
<img src="img/layouts/2.png" class="img-fluid">
</label>
<div class="text-muted">Compact Sidebar</div>
</div>
<div class="col-xs-6 m-b-2">
<label>
<input name="fixed-header" type="checkbox" checked>
<div class="to-icon"><i class="ti-check"></i></div>
<img src="img/layouts/3.png" class="img-fluid">
</label>
<div class="text-muted">Fixed Header</div>
</div>
<div class="col-xs-6 m-b-2">
<label>
<input name="boxed-wrapper" type="checkbox">
<div class="to-icon"><i class="ti-check"></i></div>
<img src="img/layouts/4.png" class="img-fluid">
</label>
<div class="text-muted">Boxed Wrapper</div>
</div>
</div>
<h6>Skins</h6>
<div class="row">
<div class="col-xs-3 m-b-2">
<label>
<input name="skin" value="skin-default" type="radio" checked>
<div class="to-icon"><i class="ti-check"></i></div>
<div class="to-skin">
<span class="skin-first bg-white"></span>
<span class="skin-second skin-dark-blue"></span>
<span class="skin-third bg-info"></span>
</div>
</label>
</div>
<div class="col-xs-3 m-b-2">
<label>
<input name="skin" value="skin-1" type="radio">
<div class="to-icon"><i class="ti-check"></i></div>
<div class="to-skin">
<span class="skin-first skin-dark-blue-2"></span>
<span class="skin-second bg-white"></span>
<span class="skin-third bg-danger"></span>
</div>
</label>
</div>
<div class="col-xs-3 m-b-2">
<label>
<input name="skin" value="skin-2" type="radio">
<div class="to-icon"><i class="ti-check"></i></div>
<div class="to-skin">
<span class="skin-first bg-white"></span>
<span class="skin-second bg-black"></span>
<span class="skin-third bg-success"></span>
</div>
</label>
</div>
<div class="col-xs-3 m-b-2">
<label>
<input name="skin" value="skin-3" type="radio">
<div class="to-icon"><i class="ti-check"></i></div>
<div class="to-skin">
<span class="skin-first bg-white"></span>
<span class="skin-second skin-grey"></span>
<span class="skin-third bg-purple"></span>
</div>
</label>
</div>
<div class="col-xs-3 m-b-2">
<label>
<input name="skin" value="skin-4" type="radio">
<div class="to-icon"><i class="ti-check"></i></div>
<div class="to-skin">
<span class="skin-first skin-dark-blue"></span>
<span class="skin-second skin-dark-blue-2"></span>
<span class="skin-third bg-warning"></span>
</div>
</label>
</div>
<div class="col-xs-3 m-b-2">
<label>
<input name="skin" value="skin-5" type="radio">
<div class="to-icon"><i class="ti-check"></i></div>
<div class="to-skin">
<span class="skin-first bg-primary"></span>
<span class="skin-second bg-white"></span>
<span class="skin-third bg-primary"></span>
</div>
</label>
</div>
</div>
</div>
</div>
<!-- Header -->
<div class="site-header">
<nav class="navbar navbar-light">
<ul class="nav navbar-nav">
<li class="nav-item m-r-1 hidden-lg-up">
<a class="nav-link collapse-button" href="#">
<i class="ti-menu"></i>
</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item dropdown">
<a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
<i class="ti-check"></i>
<span class="tag tag-success top">3</span>
</a>
<div class="dropdown-tasks dropdown-menu dropdown-menu-right animated slideInUp">
<div class="t-item">
<div class="m-b-0-5">
<a class="text-black" href="#">First Task</a>
<span class="pull-xs-right text-muted">75%</span>
</div>
<progress class="progress progress-danger progress-sm" value="75" max="100">100%</progress>
<span class="avatar box-32">
<img src="img/avatars/2.jpg" alt="">
</span>
<a class="text-black" href="#">John Doe</a>, <span class="text-muted">5 min ago</span>
</div>
<div class="t-item">
<div class="m-b-0-5">
<a class="text-black" href="#">Second Task</a>
<span class="pull-xs-right text-muted">40%</span>
</div>
<progress class="progress progress-purple progress-sm" value="40" max="100">100%</progress>
<span class="avatar box-32">
<img src="img/avatars/3.jpg" alt="">
</span>
<a class="text-black" href="#">John Doe</a>, <span class="text-muted">15:07</span>
</div>
<div class="t-item">
<div class="m-b-0-5">
<a class="text-black" href="#">Third Task</a>
<span class="pull-xs-right text-muted">100%</span>
</div>
<progress class="progress progress-warning progress-sm" value="100" max="100">100%</progress>
<span class="avatar box-32">
<img src="img/avatars/4.jpg" alt="">
</span>
<a class="text-black" href="#">John Doe</a>, <span class="text-muted">yesterday</span>
</div>
<div class="t-item">
<div class="m-b-0-5">
<a class="text-black" href="#">Fourth Task</a>
<span class="pull-xs-right text-muted">60%</span>
</div>
<progress class="progress progress-success progress-sm" value="60" max="100">100%</progress>
<span class="avatar box-32">
<img src="img/avatars/5.jpg" alt="">
</span>
<a class="text-black" href="#">John Doe</a>, <span class="text-muted">3 days ago</span>
</div>
<a class="t-item text-black text-xs-center" href="#">
<strong>View all tasks</strong>
</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
<i class="ti-bell"></i>
<span class="tag tag-danger top">12</span>
</a>
<div class="dropdown-messages dropdown-tasks dropdown-menu dropdown-menu-right animated slideInUp">
<div class="m-item">
<div class="mi-icon bg-info"><i class="ti-comment"></i></div>
<div class="mi-text"><a class="text-black" href="#">John Doe</a> <span class="text-muted">commented post</span> <a class="text-black" href="#">Lorem ipsum dolor</a></div>
<div class="mi-time">5 min ago</div>
</div>
<div class="m-item">
<div class="mi-icon bg-danger"><i class="ti-heart"></i></div>
<div class="mi-text"><a class="text-black" href="#">John Doe</a> <span class="text-muted">liked post</span> <a class="text-black" href="#">Lorem ipsum dolor</a></div>
<div class="mi-time">15:07</div>
</div>
<div class="m-item">
<div class="mi-icon bg-purple"><i class="ti-user"></i></div>
<div class="mi-text"><a class="text-black" href="#">John Doe</a> <span class="text-muted">followed</span> <a class="text-black" href="#">Kate Doe</a></div>
<div class="mi-time">yesterday</div>
</div>
<div class="m-item">
<div class="mi-icon bg-danger"><i class="ti-heart"></i></div>
<div class="mi-text"><a class="text-black" href="#">John Doe</a> <span class="text-muted">liked post</span> <a class="text-black" href="#">Lorem ipsum dolor</a></div>
<div class="mi-time">3 days ago</div>
</div>
<a class="t-item text-black text-xs-center" href="#">
<strong>View all notifications</strong>
</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
<div class="avatar box-32">
<img src="img/avatars/1.jpg" alt="">
</div>
</a>
<div class="dropdown-menu dropdown-menu-right animated flipInY">
<a class="dropdown-item" href="#">
<i class="ti-email m-r-0-5"></i> Inbox
</a>
<a class="dropdown-item" href="#">
<i class="ti-user m-r-0-5"></i> Profile
</a>
<a class="dropdown-item" href="#">
<i class="ti-settings m-r-0-5"></i> Settings
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="ti-help m-r-0-5"></i> Help</a>
<a class="dropdown-item" href="#"><i class="ti-power-off m-r-0-5"></i> Sign out</a>
</div>
</li>
<li class="nav-item hidden-md-up">
<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapse-1">
<i class="ti-more"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link site-sidebar-second-toggle" href="#" data-toggle="collapse">
<i class="ti-arrow-left"></i>
</a>
</li>
</ul>
<div class="navbar-toggleable-sm collapse" id="collapse-1">
<div class="header-form pull-md-left m-md-r-1">
<form>
<input type="text" class="form-control b-a" placeholder="Search for...">
<button type="submit" class="btn bg-white b-a-0">
<i class="ti-search"></i>
</button>
</form>
</div>
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">
Add
</a>
<div class="dropdown-menu animated flipInY">
<a class="dropdown-item" href="#">
Link
<span class="tag tag-primary">3</span>
</a>
<a class="dropdown-item" href="#">Another link</a>
<a class="dropdown-item" href="#">
Something else here
<span class="tag tag-success">7</span>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="site-content">
<!-- Content -->
<div class="content-area p-y-1">
<div class="container-fluid">
<h4>Navs</h4>
<ol class="breadcrumb no-bg m-b-1">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">UI Kit</a></li>
<li class="breadcrumb-item active">Navs</li>
</ol>
<div class="box box-block bg-white">
<div class="row">
<div class="col-md-6 m-b-1 m-md-b-0">
<h5>Base nav</h5>
<p class="font-90 text-muted m-b-1">Roll your own navigation style by extending the base <code>.nav</code> component. All Bootstrap’s nav components are built on top of this by specifying additional styles.</p>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="col-md-6">
<h5>Inline</h5>
<p class="font-90 text-muted m-b-1">Space out nav links in a horizontal band with <code>.nav-inline</code>. Longer series of links will wrap to a new line.</p>
<nav class="nav nav-inline">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Another link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Tabs</h5>
<p class="font-90 text-muted m-b-1">Takes the basic nav from above and adds the <code>.nav-tabs</code> class to generate a tabbed interface.</p>
<div class="row">
<div class="col-md-6 m-b-1 m-md-b-0">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="nav nav-tabs nav-tabs-2">
<li class="nav-item">
<a class="nav-link active" href="#"><i class="ti-user text-muted m-r-0-25"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="ti-package text-muted m-r-0-25"></i> Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="ti-settings text-muted m-r-0-25"></i> Settings</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#"><i class="ti-alert text-muted m-r-0-25"></i> Disabled</a>
</li>
</ul>
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Vertical tabs</h5>
<p class="font-90 text-muted m-b-1">Use default tabs with <code>.v-tabs</code></p>
<div class="row">
<div class="col-md-4 m-b-1 m-md-b-0">
<ul class="nav nav-tabs v-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="col-md-4 m-b-1 m-md-b-0">
<ul class="nav nav-tabs nav-tabs-2 v-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="nav nav-tabs nav-tabs-3 v-tabs">
<li class="nav-item">
<a class="nav-link active" href="#"><i class="ti-user m-r-0-25"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="ti-package text-muted m-r-0-25"></i> Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="ti-settings text-muted m-r-0-25"></i> Settings</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#"><i class="ti-alert text-muted m-r-0-25"></i> Disabled</a>
</li>
</ul>
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Pills</h5>
<p class="font-90 text-muted m-b-1">Take that same HTML, but use <code>.nav-pills</code> instead.</p>
<div class="row m-b-1">
<div class="col-md-6 m-b-1 m-md-b-0">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="nav nav-pills nav-pills-2">
<li class="nav-item">
<a class="nav-link active" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-6 m-b-1 m-md-b-0">
<ul class="nav nav-pills nav-pills-rounded">
<li class="nav-item">
<a class="nav-link active" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="nav nav-pills nav-pills-2 nav-pills-rounded">
<li class="nav-item">
<a class="nav-link active" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
<div class="box box-block bg-white">
<h5>Using dropdowns</h5>
<p class="font-90 text-muted m-b-1">Tabs and pills with dropdown menus.</p>
<div class="row">
<div class="col-md-6">
<ul class="nav nav-tabs m-b-0-5" 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 dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1" aria-expanded="true">@fat</a>
<a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2" aria-expanded="true">@mdo</a>
</div>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div class="tab-pane" id="profile" role="tabpanel">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
</div>
<div class="tab-pane" id="dropdown1" role="tabpanel">
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
<div class="tab-pane" id="dropdown2" role="tabpanel">
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
</div>
</div>
</div>
<div class="col-md-6">
<ul class="nav nav-pills m-b-0-5" 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 dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="dropdown1-tab" href="#dropdown1-2" role="tab" data-toggle="tab" aria-controls="dropdown1" aria-expanded="true">@fat</a>
<a class="dropdown-item" id="dropdown2-tab" href="#dropdown2-2" role="tab" data-toggle="tab" aria-controls="dropdown2" aria-expanded="true">@mdo</a>
</div>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home-2" role="tabpanel">
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div class="tab-pane" id="profile-2" role="tabpanel">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
</div>
<div class="tab-pane" id="dropdown1-2" role="tabpanel">
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
<div class="tab-pane" id="dropdown2-2" role="tabpanel">
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
</div>
</div>
</div>
</div>
</div>
<div class="box box-block bg-white m-b-0">
<h5>Stacked pills</h5>
<p class="font-90 text-muted m-b-1">Add <code>.nav-stacked</code> to the <code>.nav.nav-pills</code> to stack them vertically. Each <code>.nav-link</code> becomes block-level, allowing for larger hit areas via mouse or tap.</p>
<div class="row">
<div class="col-md-6 m-b-1 m-md-b-0">
<ul class="nav nav-pills nav-stacked">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="nav nav-pills nav-pills-2 nav-stacked">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container-fluid">
2016 © Neptune
</div>
</footer>
</div>
</div>
<!-- Vendor JS -->
<script type="text/javascript" src="vendor/jquery/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="vendor/tether/js/tether.min.js"></script>
<script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="vendor/detectmobilebrowser/detectmobilebrowser.js"></script>
<script type="text/javascript" src="vendor/jscrollpane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="vendor/jscrollpane/mwheelIntent.js"></script>
<script type="text/javascript" src="vendor/jscrollpane/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="vendor/waves/waves.min.js"></script>
<script type="text/javascript" src="vendor/chartist/chartist.min.js"></script>
<script type="text/javascript" src="vendor/switchery/dist/switchery.min.js"></script>
<!-- Neptune JS -->
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
HTML
1
https://gitee.com/libwiki/bootstrap-v4.0_demo.git
git@gitee.com:libwiki/bootstrap-v4.0_demo.git
libwiki
bootstrap-v4.0_demo
bootstrap-v4.0_demo
master

搜索帮助

23e8dbc6 1850385 7e0993f3 1850385