Bootstrap-tabs – benutzerdefinierte Stil

Ich versuche zu erreichen die gleiche Art von ‚Pfeil‘ – styling auf bootstrap-tabs ähnlich wie die Abbildung unten. Wie kann ich etwas erreichen ähnlich?

Ich habe meinen Beispiel-code in jsfiddle, wo ich bootstrap tabs.
Bootstrap-tabs - benutzerdefinierte Stil

https://jsfiddle.net/70Luf7hu/

<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation">
        <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>     </li>
    <li role="presentation" class="active">
        <a href="#office" aria-controls="profile" role="tab" data-toggle="tab">Office</a>
    </li>
    <li role="presentation">
        <a href="#confirmation" aria-controls="profile" role="tab" data-toggle="tab">Confirm</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="home">Home</div>
    <div role="tabpanel" class="tab-pane active" id="office">Office</div>
    <div role="tabpanel" class="tab-pane" id="confirmation">Confirm</div>

  </div>

</div>
InformationsquelleAutor rory-h | 2017-12-22



2 Replies
  1. 2

    durch die Verwendung von breadcrumb-Klasse, die Sie erreichen können,

    CSS:

    .breadcrumb {
            background: #ddd;
            display: inline-block;
            padding: 1px;
            padding-right: 18px;
    
        }
    
        .breadcrumb li {
            display: inline-block;
            background: white;
            padding: 0;
            position: relative;
            min-width:50px;
            text-decoration: none;
            -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
            clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
            margin-right: -13px;
        }
    
        .breadcrumb li#last {
            -webkit-clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
            clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
        }
    
        .breadcrumb li:hover {
            color: white;
            background: #fff;
        }
    
        /* first link should not have anything cliped on the left side */
        .breadcrumb li:first-child {
            -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
            clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
        }
    
        .label{
            height: 100%;
            width: 100%;
        }
       
       

    HTML:

    <html lang="en">
    <head>
      <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.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <style>
     .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
     border:0;
     background-color:#fff;
     }
     .nav-tabs > li > a{padding:10px 30px}
      .nav-tabs > li.active {
      border-bottom:3px solid cyan;
      }
      </style>
    </head>
    <body>
    
    <div class="breadcrumb">
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation">
            <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>     </li>
        <li role="presentation" class="active">
            <a href="#office" aria-controls="profile" role="tab" data-toggle="tab">Office</a>
        </li>
        <li id="last" role="presentation">
            <a href="#confirmation" aria-controls="profile" role="tab" data-toggle="tab">Confirm</a>
        </li>
      </ul>
    
      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane" id="home">Home</div>
        <div role="tabpanel" class="tab-pane active" id="office">Office</div>
        <div role="tabpanel" class="tab-pane" id="confirmation">Confirm</div>
        
      </div>
    
    </div>
    
    
    </body>
    </html>

  2. 1

    .nav-tabs > li > a {margin: 0;}
    .breadcrumb input[type="radio"] {
    display: none;
    }
    .breadcrumb input[type="checkbox"] {
    display: none;
    }
    .breadcrumb {
    background: #ddd;
    display: inline-block;
    padding: 1px;
    padding-right: 14px;
    }
    .tab-content {
    padding: 15px;
    }
    .breadcrumb li {
    display: inline-block;
    background: white;
    padding: 0;
    position: relative;
    min-width:50px;
    text-decoration: none;
    -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
    margin-right: -13px;
    }
    .breadcrumb li#last {
    -webkit-clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
    clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
    }
    .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { border-bottom: 2px solid #5cfeea;}
    .breadcrumb li:first-child {
    -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);   
    clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
    }

    <div class="breadcrumb">
       <!-- Nav tabs -->
       <ul class="nav nav-tabs" role="tablist">
          <li role="presentation">
             <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>     
          </li>
          <li role="presentation" class="active">
             <a href="#office" aria-controls="profile" role="tab" data-toggle="tab">Office</a>
          </li>
          <li id="last" role="presentation">
             <a href="#confirmation" aria-controls="profile" role="tab" data-toggle="tab">Confirm</a>
          </li>
       </ul>
       <!-- Tab panes -->
       <div class="tab-content">
          <div role="tabpanel" class="tab-pane" id="home">Home</div>
          <div role="tabpanel" class="tab-pane active" id="office">Office</div>
          <div role="tabpanel" class="tab-pane" id="confirmation">Confirm</div>
       </div>
    </div>

    Finden Sie diese

    https://jsfiddle.net/70Luf7hu/10/

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.