Wie reagiere Bootstrap Registerkarte

Ich versuche, mich nur auf Bootstrap zu entwickeln, und ich frage mich, wie man Boostrap Tab zu reagieren ohne Plugin und ich fand ein paar Plugin für die Registerkarte zu reagieren, aber ich möchte lernen, wie ich machen kann es ohne Plugin?Wie reagiere Bootstrap Registerkarte

zum Beispiel als Bild (kann es so sein)

.myTab{ 
 
    margin:70px; 
 
    width:700px; 
 
}

<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
</head> 
 
<body> 
 
    
 
    <div class="myTab"> 
 

 
    <!-- Nav tabs --> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
 
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> 
 
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> 
 
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> 
 
    </ul> 
 

 
    <!-- Tab panes --> 
 
    <div class="tab-content"> 
 
    <div role="tabpanel" class="tab-pane active" id="home"> 
 
     <h2>Home</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo asperiores, architecto sunt ex dignissimos nihil eaque voluptate, iure iusto porro, rem animi odio, amet consequatur saepe nam accusamus perspiciatis deserunt?</p> 
 
    </div> 
 
    <div role="tabpanel" class="tab-pane" id="profile"> 
 
     <h2>Profile</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam possimus neque suscipit omnis dolore at consequuntur commodi itaque dignissimos quibusdam consectetur officia earum laborum accusantium, corporis quaerat ullam modi repellendus.</p> 
 
    </div> 
 
    <div role="tabpanel" class="tab-pane" id="messages"> 
 
     <h2>Messages</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi inventore dignissimos nisi quisquam sit commodi, laboriosam perspiciatis omnis praesentium voluptate illum magni! Quo, odio itaque recusandae quam veniam tempore cupiditate.</p> 
 
    </div> 
 
    <div role="tabpanel" class="tab-pane" id="settings"> 
 
     <h2>Settings</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quam illo magni itaque fugit quo aperiam minus officia a, cumque, error, quidem voluptates cupiditate asperiores dolorum necessitatibus commodi culpa dicta.</p> 
 
    </div> 
 
    </div> 
 

 
</div> 
 
    
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</body> 
 
</html>

Quelle

2017-02-03 ani_css

Medienabfragen http://www.w3schools.com/css/css_rwd_mediaqueries.asp und Port anzeigen http://www.w3schools.com/css/css_rwd_viewport.asp – prasanth

Ich denke, das ist nicht unmöglich mit nur css ich gebe Sie ein Beispiel https://inventpartners.github.io/bootstrap-responsive-tabs/ –

Bootstrap.css haben auch die gleichen Media-Abfragen innerhalb – prasanth

gibt keine Breite Bootstrap es einrichten lassen oder Medienabfragen in CSS verwenden. Alternativ verwenden Sie Bootstrap-Gitter wie col-lg-12 oder etwas, das passt. Sie können auch die .container-Klasse verwenden, die die Breite auf 800px setzt und auch reagiert.

Quelle

2017-02-03 07:45:24

Ich denke, das ist nicht unmöglich mit nur css Ich gebe Ihnen ein Beispiel https://inventpartners.github.io/bootstrap-responsive-tabs/ –

ok eine Sache tun, füge ein Elternteil-Div mit einem Klassencontainer hinzu und füge Padding dazu 25 px hinzu, so dass der Inhalt darunter automatisch eine Breite von 700 px hat. Geben Sie anderen Klasse nicht Container Padding als es BootSrap-Klasse. –

Was den Schwimmer über die Einnahme von links aus der Registerkarte Elemente für die Größe, die Sie es

@media screen and (max-width: 767px) { 
    .nav-tabs>li { 
     float: none; 
    } 
}

Quelle

2017-02-03 07:46:08

Ich denke, das ist nicht unmöglich mit nur css Ich gebe dir ein Beispiel https://inventpartners.github.io/bootstrap-responsive-tabs/ –

Ahh kk, jetzt weiß ich, was Sie nach. Sie können dies tun, indem Sie ein Dropdown-Element auf der rechten Seite einblenden, das ausgeblendet ist und die Registerkarten enthält. Verwenden Sie dann Medienabfragen zum Ein- und Ausblenden, bis sie richtig funktionieren. Gib es einen Riss. –

ich dieses hier codehttps://jsfiddle.net/zrss7hor/2/ erstellt ändern möchten jedes Mal, wenn Sie Ihren Browser die Größe der Tabs anpassen

Quelle

2017-08-02 14:19:38

Sie sollten mehr Details zu Ihrer Lösung hinzufügen, nicht nur einen einfachen Link. Dies würde die Antwortqualität verbessern. – hering

Wie reagiere Bootstrap Registerkarte

Antwort

Verwandte Themen