鱼C论坛

 找回密码
 立即注册
查看: 3322|回复: 2

[已解决]关于bootstrap导航条

[复制链接]
发表于 2017-9-28 09:05:14 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
  1.         <div class="navbar-header">
  2.           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  3.             <span class="sr-only">Toggle navigation</span>
  4.             <span class="icon-bar"></span>
  5.             <span class="icon-bar"></span>
  6.             <span class="icon-bar"></span>
  7.           </button>
  8.           <a class="navbar-brand" href="#">Brand</a>
  9.         </div>
复制代码

bootstrap里的导航条,class="navbar-toggle collapsed"属性,是当屏幕小于768px时,该button出现,但为啥在导航条最右边呢,上面哪个属性控制它在左还是在右呢,还有<a class="navbar-brand" href="#">Brand</a>,为啥<button>先写的,但是button在a的右面
001.PNG
最佳答案
2017-10-1 13:48:06
要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中。

折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。

第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么

第二个是 data-target,指示要切换到哪一个元素。

三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。

这些会切换为 .nav-collapse <div> 中的元素。

而最终默认的toggle样式,在bootstarp中是默认“右浮动”
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-9-30 10:55:26 | 显示全部楼层

回帖奖励 +1 鱼币

你自己去看bootstrap的css是怎么设置的
.navbar-toggle {
    position: relative;
    float: right;

看到了么,这里有个右浮动,知道什么是右浮动么?不知道自己去查啊

虽然我也是刚接触前端,但是这种问题还是挺好理解的,你自己去看看网页的css就明白了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-10-1 13:48:06 | 显示全部楼层    本楼为最佳答案   
要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中。

折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。

第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么

第二个是 data-target,指示要切换到哪一个元素。

三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。

这些会切换为 .nav-collapse <div> 中的元素。

而最终默认的toggle样式,在bootstarp中是默认“右浮动”
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 16:18

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表