이 글에서는 부트스트랩에 대해 실제로 이야기하고 부트스트랩의 반응형 레이아웃을 소개하겠습니다. 모두에게 도움이 되길 바랍니다!
반응형 레이아웃은 웹사이트가 각 터미널마다 특정 버전을 만드는 것이 아니라 여러 터미널과 호환될 수 있음을 의미합니다. 이 개념은 모바일 인터넷 브라우징을 해결하기 위해 탄생했습니다.
네비게이션 바와 캐러셀은 대부분의 웹사이트 헤더에서 높은 비중을 차지하고 있으며, 특히 사이트맵 역할을 하는 네비게이션 바는 더욱 그렇습니다.
반응형 레이아웃에서는 내비게이션 바가 터미널 화면 크기에 따라 다양한 스타일을 표시해야 합니다.
공식 설명: 탐색 모음은 애플리케이션이나 웹사이트에서 탐색 페이지 헤더 역할을 하는 반응형 기본 구성 요소입니다. 모바일 장치에서는 접히고(열리고 닫힐 수 있음) 뷰포트 너비가 증가함에 따라 점차 수평으로 확장됩니다.
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 的标签属性，目的是让标签语义化，方便屏幕阅读器对其进行识别，同时也是为了方便特殊人群浏览。
在浏览一些官方网站时，首先映入眼帘的是左上角鲜明的公司 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의 태그 속성으로, 스크린 리더가 이를 쉽게 인식할 수 있도록 하는 것입니다. 특정 그룹의 사람들을 위한 탐색을 용이하게 합니다. 🎜🎜1.1.2 Advanced Navigation Bar🎜🎜🎜 일부 공식 웹사이트를 탐색할 때 가장 먼저 눈에 띄는 것은 독특한 회사 로고와 왼쪽 상단의 과장된 휠입니다. 브로드캐스트하기 위해 Bootstrap은 탐색에서 로고 위치를 예약합니다. 사용 방법은 외부 <div> 내부에 navbar-header 스타일이 있는 <div>를 추가하는 것입니다. ><div> ;를 선택하고 navbar-brand 스타일로 <a> 요소를 추가합니다. 🎜<!--代码部分-->
<div id="my-banner" class="carousel">
<!--放置小圆点，点击可以切换轮播-->
<ol class="carousel-indicators">
<!--加上样式active表示默认显示的轮播，data-slide-to="0"属性表示显示轮播的顺序-->
<li data-target="#my-banner" data-slide-to="0" class="active"></li>
<li data-target="#my-banner" data-slide-to="1"></li>
</ol>
<!--这里放置轮播显示的图片-->
<div class="carousel-inner">
<!--加上样式active表示默认显示的图片-->
<div class="item active">
<img src="http://www.mazey.net/img/upload/image/20170712/b1.jpg" alt="轮播">
</div>
<div class="item">
<img src="http://www.mazey.net/img/upload/image/20170712/b2.jpg" alt="轮播">
</div>
</div>
</div>
로그인 후 복사로그인 후 복사🎜렌더링: 🎜🎜 🎜 🎜때때로 1단계 탐색만으로는 충분하지 않을 수 있으며, 더 많은 콘텐츠를 표시하려면 2단계 탐색과 페어링해야 합니다. 사용 방법: 먼저 보조 탐색을 추가해야 하는 <li> 요소에 dropdown 스타일을 추가하고 <a> 요소 dropdown-toggle 및 data-toggle="dropdown" 속성, < 내부의 <a> ;li> code> 아래에 <ul> + <li> 조합을 넣고 <ul>에 스타일을 추가합니다. 태그 드롭다운 메뉴. 🎜<!--代码部分-->
<div class="carousel-caption">
<h5>夜里总是下雨</h5>
</div>
로그인 후 복사로그인 후 복사🎜렌더링: 🎜🎜 🎜 🎜새 속성 aria-haspopup="true" aria-expanded="false"가 여기에 표시됩니다. 마찬가지로 이 속성도 HTML5에 새로 추가된 속성입니다. 다음은 Segmentfault에 있는 Jiang Zhongqiu의 답변입니다. 지역 사회. 🎜🎜aria-haspopup: true는 클릭 시 메뉴나 플로팅 요소가 표시됨을 의미하고, false는 팝업 효과가 없음을 의미합니다. aria-expanded:는 확장된 상태를 나타냅니다. 기본값은 정의되지 않음입니다. 이는 현재 확장 상태를 알 수 없음을 의미합니다. 기타 선택 값: true는 요소가 확장되었음을 나타내고, false는 요소가 확장되지 않았음을 나타냅니다. 🎜🎜일반적으로 표시되는 드롭다운 상자에는 일반적으로 아래쪽 화살표 기호 ▼가 있습니다. 마찬가지로 이 효과는 Bootstrap에서도 지원되지만 자체 글꼴 라이브러리 Glyphicons 글꼴 아이콘을 도입해야 합니다. 🎜🎜공식 소개: Bootstrap에는 Glyphicon Halflings의 250개 이상의 글꼴 아이콘이 포함되어 있습니다. Glyphicons Halflings는 일반적으로 유료이지만 작성자는 Bootstrap이 무료로 사용할 수 있도록 허용합니다. 감사한 마음을 표현하기 위해 글리피콘 이용시 친근한 링크를 추가해주시길 바라겠습니다. 🎜使用方法：新建一个 <span> 元素，然后在里面加上样式 glyphicon glyphicon-triangle-bottom。
Glyphicons 字体图标使用示例：
<!--代码部分-->
<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>
<li>Glyphicons 字体图标和文本之间添加一个空格，不然会影响样式（padding）的正确显示。
<li>服务器需要正确添加相应的 MIME 类型，否则加载字体会报 404 错误。
另外这里的箭头也可以使用 Bootstrap 自带的样式 caret 来实现，这里的箭头是用 CSS 实现了，使用方法：<span class="caret"></span>。
1.1.3 响应式导航栏
在手机端浏览网站的时候常看到几个横线（≡）组成的导航向导，Bootstrap 作为一个移动设备优先也是支持这样的需求的，响应式导航的使用的方法比较固定，首先在导航标题 <div class="navbar-header"> 内加上一段固定写法的代码；然后在需要在小屏时折叠的 <ul> 元素外包一层样式 collapse navbar-collapse 的 <div> 元素，并给这个元素加上任意名称的 ID，例如：id="navigation-collapse"；最后在响应式按钮 <button> 元素上加上 data-target 属性指向要折叠的内容 id，例如：data-target="#navigation-collapse"。
<!--代码部分-->
<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>
로그인 후 복사로그인 후 복사
效果图：
1.2 轮播
图片轮播是网站的重要组成部分之一，常用来放活动广告或企业宣传图，有时也叫做“幻灯片”，Bootstrap 中的轮播效果是由 JavaScript 插件 Carousel 来实现的。
1.2.1 基础轮播
轮播的使用方法也是相对固定的，特殊场景按需求修改即可。需要注意的是需要给最外层 <div> 元素加上一个 id，并在小圆点出指向这个 id。
<!--代码部分-->
<div id="my-banner" class="carousel">
<!--放置小圆点，点击可以切换轮播-->
<ol class="carousel-indicators">
<!--加上样式active表示默认显示的轮播，data-slide-to="0"属性表示显示轮播的顺序-->
<li data-target="#my-banner" data-slide-to="0" class="active"></li>
<li data-target="#my-banner" data-slide-to="1"></li>
</ol>
<!--这里放置轮播显示的图片-->
<div class="carousel-inner">
<!--加上样式active表示默认显示的图片-->
<div class="item active">
<img src="http://www.mazey.net/img/upload/image/20170712/b1.jpg" alt="轮播">
</div>
<div class="item">
<img src="http://www.mazey.net/img/upload/image/20170712/b2.jpg" alt="轮播">
</div>
</div>
</div>
로그인 후 복사로그인 후 복사
效果图：
1.2.2 进阶的轮播
一个完整的轮播应具有自动播放、点击切换、悬浮停止、外加说明文字功能，别担心，这些 Bootstrap 通通都有！
1.2.2.1 自动播发
最外层 <div> 元素添加属性 data-ride="carousel" 和样式 slide（使轮播播放更平滑），如：。此时轮播的自动播放时间为 5 秒（默认），如想改变此值设置属性 data-interval="你想要的值"，如我想要 3 秒（3000 ms）轮播一次则设置 data-interval="3000"。另外轮播是默认悬浮停止播放的（data-pause="hover"），如想禁止悬浮播放设置属性 data-pause="false" 即可。
1.2.2.2 添加文字
在轮播图片 <img> 元素下面添加样式 carousel-caption 的 <div>，里面存放文字便可正确显示在轮播上面。
<!--代码部分-->
<div class="carousel-caption">
<h5>夜里总是下雨</h5>
</div>
로그인 후 복사로그인 후 복사
1.2.2.3 点击切换
在轮播图片下面放置两个 <a> 元素，href 指向轮播 id，添加属性 data-slide="prev/next 向前/向后"。
<!--代码部分-->
<!--<a>元素的href指向轮播id-->
<a class="left carousel-control" href="#my-banner" data-slide="prev" role="button">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#my-banner" data-slide="next" role="button">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
로그인 후 복사
轮播代码示例：
<!--代码部分-->
<div id="my-banner" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="false">
<!--放置小圆点，点击可以切换轮播-->
<ol class="carousel-indicators">
<!--加上样式active表示默认显示的轮播，data-slide-to="0"属性表示显示轮播的顺序-->
<li data-target="#my-banner" data-slide-to="0" class="active"></li>
<li data-target="#my-banner" data-slide-to="1"></li>
</ol>
<!--这里放置轮播显示的图片-->
<div class="carousel-inner">
<!--加上样式active表示默认显示的图片-->
<div class="item active">
<img src="http://www.mazey.net/img/upload/image/20170712/b1.jpg" alt="轮播">
<div class="carousel-caption">
<h5>夜里总是下雨</h5>
</div>
</div>
<div class="item">
<img src="http://www.mazey.net/img/upload/image/20170712/b2.jpg" alt="轮播">
<div class="carousel-caption">
<h5>后除提醒君の世界</h5>
</div>
</div>
</div>
<!--<a>元素的href指向轮播id-->
<a class="left carousel-control" href="#my-banner" data-slide="prev" role="button">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#my-banner" data-slide="next" role="button">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
로그인 후 복사
效果图：
二、实战
试着组合栅格系统 + 导航栏 + 轮播布局一个响应式页面。
电脑端效果图：
移动端效果图：
其实实现这样一个效果很简单，首先看一下栅格参数如何在多种屏幕设备上工作的。
뉴스 및 정보 상자에 동시에 스타일을 추가하세요 col-xs-*，col-sm-* 和 col-md-*，小屏时（屏幕宽度 ＜ 992px）col-xs-*，col-sm-* 生效，col-md-* 失效；大屏时（屏幕宽度 ≥ 992px）col-md-* 生效，col-xs-*，col-sm-* 失效。例如：<div class="col-xs-12 col-sm-12 col-md-6">新闻</div><div class="col-xs-12 col-sm-12 col-md-6">资讯</div>.
데모 주소: https://mazey.cn/bootstrap-blueprints/lesson-second-navigation/index.html
소스 코드 주소: https://github.com/mazeyqian/bootstrap-blueprints/tree/master / 레슨-두 번째 탐색.
부트스트랩에 대한 자세한 내용을 보려면 부트스트랩 기본 튜토리얼을 방문하세요! !
위 내용은 Bootstrap의 반응형 레이아웃에 대한 관련 지식 포인트에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
