Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt-CSS-Tutorial-php.cn

Inhaltsverzeichnis

选择器E:hover、E:active和E:focus

E:enabled伪类选择器与E:disabled伪类选择器

read-only伪类选择器与E:read-write伪类选择器

checked伪类选择器

default伪类选择器

indeterminate伪类选择器

伪类选择器E::selection

E:invalid伪类选择器与E:valid伪类选择器

E:required伪类选择器与E:optional伪类选择器

E:in-range伪类选择器与E:out-of-range伪类选择器

Heim

Web-Frontend

CSS-Tutorial

Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

青灯夜游

Aug 03, 2022 pm 12:09 PM

css ui状态伪类选择器

Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

Der UI-Status-Pseudoklassenselektor wird verwendet, um UI-Elemente in einem bestimmten Status auszuwählen. Er wird hauptsächlich in HTML-Formularen verwendet, um das Benutzererlebnis zu verbessern.

Eigenschaften des UI-Status-Pseudoklassenselektors: Der angegebene Stil funktioniert nur in einem bestimmten Zustand.

Der Status des Formularelements umfasst Fokus gewinnen, Fokus verlieren, ausgewählt, nicht ausgewählt, verfügbar, nicht verfügbar, gültig, ungültig, Erforderlich, optional, schreibgeschützt usw.

E :geprüft33

1. E:Hover-Selektor

wird verwendet, um den Stil anzugeben, den das Element verwendet, wenn der Mauszeiger darüber bewegt wird

Anwendung:

<元素>:hover{ 
CSS样式 
}

Nach dem Login kopieren

Wir können es in „“ hinzufügen Das Typattribut des Elements.

Beispiel:

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px solid red;
            color: red;
        }
        a:hover {
            background: #9c6ae1;
            border: 1px solid black;
            color: black;
        }
    </style>
</head>
<body>
    <a href=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>

Nach dem Login kopieren

Das laufende Ergebnis ist wie folgt:

Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

2. E:aktiver Selektor

:aktiv: Definieren Sie den Stil, wenn Sie auf den Link klicken. :active：定义点击链接时的样式。

通过:active伪类选择器可以定义点击链接时的样式，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px solid red;
            color: red;
        }
        a:hover {
            background: #9c6ae1;
            border: 1px solid black;
            color: black;
        }
        a:active {
            background: #000;
            border: 1px solid black;
            color: white;
        }
    </style>
</head>
<body>
    <a href=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>

Nach dem Login kopieren

运行结果如下图所示：

Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

3、E:link选择器

:link：定义普通或未访问链接的样式；

通过:link伪类选择器可以为普通或未访问的链接设置样式，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
    </style>
</head>
<body>
    <a href=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>

Nach dem Login kopieren

运行结果如下图所示：

Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

4、E:visited选择器

:visited：定义已经访问过链接的样式；

通过:visited伪类选择器可以为已经访问过的链接设置样式，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px soild red;
            color: red;
        }
    </style>
</head>
<body>
    <a href=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>

Nach dem Login kopieren

运行结果如下图所示：

Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

5、E:focus选择器

:focus
Sie können den Stil beim Klicken auf einen Link über den Pseudoklassenselektor :active definieren. Der Beispielcode lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器E:hover、E:active和E:focus</title>
<style>
input[type="text"]:hover{
            background: green;
        }
        input[type="text"]:focus{
            background: #ff6600;
            color: #fff;
        }
        input[type="text"]:active{
            background: blue;
        }
        input[type="password"]:hover{
            background: red;
        }
    </style>
</head>
<body>
<h1 id="选择器E-hover-E-active和E-focus">选择器E:hover、E:active和E:focus</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名">
<br />
<br />
密码：<input type="password" placeholder="请输入密码"></form>
</body>
</html>

Nach dem Login kopieren

Das laufende Ergebnis ist wie folgt:

Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

3. E:link selector:link: Definieren Sie den Stil für normale oder nicht besuchte Links.

Sie können den Stil für normale oder nicht besuchte Links festlegen Für den :link-Pseudoklassenselektor lautet der Beispielcode wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>E:enabled伪类选择器与E:disabled伪类选择器</title>
<style>
input[type="text"]:enabled{
            background: green;
            color: #ffffff;
        }
        input[type="text"]:disabled{
            background: #727272;
        }
    </style>
