Önyükleme geçişi açılır menüsünde açılır-geçiş sınıfının amacı nedir?

Question

Açılır menüler, <button> öğeye uygulanmış dropdown-toggle önyükleme sınıfı ile ya da olmadan mükemmel şekilde çalışır, bu nedenle neden ilk etapta kullanılır?

Answer 1

dropdown-toggle sınıfı kodunu :focus numaralı düğmeye ekler, böylece düğmeyi tıkladığınızda "etkin" öğenin etrafındaki mavi kenarlığa sahip olmaz.

edin önümüzdeki iki bottons:

<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.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <h2>Dropdowns</h2> 
 
    <p>The .divider class is used to separate links inside the dropdown menu with a thin horizontal line:</p> 
 
    <div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials - no border 
 
     <span class="caret"></span></button> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#">HTML</a></li> 
 
     <li><a href="#">CSS</a></li> 
 
     <li><a href="#">JavaScript</a></li> 
 
     <li class="divider"></li> 
 
     <li><a href="#">About Us</a></li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <h2>Dropdowns</h2> 
 
    <p>The .divider class is used to separate links inside the dropdown menu with a thin horizontal line:</p> 
 
    <div class="dropdown"> 
 
    <button class="btn btn-default" type="button" data-toggle="dropdown">Tutorials - with border 
 
     <span class="caret"></span></button> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#">HTML</a></li> 
 
     <li><a href="#">CSS</a></li> 
 
     <li><a href="#">JavaScript</a></li> 
 
     <li class="divider"></li> 
 
     <li><a href="#">About Us</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

Aşağıdaki CSS özelliklerini ekler, ancak darbeli açılır düğmenin içeriği görüntülendiğinde:

Temelde var

bazı button iç box-shadow zaman çıkarılması ( :focus üzerine) .open yanı sıra color, background-color, border-color ve outline. İkisi arasındaki Burada bir karşılaştırma:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<!-- Single button --> 
 
<div class="btn-group"> 
 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
    With .dropdown-toggle <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#">Action</a> 
 
    </li> 
 
    <li><a href="#">Another action</a> 
 
    </li> 
 
    <li><a href="#">Something else here</a> 
 
    </li> 
 
    <li role="separator" class="divider"></li> 
 
    <li><a href="#">Separated link</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<!-- Single button --> 
 
<div class="btn-group"> 
 
    <button type="button" class="btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
    Without .dropdown-toggle <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#">Action</a> 
 
    </li> 
 
    <li><a href="#">Another action</a> 
 
    </li> 
 
    <li><a href="#">Something else here</a> 
 
    </li> 
 
    <li role="separator" class="divider"></li> 
 
    <li><a href="#">Separated link</a> 
 
    </li> 
 
    </ul> 
 
</div>

Chrome'da test Fark, Opera & Safari: