Die Bootstrap Navi ist mit den meisten ?lteren Browsern kompatibel, h?ngt jedoch von der Browserversion ab. Bootstrap 5 unterstützt nicht IE 10 und unten. Bootstrap 4 erfordert das Hinzufügen von Polyfills und benutzerdefinierten CSS, um mit IE 9 kompatibel zu sein. Bootstrap 3 unterstützt IE 8, opfert jedoch moderne Merkmale. Kompatibilit?tsprobleme konzentrieren sich auf CSS, JavaScript und Responsive Design.
Die Bootstrap Navi ist in der Tat mit den meisten ?lteren Browsern kompatibel, h?ngt jedoch davon ab, auf welche Versionen der "alten Version" Sie sich beziehen.
Bootstrap 5 ist die neueste Version, die moderne CSS- und JavaScript -Technologien verwendet. Die Unterstützung für ?ltere Browser ist daher relativ begrenzt. Zum Beispiel unterstützt Bootstrap 5 den Internet Explorer 10 und unten nicht. Wenn Ihr Projekt IE 10 oder früher unterstützen muss, sollten Sie die Verwendung von Bootstrap 4 oder früher in Betracht ziehen.
Ich erinnere mich, dass ich einmal in einem Projekt mit IE 9 kompatibel sein musste, aber ich hatte einige Probleme mit Bootstrap 4, insbesondere dem Responsive -Design -Teil von Navbar. Schlie?lich haben wir es gel?st, indem wir einige Polyfills und benutzerdefinierte CSS hinzugefügt haben, aber dies hat viel Arbeit hinzugefügt.
Wenn Sie Bootstrap 3 verwenden, unterstützt dies ?ltere Browser besser, einschlie?lich dh 8. Dies bedeutet jedoch auch, dass Sie einige moderne Funktionen und Stile opfern müssen.
Hier finden Sie einige Erfahrungen und Vorschl?ge zur Verwendung von Bootstrap Navi in ???lteren Browsern:
Die Kompatibilit?tsprobleme der Bootstrap Navi in ???lteren Browsern konzentrieren sich haupts?chlich auf verschiedene Aspekte:
CSS -Kompatibilit?t : ?ltere Browser analysieren einige moderne CSS -Eigenschaften m?glicherweise nicht richtig, wie z. M?glicherweise müssen Sie einige CSS -Fallback -Schemata verwenden, z. B. die Verwendung von Float anstelle von Flexbox.
JavaScript -Kompatibilit?t : Bootstrap verwendet JavaScript, um einige interaktive Funktionen zu implementieren, wie z. Wenn ?ltere Browser bestimmte JavaScript -Funktionen nicht unterstützen, müssen Sie m?glicherweise Polyfills verwenden oder herabstufen.
Responsive Design : Das Responsive Design von Bootstrap basiert auf Medienfragen, w?hrend einige ?ltere Browser m?glicherweise keine Medienfragen unterstützen. Sie k?nnen dieses Problem durch bedingte Annotation oder eine ?ltere Version des Responsive -Designs l?sen.
Hier ist ein einfaches Beispiel, das zeigt, wie Navbar in Bootstrap 4 verwendet wird und einen Code hinzufügt, der mit ?lteren Browsern kompatibel ist:
<! DocType html>
<html lang = "en">
<kopf>
<meta charset = "utf-8">
<meta name = "viewPort" content = "width = Ger?tebreite, initial-scale = 1,0">
<title> bootstrap navress Beispiel </title>
<!-Bootstrap CSS->
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.csss">
<!-CSS kompatibel mit ?lteren Browsern->
<Styles>
/* Fügen Sie den ?lteren Browsern Kompatibilit?tsstile hinzu*/
.navbar-nav {
float: links;
}
.navbar-nav> li {
float: links;
}
.navbar-nav> li> a {{
Padding-Top: 15px;
Padding-Bottom: 15px;
}
/* Responsive Design Fallback*/
@media (max-Width: 767px) {
.navbar-nav {
Float: Keine;
}
.navbar-nav> li {
Float: Keine;
}
}
</style>
</head>
<body>
<nav class = "navbar navbar-expand-lg navi-light bg-light">
<a class = "navbar-brand" href = "#"> navi </a>
<Button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarnav" aria-controls = "navbarnav" aria-expanded = "false" aria-label = "
<span class = "navbar-toggler-icon"> </span>
</button>
<div class = "Collapse Navi-Collapse" id = "navbarnav">
<ul class = "navbar-nav">
<li class = "nav-iTem active">
<a class = "nav-link" href = "#"> home <span class = "sr-nur"> (aktuell) </span> </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#"> features </a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#"> Preisgestaltung </a>
</li>
<li class = "nav-item">
<a class = "nav-link deaktiviert" href = "#" tabindex = "-1" aria-disabled = "true"> deaktiviert </a>
</li>
</ul>
</div>
</nav>
<!-Bootstrap JS und JQuery->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/poper.min.js"> </script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script>
<!-JavaScript kompatibel mit ?lteren Browsern->
<Script>
// Kompatibilit?tsverarbeitung für ?ltere Browser hinzufügen if (! ('QuerySelector' in Dokument && 'AddEventListener' im Fenster)) {
document.write ('<script src = "path/to/html5shiv.js"> <\/script> <script src = "path/to/reagent.min.js"> <\/script>');
}
</script>
</body>
</html> In diesem Beispiel habe ich einige CSS und JavaScript hinzugefügt, um mit ?lteren Browsern kompatibel zu sein. Float wird in CSS verwendet, um Flexbox zu ersetzen, um sicherzustellen, dass Naval auch in Browsern, die keine Flexbox unterstützen, normalerweise angezeigt werden k?nnen. In JavaScript werden bedingte Kommentare verwendet, um Polyfills zu laden, um sicherzustellen, dass ?ltere Browser die Funktionen von HTML5- und CSS3 korrekt verarbeiten k?nnen.
Natürlich gibt es einige potenzielle Probleme und Dinge zu beachten, wenn diese Kompatibilit?tsschemata verwendet werden:
Leistungsauswirkungen : Das Hinzufügen von Polyfills und zus?tzlichen CSS kann die Ladezeit der Seite erh?hen, insbesondere auf mobilen Ger?ten, die sich auf die Benutzererfahrung auswirken k?nnen.
Wartungskosten : Um mit ?lteren Browsern kompatibel zu sein, müssen Sie m?glicherweise mehrere Versionen des Codes verwalten, wodurch die Komplexit?t der Projekt- und Wartungskosten erh?ht werden.
Merkmalsbeschr?nkungen : Um mit ?lteren Browsern kompatibel zu sein, müssen Sie m?glicherweise einige moderne Funktionen und Stile opfern, die sich auf die allgemeine Benutzererfahrung der Website auswirken k?nnen.
Insgesamt gibt es, wenn Ihr Projekt Legacy -Browser unterstützen muss, zus?tzliche Arbeit, um die Kompatibilit?t bei der Verwendung von Bootstrap Navbars zu gew?hrleisten. Wenn Sie jedoch k?nnen, wird empfohlen, eine moderne Browserversion so weit wie m?glich zu verwenden, damit Sie alle Funktionen und Stifte von Bootstrap nutzen k?nnen.
Das obige ist der detaillierte Inhalt vonBootstrap Navbar: Funktioniert es mit ?lteren Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!