</head>
<body>
<h1 id="E-enabled伪类选择器与E-disabled伪类选择器">E:enabled伪类选择器与E:disabled伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" disabled>
<br />
<br />
学校：<input type="text" placeholder="请输入学校"></form>
</body>
</html>

Nach dem Login kopieren

Das laufende Ergebnis ist wie folgt:

Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

4. E: besuchte Selektor

:visited: Definieren Sie den Stil des besuchten Links

Sie können den Stil für den besuchten Link über den :visited</code festlegen > Pseudoklassenselektor. Der Beispielcode lautet wie folgt: <br/> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>read-only伪类选择器与E:read-write伪类选择器</title> <style> input[type="text"]:read-only{ background: #000; color: green; } input[type="text"]:read-write{ color: #ff6600; } </style> </head> <body> <h1 id="read-only伪类选择器与E-read-write伪类选择器">read-only伪类选择器与E:read-write伪类选择器</h1> <form> 姓名：<input type="text" placeholder="请输入姓名" value="winson" readonly> <br /> <br /> 学校：<input type="text" placeholder="请输入学校"></form> </body> </html></pre><div class="contentsignin">Nach dem Login kopieren</div></div></p>Das laufende Ergebnis ist wie folgt: <p><img src="https://img.php.cn/upload/image/950/708/406/165949913875271Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt" title="165949913875271Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt" alt="Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt"/><img src="https://img.php.cn/upload/image/358/879/819 /165949880722497Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt" title="165949880722497Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt" alt=" Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt"/></p><p><strong><span style="max-width:90%">5. E:Fokusauswahl</span></strong></p><p><code>:focus: Wird zur Angabe des Stils verwendet Wird vom Element verwendet, um den Cursorfokus zu erhalten

Der Beispielcode lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checked伪类选择器</title>
<style>
input[type="checkbox"]:checked{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1 id="checked伪类选择器">checked伪类选择器</h1>
<form>
房屋状态： <input type="checkbox">水 <input type="checkbox">电 <input type="checkbox">天然气 <input type="checkbox">宽带</form>
</body>
</html>

Nach dem Login kopieren

6. E:aktivierter Pseudoklassenselektor und E:deaktivierter Pseudoklassenselektor Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt 1) Der E:enabled-Selektor wird verwendet, um den Stil anzugeben, wenn sich das Element im verfügbaren Status befindet.

2) Der E:disabled-Selektor wird verwendet, um den Stil anzugeben, wenn sich das Element in einem deaktivierten Zustand befindet.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>default伪类选择器</title>
<style>
input[type="checkbox"]:default{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1 id="default伪类选择器">default伪类选择器</h1>
<form>
房屋状态： <input type="checkbox" checked>水 <input type="checkbox">电 <input type="checkbox">天然气 <input type="checkbox">宽带</form>
</body>
</html>

Nach dem Login kopieren

7. E:schreibgeschützter Pseudoklassenselektor und E:schreibgeschützter Pseudoklassenselektor

1Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

1), E:schreibgeschützter Selektor wird verwendet, um anzugeben, wann das Element ist Der Stil im schreibgeschützten Zustand.

2) Der E:read-write-Selektor wird verwendet, um den Stil anzugeben, wenn sich das Element in einem nicht schreibgeschützten Zustand befindet.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>indeterminate伪类选择器</title>
<style>
input[type="radio"]:indeterminate{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1 id="indeterminate伪类选择器">indeterminate伪类选择器</h1>
<form>
性别： <input type="radio">男 <input type="radio">女</form>
</body>
</html>

Nach dem Login kopieren

8, Pseudoklassenselektoren E:checked, E:default and indeterminate

1), E:cehcked Pseudoklassenselektor wird verwendet, um das Optionsfeld oder das Kontrollkästchen im Formular anzugeben Der Stil des Kontrollkästchens, wenn es ausgewählt ist. 2) Der E:default-Selektor wird verwendet, um den Stil des Optionsfelds oder Kontrollkästchens festzulegen, das beim Öffnen der Seite standardmäßig ausgewählt ist. 3) Der unbestimmte Selektor E: wird verwendet, um den Stil der gesamten Gruppe von Optionsfeldern anzugeben, wenn beim Öffnen der Seite kein einzelnes Optionsfeld in einer Gruppe von Optionsfeldern auf den ausgewählten Status gesetzt ist.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器E::selection</title>
<style>
::selection{
            background: green;
            color: #ffffff;
        }
        input[type="text"]::selection{
            background: #ff6600;
            color: #ffffff;
        }
    </style>
