Wofür steht Caret beim Bootstrap?-Front-End-Fragen und Antworten-php.cn

Wofür steht Caret beim Bootstrap?

WBOY

Freigeben： 2022-08-01 16:52:11

Original

2058 Leute haben es durchsucht

In Bootstrap stellt Caret das Dreieckssymbol dar. Durch Hinzufügen der Klasse „Caret“ zu einem Element erhält das Element ein Dreieckssymbol, um anzuzeigen, dass das angegebene Element die Funktion eines Dropdown-Menüs hat. Up-Menü, das Dreieckssymbol wird automatisch invertiert angezeigt und die Syntax ist „“.

Wofür steht Caret beim Bootstrap?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Bootstrap-Version 5, DELL G3-Computer

Wofür steht Caret in Bootstrap? In Bootstrap stellt Caret das Dreieckssymbol dar

Wenn Sie die .caret-Klasse hinzufügen, wird ein Dreieckssymbol angezeigt, um anzuzeigen, dass ein Element die Funktion eines Dropdown-Menüs hat.

Und im sich öffnenden Menü wird das Dreieckssymbol automatisch invertiert angezeigt. Zum Beispiel:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- IE将使用最新的引擎渲染网页 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 页面的宽度与设备屏幕的宽度一致
         初始缩放比例 1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <meta name="author" content="www.cnblogs.com/kemingli">
    <!-- 引入外部bootstrap的css文件(压缩版)，版本是3.3.7 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <!-- start : demo -->
    <div>
        <!-- span空着，不写内容 -->
        <span></span>
    </div>
    <!-- end : demo -->
    <!-- NO.1 加载框架依赖的jQuery文件(压缩版)，版本是1.12.4 -->
    <script src="bootstrap/js/jquery.min.js"></script>
    <!-- NO.2 加载Bootstrap的所有JS插件，版本是3.3.7 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnis:

Verwandte Empfehlungen:

Bootstrap-Tutorial Wofür steht Caret beim Bootstrap?

Das obige ist der detaillierte Inhalt vonWofür steht Caret beim Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!