Dlaczego Twitter Bootstrap dodaje :: przed i :: po?

Zauważyłem, że kiedy sprawdzam kod utworzony za pomocą klas ładowania początkowego, istnieje wiele właściwości :: after i :: before w CSS. Przykład znajduje się poniżej (z witryny w3schools).Dlaczego Twitter Bootstrap dodaje :: przed i :: po?

Czy ktoś mógłby wyjaśnić w szerokim zakresie, co te dodatkowe właściwości są przeznaczone do osiągnięcia i dlaczego wydają się pojawiać na prawie wszystkich elementach?

Z tego co wiem, wszystkie elementy wykluczone są wstawiane do elementów tabeli i dodawane jest puste miejsce tekstu. Zakładam, że jeśli chodzi o układ, ale chciałbym dowiedzieć się więcej o powodach, dla których to zrobiono.

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <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/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h1>Grid</h1> 
 
    <p>This example demonstrates a 50%/50% split on small, medium and large devices. On extra small devices, it will stack (100% width).</p> 
 
    <p>Resize the browser window to see the effect.</p> 
 
    <div class="row"> 
 
    <div class="col-sm-6" style="background-color:yellow;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br> 
 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 
    <div class="col-sm-6" style="background-color:pink;"> 
 
     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto. 
 
    </div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

Źródło

2016-10-17 Robin

O ile wiem, myślę Bootstrap używa pseudo-elementy jak 'clearfix'. Zobacz ten link http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use/1633170#1633170. Sprawdź, czy to pomaga. –

Nie jestem pewien, w jaki sposób to pytanie jest duplikatem sugerowanego pytania. Być może jako pokrewne pytanie, które może dostarczyć więcej wglądu, druga odpowiedź jest przydatna, gdy czytelnicy wiedzą, że pseudo elementy w Bootstrap mają coś wspólnego z poprawką. – Robin

-1

Ci ::after i ::before zwane elementy pseudolosowych. Pozwalają one na stylizację określonej części dokumentu.

Proszę znaleźć poniższe linki w celach informacyjnych.

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/en-US/docs/Web/CSS/::after https://css-tricks.com/almanac/selectors/a/after-and-before/

Źródło

2016-10-17 13:11:37

OP pyta, dlaczego te elementy zostały dodane przez Bootstrapa tak samo dobrze, po prostu dajesz super proste wyjaśnienie i podajesz kilka linków. Czy mógłbyś wyjaśnić, dlaczego Bootstrap dodaje tak wiele z tych pseudo-klas? –

Dlaczego Twitter Bootstrap dodaje :: przed i :: po?

Odpowiedz

Powiązane problemy