>웹 프론트엔드 >CSS 튜토리얼 >나만의 부트스트랩 템플릿을 만드는 방법

나만의 부트스트랩 템플릿을 만드는 방법

不言
不言원래의
2018-06-21 16:45:381947검색

이 글은 주로 자신만의 부트스트랩 템플릿을 만드는 예시를 소개합니다. 필요한 친구들은 참고하면 됩니다

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <!-- Bootstrap不支持IE的兼容模式,加入此标签以确保在每个被支持的IE浏览器中保持最好的页面展现效果 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 由于Bootstrap 3是移动设备优先,加入此标签是为了确保适当的绘制和触屏缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap-Template-01</title>
    <!-- 最新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="<a href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css</a>">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn&#39;t work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="<a href="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script">http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script</a>>
        <script src="<a href="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script">http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script</a>>
    <![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
    <!-- 所有 Bootstrap 插件都依赖 jQuery,因此jQuery必须在Bootstrap之前引入 -->
    <script src="<a href="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script">http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script</a>>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="<a href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script">http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script</a>>
</body>
</html>

아래에서 몇 가지 핵심 사항에 대해 이야기하겠습니다

【1】Bootstrap은 HTML5 문서 유형을 사용하므로 주의하시기 바랍니다. 첫 번째 줄이 우리가 일반적으로 쓰는 것과 다른지 확인하세요.

[2] 중고 lang, 이건 중국입니다. 물론 간체 중국어를 사용합니다. 물론 여기서는 인터넷에서 누군가가 이 zn-cn이 현재 상황에 더 이상 적용되지 않는다고 말하는 것을 봤습니다. 구체적으로는 바이두(Baidu)입니다.

【3】단일 태그는 닫히지 않습니다. HTML5에 대해 자세히 알아보세요.

[4] IE가 9 미만이고 HTML5를 별로 지원하지 않는 경우 호환성 처리를 추가했습니다. 물론 그렇게 하면 IE9 이하를 직접 차단하고 사용자가 브라우저를 업그레이드할 수 있는 페이지를 제공합니다. 사용자는 보기 흉한 페이지를 보게 될 것입니다. 그런데 굳이 귀찮게 할 이유가 없습니까? ! !

【5】JQuery가 버전 2.x 대신 버전 1.102를 사용하는 이유는 무엇입니까? 버전 1.9.x는 ie8을 지원하는 반면 버전 2.x는 ie9 이상을 지원하는 것으로 보이므로 여기서는 1.9.x보다 큰 버전을 사용합니다. 물론 앞서 설명한 것처럼 ie8을 지원할 필요는 없습니다. 4. 말한 것과 마찬가지로 ie9 이하의 브라우저를 차단합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 추천:

bootstrap3.0의 그리드 시스템 원리에 대하여

무료 부트스트랩 템플릿을 다운로드하고 싶다면 bootstrap template 칼럼을 방문하세요!

위 내용은 나만의 부트스트랩 템플릿을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.