本篇文章带大家聊聊Bootstrap实战，介绍一下Bootstrap的响应式布局，希望对大家有所帮助！
响应式布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
导航栏与轮播在大部分网站的头部占很高的比重，特别是导航栏，扮演着网站地图的角色。
在响应式布局中，要求导航栏能够根据终端屏幕大小显示不同的样式。
官方解释：导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
使用 Bootstrap 之前，习惯用来构造一个导航栏。【相关推荐：《bootstrap教程》】
效果图：
使用 Bootstrap 的话，便是在熟悉的这个构造上加上一些修饰即可。首先在 效果图： 这里在最外层加了一个 在浏览一些官方网站时，首先映入眼帘的是左上角鲜明的公司 LOGO 和夸张的轮播 ，Bootstrap 在导航中预留了 LOGO 的位置。使用方法是在外层 效果图： 有的时候一级导航是不够的，需要搭配二级导航展示更多的内容。使用方法：首先在需要加二级导航的 效果图： 这里又出现新的属性 平常所见到的下拉框一般都有一个向下的箭头符号 ▼，同样的，在 Bootstrap 中也支持这一效果，只不过需要引入她自带的字体库 Glyphicons 字体图标。 官方介绍：Bootstrap 包括 250 多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了表示感谢，希望你在使用时尽量为Glyphicons添加一个 友情链接。 使用方法：新建一个 Glyphicons 字体图标使用示例： 效果图： 注意： 另外这里的箭头也可以使用 Bootstrap 自带的样式 在手机端浏览网站的时候常看到几个横线（≡）组成的导航向导，Bootstrap 作为一个移动设备优先也是支持这样的需求的，响应式导航的使用的方法比较固定，首先在导航标题 效果图： 图片轮播是网站的重要组成部分之一，常用来放活动广告或企业宣传图，有时也叫做“幻灯片”，Bootstrap 中的轮播效果是由 JavaScript 插件 Carousel 来实现的。 轮播的使用方法也是相对固定的，特殊场景按需求修改即可。需要注意的是需要给最外层 效果图： 一个完整的轮播应具有自动播放、点击切换、悬浮停止、外加说明文字功能，别担心，这些 Bootstrap 通通都有！ 最外层 在轮播图片 在轮播图片下面放置两个 轮播代码示例： 效果图： 试着组合栅格系统 + 导航栏 + 轮播布局一个响应式页面。 电脑端效果图： 移动端效果图： 其实实现这样一个效果很简单，首先看一下栅格参数如何在多种屏幕设备上工作的。 在新闻和资讯的盒子上同时加上样式 演示地址：https://mazey.cn/bootstrap-blueprints/lesson-second-navigation/index.html 源码地址：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-second-navigation。 更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！ Das obige ist der detaillierte Inhalt von浅析Bootstrap中响应式布局的相关知识点. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!navbar navbar-default；然后给里面的nav navbar-nav；最后，给选中的部分加上样式active。一个最基本的 Bootstrap 导航便完成了。
Nach dem Login kopieren
role="navigation"的属性，这里是 HTML5 的标签属性，目的是让标签语义化，方便屏幕阅读器对其进行识别，同时也是为了方便特殊人群浏览。1.1.2 进阶的导航栏
里面加一个样式navbar-header的，这个内再加一个样式navbar-brand的元素。
Nach dem Login kopieren
元素中添加样式dropdown，元素中添加样式dropdown-toggle和属性data-toggle="dropdown"；然后在里面下面在放一个组合，dropdown-menu。
Nach dem Login kopieren
aria-haspopup="true" aria-expanded="false"，同样的，这也是 HTML5 新加的属性，这里引用 Segmentfault 社区姜中秋的回答。aria-haspopup: true表示点击的时候会出现菜单或是浮动元素；false表示没有pop-up效果。aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的。元素，然后在里面加上样式glyphicon glyphicon-triangle-bottom。
padding）的正确显示。caret来实现，这里的箭头是用 CSS 实现了，使用方法：。1.1.3 响应式导航栏
内加上一段固定写法的代码；然后在需要在小屏时折叠的
collapse navbar-collapse的元素，并给这个元素加上任意名称的 ID，例如：
id="navigation-collapse"；最后在响应式按钮元素上加上data-target属性指向要折叠的内容id，例如：data-target="#navigation-collapse"。
Nach dem Login kopieren
1.2 轮播
1.2.1 基础轮播
元素加上一个
id，并在小圆点出指向这个id。
Nach dem Login kopieren
1.2.2 进阶的轮播
1.2.2.1 自动播发
元素添加属性
data-ride="carousel"和样式slide（使轮播播放更平滑），如：
。此时轮播的自动播放时间为 5 秒（默认），如想改变此值设置属性
data-interval="你想要的值"，如我想要 3 秒（3000 ms）轮播一次则设置
data-interval="3000"。另外轮播是默认悬浮停止播放的（
data-pause="hover"），如想禁止悬浮播放设置属性
data-pause="false"即可。
1.2.2.2 添加文字
carousel-caption的，里面存放文字便可正确显示在轮播上面。
夜里总是下雨
Nach dem Login kopieren
1.2.2.3 点击切换
元素，href指向轮播id，添加属性data-slide="prev/next 向前/向后"。
二、实战
col-xs-*，col-sm-*和col-md-*，小屏时（屏幕宽度 ＜ 992px）col-xs-*，col-sm-*生效，col-md-*失效；大屏时（屏幕宽度 ≥ 992px）col-md-*生效，col-xs-*，col-sm-*失效。例如：
Verwandte Etiketten：
Quelle：cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
2023-04-26 17:59:18
2023-04-26 17:47:48
2023-04-26 17:41:42
2023-04-26 17:37:05
2023-04-26 17:31:25
2023-04-26 17:27:32
2023-04-25 19:57:58
2023-04-25 19:53:11
2023-04-25 19:49:11
2023-04-25 19:41:54
Aktuelle Ausgaben
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
BootStrap经典案例分析
138016
Bootstrap常用样式组件与实战
24597
Bootstrap5-让web开发更迅速
34754
