简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > 부트스트랩 튜토리얼 > 본문

Bootstrap의 반응형 레이아웃에 대한 관련 지식 포인트에 대한 간략한 분석

青灯夜游
풀어 주다： 2022-09-09 10:25:29
앞으로
2717명이 탐색했습니다.

이 글에서는 부트스트랩에 대해 실제로 이야기하고 부트스트랩의 반응형 레이아웃을 소개하겠습니다. 모두에게 도움이 되길 바랍니다!

Bootstrap의 반응형 레이아웃에 대한 관련 지식 포인트에 대한 간략한 분석

반응형 레이아웃은 웹사이트가 각 터미널마다 특정 버전을 만드는 것이 아니라 여러 터미널과 호환될 수 있음을 의미합니다. 이 개념은 모바일 인터넷 브라우징을 해결하기 위해 탄생했습니다.

네비게이션 바와 캐러셀은 대부분의 웹사이트 헤더에서 높은 비중을 차지하고 있으며, 특히 사이트맵 역할을 하는 네비게이션 바는 더욱 그렇습니다.

반응형 레이아웃에서는 내비게이션 바가 터미널 화면 크기에 따라 다양한 스타일을 표시해야 합니다.

1. 지식 포인트

1.1 탐색 모음

공식 설명: 탐색 모음은 애플리케이션이나 웹사이트에서 탐색 페이지 헤더 역할을 하는 반응형 기본 구성 요소입니다. 모바일 장치에서는 접히고(열리고 닫힐 수 있음) 뷰포트 너비가 증가함에 따라 점차 수평으로 확장됩니다.

1.1.1 기본 네비게이션 바

Bootstrap을 사용하기 전에는 <ul> + <li>를 사용하여 네비게이션 바를 구성하는 것이 관례였습니다. [관련 권장사항: "부트스트랩 튜토리얼<ul> + <li> 来构造一个导航栏。【相关推荐：《bootstrap教程》】

<!--代码部分-->
<style>
.navigation-past{
    list-style: none;
}
.navigation-past>li{
    float: left;
    padding: 8px;
}
.navigation-past>li>a{
    text-decoration: none;
    color: #000;
}
.active-past{
    background: #E7E7E7;
}
</style>
<ul class="navigation-past">
	   <!--选中-->
    <li class="active-past"><a href="#">Navigation First</a></li>
    <li><a href="#">Navigation Second</a></li>
    <li><a href="#">Navigation Third</a></li>
    <li><a href="#">Navigation Fourth</a></li>
    <li><a href="#">Navigation Fifth</a></li>
</ul>
로그인 후 복사

效果图：

使用 Bootstrap 的话，便是在熟悉的这个构造上加上一些修饰即可。首先在 <ul> 外面套一层 <div>，并加上样式 navbar navbar-default；然后给里面的 <ul> 加上样式 nav navbar-nav；最后，给选中的部分加上样式 active。一个最基本的 Bootstrap 导航便完成了。

<!--代码部分-->
<div class="navbar navbar-default" role="navigation">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Navigation First</a></li>
        <li><a href="#">Navigation Second</a></li>
        <li><a href="#">Navigation Third</a></li>
        <li><a href="#">Navigation Fourth</a></li>
        <li><a href="#">Navigation Fifth</a></li>
    </ul>
</div>
로그인 후 복사

效果图：

这里在最外层加了一个 role="navigation" 的属性，这里是 HTML5 的标签属性，目的是让标签语义化，方便屏幕阅读器对其进行识别，同时也是为了方便特殊人群浏览。

1.1.2 进阶的导航栏

在浏览一些官方网站时，首先映入眼帘的是左上角鲜明的公司 LOGO 和夸张的轮播 ，Bootstrap 在导航中预留了 LOGO 的位置。使用方法是在外层 <div> 里面加一个样式 navbar-header 的 <div>，这个 <div> 内再加一个样式 navbar-brand 的 <a> 元素。

<!--代码部分-->
<div class="navbar navbar-default" role="navigation">
			<div class="navbar-header">
						<a href="#" class="navbar-brand">LOGO</a>
			</div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Navigation First</a></li>
        <li><a href="#">Navigation Second</a></li>
        <li><a href="#">Navigation Third</a></li>
        <li><a href="#">Navigation Fourth</a></li>
        <li><a href="#">Navigation Fifth</a></li>
    </ul>
</div>
로그인 후 복사

效果图：

有的时候一级导航是不够的，需要搭配二级导航展示更多的内容。使用方法：首先在需要加二级导航的 <li> 元素中添加样式 dropdown，<a> 元素中添加样式 dropdown-toggle 和属性 data-toggle="dropdown"；然后在 <li> 里面 <a> 下面在放一个 <ul> + <li> 组合，<ul> 标签添加样式 dropdown-menu。

<!--代码部分-->
<div class="navbar navbar-default" role="navigation">
			<div class="navbar-header">
						<a href="#" class="navbar-brand">LOGO</a>
			</div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Navigation First</a></li>
        <li><a href="#">Navigation Second</a></li>
        <li><a href="#">Navigation Third</a></li>
        <li><a href="#">Navigation Fourth</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                Navigation Fifth
                <ul class="dropdown-menu">
                    <li><a href="#">Sub-Navigation First</a></li>
                    <li><a href="#">Sub-Navigation Second</a></li>
                    <li><a href="#">Sub-Navigation Third</a></li>
                </ul>
            </a>
        </li>
    </ul>
</div>
로그인 후 복사

效果图：

这里又出现新的属性 aria-haspopup="true" aria-expanded="false"，同样的，这也是 HTML5 新加的属性，这里引用 Segmentfault 社区姜中秋的回答。

aria-haspopup: true 表示点击的时候会出现菜单或是浮动元素；false 表示没有 pop-up 效果。aria-expanded: 表示展开状态。默认为 undefined, 表示当前展开状态未知。其它可选值：true 表示元素是展开的；false"]

<!--代码部分-->
<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        Navigation Fifth <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
        <ul class="dropdown-menu">
            <li><a href="#">Sub-Navigation First</a></li>
            <li><a href="#">Sub-Navigation Second</a></li>
            <li><a href="#">Sub-Navigation Third</a></li>
        </ul>
    </a>
</li>
로그인 후 복사
로그인 후 복사

렌더링 ：

🎜부트스트랩을 사용하는 경우 , 이 친숙한 구조에 몇 가지 수정 사항을 추가하기만 하면 됩니다. 먼저 <ul> 외부에 <div> 레이어를 배치하고 navbar navbar-default 스타일을 추가합니다. code><ul> nav navbar-nav 스타일을 추가하고, 마지막으로 선택한 부분에 active 스타일을 추가합니다. 가장 기본적인 부트스트랩 탐색이 완료되었습니다. 🎜 
<!--代码部分-->
<div class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
						<!--以下为固定写法，用到的时候复制粘贴即可-->
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navigation-collapse">
          <span class="sr-only">Toggle Navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">LOGO</a>
    </div>
    <div class="collapse navbar-collapse" id="navigation-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Navigation First</a></li>
            <li><a href="#">Navigation Second</a></li>
            <li><a href="#">Navigation Third</a></li>
            <li><a href="#">Navigation Fourth</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    Navigation Fifth <span class="caret"></span>
                    <ul class="dropdown-menu">
                        <li><a href="#">Sub-Navigation First</a></li>
                        <li><a href="#">Sub-Navigation Second</a></li>
                        <li><a href="#">Sub-Navigation Third</a></li>
                    </ul>
                </a>
            </li>
        </ul>
    </div>
</div>
로그인 후 복사
로그인 후 복사
🎜렌더링: 🎜🎜 🎜 🎜A role="navigation" 속성은 HTML5의 태그 속성으로, 스크린 리더가 이를 쉽게 인식할 수 있도록 하는 것입니다. 특정 그룹의 사람들을 위한 탐색을 용이하게 합니다. 🎜

위 내용은 Bootstrap의 반응형 레이아웃에 대한 관련 지식 포인트에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
bootstrap
원천：cnblogs.com
이전 기사：부트스트랩은 적응형인가요? 다음 기사：부트스트랩 프레임워크를 가져오는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Nuxt.js에 jQuery를 설치하는 단계 프로젝트에 jQuery를 추가하려고 하는데 정의되지 않았다는 오류가 발생합니다. 플러그인:[{src:'~/plugins/js/svgSprite.js',mode:'...
에서 2023-11-06 16:41:50
0
1
225
npm run dev를 실행한 후에도 Laravel 9는 여전히 App.css 및 App.js를 찾을 수 없습니다. Laravel을 처음 접하는 저는 시작하기 전에 실제로 Laravel9에 대한 문서를 살펴보았는지 확인했지만, 놓친 경우를 대비해 제공된 링크에서 app.css ...
에서 2023-10-26 23:41:22
0
1
489
Bootstrap 4의 그리드 시스템 중단점 사용자 정의 디자인에 데스크톱에서 태블릿으로 또는 xl에서 lg로 각각 1280개의 중단점이 필요한 응용 프로그램이 있습니다. 그러나 Bootstrap 자체에는 1200에 x...
에서 2023-10-18 23:01:50
0
2
197
헤더 이미지, 텍스트, 버튼을 반응형으로 만드는 방법 Bootstrap5를 사용하여 웹사이트를 만들고 있습니다. 웹사이트 헤더에서는 Bootstrap의 캐러셀을 헤더로 사용하고 있습니다. 캐러셀 이미지를 사용하면 텍...
에서 2023-09-17 09:51:15
0
1
283
내 Bootstrap 탐색 모음이 올바르게 렌더링되지 않는 이유는 무엇입니까? Bootstrap4를 사용하여 탐색 모음을 만들려고 하는데 코드가 작동하지 않는 것 같습니다. 내 코드는 nav 브랜드에 대한 몇 가지 변경 사항만 제외하면 튜토...
에서 2023-09-16 16:14:06
0
1
522
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！