집 >웹 프론트엔드 >부트스트랩 튜토리얼 >Bootstrap의 탐색 모음에 대해 이야기해 보겠습니다.
Bootstrap의 탐색 모음에 대해 이야기해 보겠습니다.
- 青灯夜游앞으로
- 2021-03-31 09:49:563763검색
내비게이션 바(navbar)와 내비게이션(nav)의 차이점은 단어 하나 뿐이고, "bar"라는 단어가 추가로 있습니다. 실제로 Bootstrap 프레임워크에서는 여전히 분명히 다릅니다. 내비게이션 바(navbar)에는 배경색이 있으며, 내비게이션 바는 순수 링크(내비게이션과 유사), 양식 또는 양식과 내비게이션의 조합일 수 있습니다. 이번 글에서는 Bootstrap 네비게이션 바를 자세히 소개하겠습니다.
기본 네비게이션 바
Bootstrap 프레임워크에서는 네비게이션 바와 네비게이션이 외관상 크게 다르지 않지만, 실제 사용에서는 네비게이션 바가 네비게이션보다 훨씬 더 복잡합니다.
내비게이션 바는 애플리케이션이나 웹사이트에서 탐색 헤더로 사용되는 반응형 기본 구성 요소입니다. 모바일 장치에서는 접을 수 있고 열거나 닫을 수 있으며 뷰포트 너비가 증가하면 점차 수평으로 확장됩니다.
기본 탐색 모음을 만들 때 주로 다음 단계를 따릅니다.
1 , 먼저 클래스 이름을 추가합니다. 네비게이션 목록 생성을 기반으로 "navbar-nav" (
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
Navigation bar 색상은 ".navbar-default"를 통해 제어됩니다.
.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
}
navbar-nav 스타일은 탐색 .nav를 기반으로 메뉴 항목의 부동 여백과 내부 및 외부 여백을 다시 조정합니다. 색상 및 기타 스타일 설정도 포함되지 않으며 색상 및 기타 스타일은 상위 컨테이너 "navbar-default"
와 함께 구현됩니다. [참고] <nav></nav>를 사용하는 것이 가장 좋습니다. 요소를 사용하는 경우 일반 <p></p> 요소인 경우 탐색 표시줄에 role="navigation" 속성을 설정해야 합니다. 보조 장치는 이것이 내비게이션 영역임을 명확하게 알 수 있습니다<nav></nav> 元素，如果使用的是通用的 <p></p> 元素的话，务必为导航条设置 role="navigation" 属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域
<div> <ul> <li><a>网站首页</a></li> <li><a>系列教程</a></li> <li><a>名师介绍</a></li> <li><a>成功案例</a></li> <li><a>关于我们</a></li> </ul> </div>
相关推荐：《bootstrap教程》
导航条部件
【标题】
在Web页面制作中，常常在菜单前面都会有一个标题（文字字号比其它文字稍大一些），其实在Bootstrap框架也做了这方面考虑，其通过“navbar-header”和“navbar-brand”来实现
<div> <div> <a>小火柴的蓝色理想</a> </div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> <li><a>Bootstrap</a></li> <li><a>jQuery</a></li> </ul> </div>
【品牌图标】
将导航条内放置品牌标志的地方替换为 <img alt="Bootstrap의 탐색 모음에 대해 이야기해 보겠습니다." > 元素即可展示自己的品牌图标。由于 .navbar-brand 已经被设置了内补（padding）和高度（height），需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置
<div> <div> <a> <img alt="Bootstrap의 탐색 모음에 대해 이야기해 보겠습니다." > </a> </div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> <li><a>Bootstrap</a></li> <li><a>jQuery</a></li> </ul> </div>
【二级菜单】
在基础导航条中对菜单提供了当前状态，禁用状态，悬浮状态等效果，而且也可以带有二级菜单的导航条
<div> <ul> <li><a>网站首页</a></li> <li> <a>系列教程<span></span></a> <ul> <li><a>CSS3</a></li> <li><a>JavaScript</a></li> <li><a>PHP</a></li> </ul> </li> <li><a>关于我们</a></li> </ul> </div>
【部件排列】
通过添加 .navbar-left 和 .navbar-right工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。例如，要对齐导航链接，就要把它们放在个分开的、应用了工具类的
- 标签里
这些类是 .pull-left 和 .pull-right 的 mixin 版本，但是他们被限定在了媒体查询（media query）中，这样可以更容易的在各种尺寸的屏幕上处理导航条组件
[注意]导航条目前不支持多个.navbar-right类。为了让内容之间有合适的空隙，最后一个.navbar-right
<div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> <li><a>Bootstrap</a></li> <li><a>jQuery</a></li> </ul> <form> <div> <input> </div> <button>搜索</button> </form> </div>
관련 권장 사항: " bootstrap tutorial"
<p></p>Navigation Bar widget
<div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> <button>Sign in</button> </div>🎜
🎜🎜🎜【브랜드 아이콘】🎜🎜🎜 내비게이션 바에서 브랜드 로고가 있는 곳을 <img alt="Bootstrap의 탐색 모음에 대해 이야기해 보겠습니다." > 요소를 사용하여 자신의 브랜드 아이콘을 표시합니다. .navbar-brand에는 패딩과 높이가 설정되어 있으므로 상황에 맞게 일부 CSS 코드를 추가하여 기본 설정을 재정의해야 합니다🎜<div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> <p>Signed in as huochai</p> </div>🎜
🎜【2단계 메뉴】🎜🎜🎜 기본 탐색에서 바는 다음을 제공합니다. 현재 상태, 비활성화된 상태, 일시 중지된 상태 및 기타 메뉴 효과를 표시하며 보조 메뉴가 있는 탐색 모음을 가질 수도 있습니다🎜<div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> <p>Signed in as <a>huochai</a></p> </div>🎜
🎜🎜🎜【부품 배치】🎜🎜🎜 .navbar-left 및 .navbar-right 도구 클래스 추가 탐색 링크 , 양식, 버튼 또는 텍스트 정렬. 두 클래스 모두 CSS를 통해 특정 방향으로 부동 스타일을 설정합니다. 예를 들어 탐색 링크를 정렬하려면 유틸리티 클래스가 적용된 별도의 - 태그에 배치하세요. 🎜🎜 이 클래스는 .pull-left 및 .pull-right 의 혼합 버전이지만 미디어 쿼리에서는 제한됩니다. 다양한 화면 크기에서 탐색 모음 구성 요소를 더 쉽게 처리할 수 있습니다🎜🎜 [참고] 탐색 모음은 현재 여러
.navbar-right 클래스를 지원하지 않습니다. 콘텐츠 사이에 적절한 공간을 허용하기 위해 마지막 .navbar-right 요소는 음수 여백을 사용합니다. 이 클래스를 사용하는 요소가 여러 개 있으면 해당 여백이 예상대로 표시되지 않습니다.🎜🎜🎜[Form]🎜🎜🎜 일부 탐색 모음에는 검색 양식이 있으며 Bootstrap 프레임워크는 "navbar -form"을 제공합니다. 사용법은 다음과 같습니다. 매우 간단합니다. navbar 컨테이너에 navbar-form 클래스 이름이 있는 양식을 배치하기만 하면 됩니다🎜🎜 navbar-left는 왼쪽 부동을 구현하고 navbar-right는 오른쪽 부동을 구현합니다🎜body { padding-top: 70px; }
body { padding-bottom: 70px; }🎜🎜🎜【按钮】
对于不包含在 <form></form> 中的 <button></button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。有一些对于为辅助设备提供可识别标签的方法，例如， aria-label、aria-labelledby 或者 title 属性。如果这些方法都没有，屏幕阅读器将使用 placeholder 属性（如果这个属性存在的话），但是请注意，使用 placeholder 代替其他识别标签的方式是不推荐的
[注意]就像标准的 按钮类 一样，.navbar-btn 可以被用在 <a></a> 和 <input> 元素上。然而，在 .navbar-nav 内，.navbar-btn 和标准的按钮类都不应该被用在 <a></a> 元素上。
<div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> <button>Sign in</button> </div>
把文本包裹在 .navbar-text中时，为了有正确的行距和颜色，通常使用 <p></p> 标签
<div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> <p>Signed in as huochai</p> </div>
【非导航链接】
可以在标准的导航组件之外添加标准链接，使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置
<div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> <p>Signed in as <a>huochai</a></p> </div>
导航条位置
很多情况下，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了g两种固定导航条的方式：
☑ .navbar-fixed-top：导航条固定在浏览器窗口顶部
☑ .navbar-fixed-bottom：导航条固定在浏览器窗口底部
使用方法很简单，只需要在制作导航条最外部容器navbar上追加对应的类名即可
这个固定的导航条会遮住页面上的其它内容，除非给 元素底部设置了 padding。提示：导航条的默认高度是 50px
body { padding-top: 70px; }
body { padding-bottom: 70px; }
<nav> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> </nav> <p>测试内容<br><br>测试内容<br><br>测试内容<br><br>测试内容<br><br>测试内容<br><br>测试内容<br><br>测试内容</p> <nav> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> </nav>
【静止在顶部】
通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失
<nav> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> </nav> <p>测试内容<br><br><br>测试内容<br><br><br>测试内容<br><br><br>测试内容<br><br><br>测试内容<br><br><br>测试内容<br><br><br>测试内容</p>
响应式导航条
Bootstrap的响应式导航条实现如下：
1、保证在窄屏时需要折叠的内容必须包裹在带一个p内，并且为这个p加入collapse、navbar-collapse两个类名。最后为这个p添加一个class类名或者id名
<div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> </div>
或者
<div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> </div>
2、保证在窄屏时要显示的图标样式（固定写法）：
<button> <span>Toggle Navigation</span> <span></span> <span></span> <span></span> </button>
3、并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的p来决定。如
<button> <span>Toggle Navigation</span> <span></span> <span></span> <span></span> </button>
或者，对应class="example"
<button> <span>Toggle Navigation</span> <span></span> <span></span> <span></span> </button>
<div> <div> <button> <span>Toggle Navigation</span> <span></span> <span></span> <span></span> </button> </div> <div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> </div> </div>
反色导航条
反色导航条其实是Bootstrap框架提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改
<div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> </div>
更多编程相关知识，请访问：编程视频！！
위 내용은 Bootstrap의 탐색 모음에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!