</head>
<body>
<h1 id="伪类选择器E-selection">伪类选择器E::selection</h1>
<input type="text" placeholder="文本">
</body>
</html>

Nach dem Login kopieren

🎜🎜🎜🎜Standardauswahl 🎜🎜

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>E:invalid伪类选择器与E:valid伪类选择器</title>
<style>
input[type="email"]:invalid{
            color: red;
        }
        input[type="email"]:valid{
            color: green;
        }
    </style>
</head>
<body>
<h1 id="E-invalid伪类选择器与E-valid伪类选择器">E:invalid伪类选择器与E:valid伪类选择器</h1>
<form>
<input type="email" placeholder="请输入邮箱"></form>
</body>
</html>

Nach dem Login kopieren

🎜🎜🎜

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>E:required伪类选择器与E:optional伪类选择器</title>
		<style>
			input[type="text"]:required{
        background: red;
        color: #ffffff;
    }
        input[type="text"]:optional{
            background: green;
            color: #ffffff;
        }
    </style>
	</head>
	<body>
		<h1 id="E-required伪类选择器与E-optional伪类选择器">E:required伪类选择器与E:optional伪类选择器</h1>
		<form>
			姓名：<input type="text" placeholder="请输入姓名" required>
			<br />
			<br />
			学校：<input type="text" placeholder="请输入学校"></form>
	</body>
</html>

Nach dem Login kopieren

🎜🎜🎜🎜🎜🎜9. Pseudoklassenselektor E::selection🎜🎜🎜🎜E:selection Pseudoklassenselektor wird verwendet Geben Sie an, wann das Element ist ausgewählt Der Stil des Staates. 🎜

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>E:in-range伪类选择器与E:out-of-range伪类选择器</title>
<style>
input[type="number"]:in-range{
            color: #ffffff;
            background: green;
 
        }
        input[type="number"]:out-of-range{
            background: red;
            color: #ffffff;
        }
    </style>
</head>
<body>
<h1 id="E-in-range伪类选择器与E-out-of-range伪类选择器">E:in-range伪类选择器与E:out-of-range伪类选择器</h1><input type="number" min="0" max="100" value="0">
</body>
</html>

Nach dem Login kopieren

🎜🎜🎜🎜🎜🎜10. E:ungültiger Pseudoklassenselektor und E:gültiger Pseudoklassenselektor🎜🎜🎜🎜1), E:ungültiger Pseudoklassenselektor wird verwendet, um anzugeben, wann der Elementinhalt nicht verwendet werden kann über HTML5 Die durch Attribute wie „require“ des Elements oder den Stil angegebene Prüfung, wenn der Elementinhalt nicht dem vom Element angegebenen Format entspricht. 🎜 2) Der Pseudoklassenselektor E:valid wird verwendet, um den Stil anzugeben, wenn der Elementinhalt die von HTML5 festgelegte Prüfung bestehen kann, indem Attribute wie „required“ des Elements verwendet werden oder der Elementinhalt dem vom Element angegebenen Format entspricht . 🎜rrreee🎜🎜🎜11. E:erforderlicher Pseudoklassenselektor und E:optionaler Pseudoklassenselektor🎜🎜🎜

1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
2)、E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>E:required伪类选择器与E:optional伪类选择器</title>
		<style>
			input[type="text"]:required{
        background: red;
        color: #ffffff;
    }
        input[type="text"]:optional{
            background: green;
            color: #ffffff;
        }
    </style>
	</head>
	<body>
		<h1 id="E-required伪类选择器与E-optional伪类选择器">E:required伪类选择器与E:optional伪类选择器</h1>
		<form>
			姓名：<input type="text" placeholder="请输入姓名" required>
			<br />
			<br />
			学校：<input type="text" placeholder="请输入学校"></form>
	</body>
</html>

Nach dem Login kopieren

12、E:in-range伪类选择器与E:out-of-range伪类选择器

