"Bootstrap Navigation Pills"
Bootstrap 4.0.0 Snippet by 高级放牛娃

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"> <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"> <body> <div class="container mt-5"> <div class="title"> <h3>Navigation Pills</h3> </div> <div class="title"> <h3><small>Simple</small></h3> </div> <div class="row"> <div class="col-lg-6 col-md-8"> <ul class="nav nav-pills" role="tablist"> <!-- color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger" --> <li class="nav-item"> <a class="nav-link" href="#dashboard-1" role="tab" data-toggle="tab"> Dashboard </a> </li> <li class="nav-item"> <a class="nav-link active" href="#schedule-1" role="tab" data-toggle="tab"> Schedule </a> </li> <li class="nav-item"> <a class="nav-link" href="#tasks-1" role="tab" data-toggle="tab"> Tasks </a> </li> </ul> <div class="tab-content tab-space"> <div class="tab-pane active" id="dashboard-1"> Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. <br><br> Dramatically visualize customer directed convergence without revolutionary ROI. </div> <div class="tab-pane" id="schedule-1"> Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. <br><br>Dramatically maintain clicks-and-mortar solutions without functional solutions. </div> <div class="tab-pane" id="tasks-1"> Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. <br><br>Dynamically innovate resource-leveling customer service for state of the art customer service. </div> </div> </div> <div class="col-lg-6 col-md-12"> <div class="row"> <div class="col-md-3"> <ul class="nav nav-pills nav-pills-icons flex-column" role="tablist"> <!-- color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger" --> <li class="nav-item"> <a class="nav-link active" href="#dashboard-2" role="tab" data-toggle="tab"> Dashboard </a> </li> <li class="nav-item"> <a class="nav-link" href="#schedule-2" role="tab" data-toggle="tab"> Schedule </a> </li> </ul> </div> <div class="col-md-8"> <div class="tab-content"> <div class="tab-pane active" id="dashboard-2"> Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. <br><br> Dramatically visualize customer directed convergence without revolutionary ROI. </div> <div class="tab-pane" id="schedule-2"> Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. <br><br>Dramatically maintain clicks-and-mortar solutions without functional solutions. </div> </div> </div> </div> </div> </div> <div class="title"> <h3><small>With Icons</small></h3> </div> <div class="row"> <div class="col-lg-6 col-md-8"> <ul class="nav nav-pills nav-pills-icons" role="tablist"> <!-- color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger" --> <li class="nav-item"> <a class="nav-link" href="#dashboard-1" role="tab" data-toggle="tab"> <i class="material-icons">dashboard</i> Dashboard </a> </li> <li class="nav-item"> <a class="nav-link active" href="#schedule-1" role="tab" data-toggle="tab"> <i class="material-icons">schedule</i> Schedule </a> </li> <li class="nav-item"> <a class="nav-link" href="#tasks-1" role="tab" data-toggle="tab"> <i class="material-icons">list</i> Tasks </a> </li> </ul> <div class="tab-content tab-space"> <div class="tab-pane active" id="dashboard-1"> Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. <br><br> Dramatically visualize customer directed convergence without revolutionary ROI. </div> <div class="tab-pane" id="schedule-1"> Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. <br><br>Dramatically maintain clicks-and-mortar solutions without functional solutions. </div> <div class="tab-pane" id="tasks-1"> Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. <br><br>Dynamically innovate resource-leveling customer service for state of the art customer service. </div> </div> </div> <div class="col-lg-6 col-md-12"> <div class="row"> <div class="col-md-3"> <ul class="nav nav-pills nav-pills-icons flex-column" role="tablist"> <!-- color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger" --> <li class="nav-item"> <a class="nav-link active" href="#dashboard-2" role="tab" data-toggle="tab"> <i class="material-icons">dashboard</i> Dashboard </a> </li> <li class="nav-item"> <a class="nav-link" href="#schedule-2" role="tab" data-toggle="tab"> <i class="material-icons">schedule</i> Schedule </a> </li> </ul> </div> <div class="col-md-8"> <div class="tab-content"> <div class="tab-pane active" id="dashboard-2"> Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. <br><br> Dramatically visualize customer directed convergence without revolutionary ROI. </div> <div class="tab-pane" id="schedule-2"> Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. <br><br>Dramatically maintain clicks-and-mortar solutions without functional solutions. </div> </div> </div> </div> </div> </div> <div class="title"> <h3><small>Colors</small></h3> </div> <div class="row"> <div class="col-md-4"> <p>Primary color</p> <ul class="nav nav-pills nav-pills-primary mt-4" role="tablist"> <li class="nav-item"> <a class="nav-link" href="#dashboard-1" role="tab" data-toggle="tab"> Dashboard </a> </li> <li class="nav-item"> <a class="nav-link active" href="#schedule-1" role="tab" data-toggle="tab"> Schedule </a> </li> <li class="nav-item"> <a class="nav-link" href="#tasks-1" role="tab" data-toggle="tab"> Tasks </a> </li> </ul> </div> <div class="col-md-4"> <p>Info color</p> <ul class="nav nav-pills nav-pills-info mt-4" role="tablist"> <li class="nav-item"> <a class="nav-link" href="#dashboard-1" role="tab" data-toggle="tab"> Dashboard </a> </li> <li class="nav-item"> <a class="nav-link active" href="#schedule-1" role="tab" data-toggle="tab"> Schedule </a> </li> <li class="nav-item"> <a class="nav-link" href="#tasks-1" role="tab" data-toggle="tab"> Tasks </a> </li> </ul> </div> <div class="col-md-4"> <p>Success color</p> <ul class="nav nav-pills nav-pills-success mt-4" role="tablist"> <li class="nav-item"> <a class="nav-link" href="#dashboard-1" role="tab" data-toggle="tab"> Dashboard </a> </li> <li class="nav-item"> <a class="nav-link active" href="#schedule-1" role="tab" data-toggle="tab"> Schedule </a> </li> <li class="nav-item"> <a class="nav-link" href="#tasks-1" role="tab" data-toggle="tab"> Tasks </a> </li> </ul> </div> <div class="col-md-4 mt-5"> <p>Warning color</p> <ul class="nav nav-pills nav-pills-warning mt-4" role="tablist"> <li class="nav-item"> <a class="nav-link" href="#dashboard-1" role="tab" data-toggle="tab"> Dashboard </a> </li> <li class="nav-item"> <a class="nav-link active" href="#schedule-1" role="tab" data-toggle="tab"> Schedule </a> </li> <li class="nav-item"> <a class="nav-link" href="#tasks-1" role="tab" data-toggle="tab"> Tasks </a> </li> </ul> </div> <div class="col-md-4 mt-5"> <p>Danger color</p> <ul class="nav nav-pills nav-pills-danger mt-4" role="tablist"> <li class="nav-item"> <a class="nav-link" href="#dashboard-1" role="tab" data-toggle="tab"> Dashboard </a> </li> <li class="nav-item"> <a class="nav-link active" href="#schedule-1" role="tab" data-toggle="tab"> Schedule </a> </li> <li class="nav-item"> <a class="nav-link" href="#tasks-1" role="tab" data-toggle="tab"> Tasks </a> </li> </ul> </div> <div class="col-md-4 mt-5"> <p>Rose color</p> <ul class="nav nav-pills nav-pills-rose mt-4" role="tablist"> <li class="nav-item"> <a class="nav-link" href="#dashboard-1" role="tab" data-toggle="tab"> Dashboard </a> </li> <li class="nav-item"> <a class="nav-link active" href="#schedule-1" role="tab" data-toggle="tab"> Schedule </a> </li> <li class="nav-item"> <a class="nav-link" href="#tasks-1" role="tab" data-toggle="tab"> Tasks </a> </li> </ul> </div> </div> </div> <footer class="footer text-center "> <p>Made with <a href="https://demos.creative-tim.com/material-kit/index.html" target="_blank">Material Kit</a> by Creative Tim</p> </footer> <script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script> <script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script> </body>
html *{ -webkit-font-smoothing: antialiased; } .title h3{ font-size: 25px !important; margin-top: 20px; margin-bottom: 25px; line-height: 1.4em !important; font-weight: 300; } h3 { font-size: 1.5625rem; line-height: 1.4em; } small { font-size: 75%; color: #777; } .nav-pills .nav-item .nav-link { line-height: 24px; font-size: 12px; font-weight: 500; min-width: 100px; color: #555; transition: all .3s; border-radius: 30px; padding: 10px 15px; text-align: center; border-radius: 4px; } .nav-pills:not(.flex-column) .nav-item+.nav-item:not(:first-child) { margin-left: 5px; } .nav-pills .nav-item .nav-link.active { color: #fff; background-color: #9c27b0; box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(156,39,176,.6); } .nav-pills.nav-pills-info .nav-item .nav-link.active, .nav-pills.nav-pills-info .nav-item .nav-link.active:focus, .nav-pills.nav-pills-info .nav-item .nav-link.active:hover { background-color: #00bcd4; box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(0,188,212,.6); color: #fff; } .nav-pills.nav-pills-success .nav-item .nav-link.active, .nav-pills.nav-pills-success .nav-item .nav-link.active:focus, .nav-pills.nav-pills-success .nav-item .nav-link.active:hover { background-color: #4caf50; box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(76,175,80,.6); color: #fff; } .nav-pills.nav-pills-warning .nav-item .nav-link.active, .nav-pills.nav-pills-warning .nav-item .nav-link.active:focus, .nav-pills.nav-pills-warning .nav-item .nav-link.active:hover { background-color: #ff9800; box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(255,152,0,.6); color: #fff; } .nav-pills.nav-pills-danger .nav-item .nav-link.active, .nav-pills.nav-pills-danger .nav-item .nav-link.active:focus, .nav-pills.nav-pills-danger .nav-item .nav-link.active:hover { background-color: #f44336; box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(244,67,54,.6); color: #fff; } .nav-pills.nav-pills-rose .nav-item .nav-link.active, .nav-pills.nav-pills-rose .nav-item .nav-link.active:focus, .nav-pills.nav-pills-rose .nav-item .nav-link.active:hover { background-color: #e91e63; box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(233,30,99,.6); color: #fff; } .nav-pills .nav-item .nav-link:not(.active):hover { background-color: rgba(200,200,200,.2); } .nav-pills .nav-item i { display: block; font-size: 30px; padding: 15px 0; } .nav-pills.flex-column .nav-item+.nav-item { margin-top: 5px; } .tab-pane{ font-weight: 300; } .tab-space { padding: 20px 0 50px; font-weight: 300; } /* footer */ footer{ margin-top: 100px; color: #555; background: #fff; padding: 25px; font-weight: 300; } .footer p{ margin-bottom: 0; font-size: 14px; font-weight: 300; } footer p a{ color: #555; font-weight: 400; } footer p a:hover { color: #9f26aa; text-decoration: none; }
$(document).ready(function() { $('body').bootstrapMaterialDesign(); });

Related: See More


Questions / Comments: