Bootstrap学习(1.1)A:navbar导航简单理解

简单理解

因为自己前端不熟悉,特别是Bootstrap,也只是学习阶段 自己调试,简单记录一些过程

头部缩进

也就是在 <div class="container"> 中的 <div class="navbar-header">

头部缩进(简单效果)

简单看一下现在的效果

当对应的缩进以后(宽度<805px的时候),会变成


头部缩进(简单了解)去掉 navbar-header

简单先屏蔽掉 <div class="container"> 中的 <div class="navbar-header"> 我们看一下效果,(宽度 > 805px的时候)

当对应的缩进以后(宽度 < 805px的时候),会变成

也就是,缩进后,没有对应的 < div > 内容显示了


头部缩进(简单了解)修改 navbar-header

根据上面的结论,我们知道 这块,就是缩进后,显示的 div 一个是Button, 一个是 Bootstrap theme 文字跳转

我们再简单去掉1个 icon-bar 的 span, 看看效果

可以发现对应的位置,也少了一杠 这样,我们更加可以确认了(其实,看看对应的css也可以)

或者,在 这个div 的 文字

可以看见对应没有文字导航的导航栏


简单参考

因为在官网没有对应的具体解释 只有对应demo和顺序 自己百度一下对应的含义 找到对应的参考

根据现在的例子,大体可以总结一下:

  • .navbar-header为左上角Logo文字,有助于增加访问
  • 给导航栏添加链接,只需要简单地添加.nav、.navbar-nav 的无序列表即可
  • 响应式导航栏带一个 .navbar-toggle 以及 两个 data- 元素的按钮
    • 第一个是 data-toggle
    • 第二个是 data-target
      • 指示要切换到哪一个元素
      • 这里切换的元素是, #navbar
      • 比如,我们在单独写一个 #dodo,把对应的 data-target设置为#dodo
        • 原来的展开效果:

        -修改后,展开效果为:


简单demo

这里参考中文官网 http://v3.bootcss.com/getting-started/#examples 还有对应的元素的说明 http://v3.bootcss.com/components/ 也可以参考自己官网下载的小demo https://github.com/2954722256/demo_bootstrap3.3.5/ 欢迎拍砖,本人第一时间修改 具体为 docs 下面的 dodo_examples中

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏守望轩

Visual Studio 2008 每日提示(四)

#031、 把编辑器的背景变成黑色 原文地址:http://blogs.msdn.com/saraford/archive/2007/09/06/did-yo...

33350
来自专栏Python研发

购物时添加数量

10010
来自专栏IT开发技术与工作效率

IntelliJ IDEA 教程 技巧篇本篇概要

13320
来自专栏小俊博客

通过JS显示网站运行时间

16440
来自专栏十月梦想

响应式媒体查询media的用法

        media媒体查询响应式可以实现什么效果?对于不同尺寸的设备相应不同的样式,但是不能兼容移动和pc端的全响应兼容.

13320
来自专栏编程微刊

网页里如何使用js屏蔽鼠标右击事件

在后台管理系统里面,遇到了这样的一个问题,右击ztree菜单,弹出修改界面,但是,现在确实这样的,右击默认弹出功能提示的框框,看上去似乎很影响自己想要的功能,只...

58830
来自专栏听雨堂

为服务器控件加入客户端事件处理的几种方法

    服务器端的处理虽然方便,但因为每次都要PostBack,因而效率不高,很多时候需要为服务器端控件写入客户端事件处理。把各种方法总结一下:     1)在...

20180
来自专栏微信小开发

微信小程序开发-常见问题

知晓程序员,专注微信小程序开发的程序员! 好久没写文章,今天总结一下小程序开发过程中遇到的问题,有不对的地方,欢迎各位指正~ 1、域名必须是HTTPS2、inp...

28290
来自专栏前端架构与工程

解决transition动画与display冲突的几种方法

如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translat...

22460
来自专栏微信小程序开发

微信小程序开发-常见问题

知晓程序员,专注微信小程序开发的程序员! 好久没写文章,今天总结一下小程序开发过程中遇到的问题,有不对的地方,欢迎各位指正~ 1、域名必须是HTTPS 非HT...

55990

扫码关注云+社区

领取腾讯云代金券