1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>E:in-range伪类选择器与E:out-of-range伪类选择器</title>
<style>
input[type="number"]:in-range{
            color: #ffffff;
            background: green;
 
        }
        input[type="number"]:out-of-range{
            background: red;
            color: #ffffff;
        }
    </style>
</head>
<body>
<h1 id="E-in-range伪类选择器与E-out-of-range伪类选择器">E:in-range伪类选择器与E:out-of-range伪类选择器</h1><input type="number" min="0" max="100" value="0">
</body>
</html>

Nach dem Login kopieren

1Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

各UI元素状态伪类选择器受浏览器的支持情况

Wählen Sie das ausgewählte Radio- oder Kontrollkästchenelement im Formular
	E:aktiviert	Wählen Sie die im Formular verfügbaren Elemente aus
E:deaktiviert	In der Auswahl nicht verfügbar (d. h. deaktiviert). Formular) Elemente	3
E:gültig	Wählen Sie Elemente aus, deren im Formular ausgefüllter Inhalt den Anforderungen entspricht	3
E:ungültig	Wählen Sie Elemente aus, deren im Formular ausgefüllter Inhalt nicht den Anforderungen entspricht Anforderungen, wie z. B. ungültige URL oder E-Mail, oder entspricht nicht dem durch das Musterattribut angegebenen Muster 3
E:optional	Das erforderliche Attribut ist im Auswahlformular zulässig und die Elemente, die nicht als erforderlich angegeben sind	3
E:schreibgeschützt	Die Elemente im Auswahlformular, deren Status „Lesen“ ist nur	3
E:Lesen/Schreiben	Wählen Sie Elemente im Formular aus, die nicht schreibgeschützt sind.	3
E:Standard	Wählen Sie Optionsfelder oder Kontrollkästchen aus, die sich im ausgewählten Zustand befinden Standardmäßig ist der ausgewählte Status des Optionsfeld- oder Kontrollkästchen-Steuerelements auf den nicht ausgewählten Status festgelegt, auch wenn der Benutzer dies tun wird, und der im E:Standardselektor angegebene Stil ist weiterhin gültig	3
E: unbestimmt	Eine Gruppe von Optionsfeldern im Auswahlformular. Der Stil des gesamten Satzes von Optionsfeldern, wenn im Feld kein Optionsfeld ausgewählt ist. Wenn der Benutzer eines der Optionsfelder auswählt, ist der Stil nicht spezifiziert 3

选择器	Firefox	Safari	Opera	IE8	Chrome
E:hover	√	√	√	√	√
E:active	√	√	√	x	√
E:focus	√	√	√	√	√
E:enable	√	√	√	x	√
E:disable	√	√	√	x	√
E:read-only	√	x	√	x	x
E:read-write	√	x	√	x	x
E:checked	√	√	√	x	√
E:default	√	x	x	x	x
E:indeterminate	√	√	x	√	√
E:selection	√	√	√	x	√

（学习视频分享：web前端入门）

Das obige ist der detaillierte Inhalt vonEin Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vor By DDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

3 Wochen vor By DDD

<🎜>: Dead Rails - wie man jede Herausforderung abschließt

4 Wochen vor By DDD

Atomfall Guide: Gegenstandsstandorte, Questführer und Tipps

1 Monate vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7683

Java-Tutorial

1639

CakePHP-Tutorial

1393

Laravel-Tutorial

1286

PHP-Tutorial

1229

Related knowledge

So verwenden Sie Bootstrap in Vue Apr 07, 2025 pm 11:33 PM

Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.

Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Apr 08, 2025 pm 07:05 PM

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

So schreiben Sie geteilte Zeilen auf Bootstrap Apr 07, 2025 pm 03:12 PM

Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.

HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch Apr 12, 2025 am 12:02 AM

WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

So fügen Sie Bilder auf Bootstrap ein Apr 07, 2025 pm 03:30 PM

Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.

So richten Sie das Framework für Bootstrap ein Apr 07, 2025 pm 03:27 PM

Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.

So ändern Sie Bootstrap Apr 07, 2025 pm 03:18 PM

Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.

So verwenden Sie die Bootstrap -Taste Apr 07, 2025 pm 03:09 PM

Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen

See all articles