집 > 기사 > 웹 프론트엔드 > 부트스트랩에서 캐럿은 무엇을 의미합니까?

부트스트랩에서 캐럿은 무엇을 의미합니까?

WBOY원래의: 2022-08-01 16:52:112023검색

부트스트랩에서 캐럿은 삼각형 기호 아이콘을 나타냅니다. 요소에 "캐럿" 클래스를 추가하면 해당 요소에 드롭다운 메뉴 기능이 있음을 나타내는 삼각형 기호 아이콘이 제공됩니다. 위로 메뉴를 클릭하면 삼각형 기호가 자동으로 반전되어 표시되며 구문은 ""입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 부트스트랩 버전 5, DELL G3 컴퓨터

부트스트랩에서 캐럿은 무엇을 의미합니까? 부트스트랩에서 캐럿은 삼각형 기호 아이콘을 나타냅니다.

.caret 클래스를 추가하면 요소에 드롭다운 메뉴 기능이 있음을 나타내는 삼각형 기호 아이콘이 제공됩니다.

그리고 팝업 메뉴에는 삼각형 기호가 자동으로 반전되어 표시됩니다. 예:

<!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>

출력 결과:

부트스트랩에서 캐럿은 무엇을 의미합니까?

부트스트랩에서 캐럿은 무엇을 의미합니까? 부트스트랩에서 캐럿은 삼각형 기호 아이콘을 나타냅니다.

관련 기사