一、表单(Form)

源码文件:
_form.scss
mixins/_form.scss

1、按层次结构分:form-group -> form-control/input-group/form-static-control -> 各类标签
2、Form-group/form-control/input-group/form-static-control之类的容器,分为两种显示方式:block、inline-block。而实现input-group水平用的是table-cell。

.input-group {display: inline-table;vertical-align: middle;.input-group-addon,.input-group-btn,.form-control {width: auto;}
}

3、Input-group-addon:类如果插入网页文字图标,会向上一个像素的错位


解决方案:glyphicon不能与其他样式合并使用,而是内部嵌套使用即可,因为glyphicon对top有1个像素的设置:

.glyphicon {position: relative;top: 1px;display: inline-block;font-family: 'Glyphicons Halflings';font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

二、导航条(navbar)

源码文件:
_navbar.scss

1、主要进行了内部区域的划分,如:head、其他区域;以及导航条位置的定位
2、折叠器实现(在4.0已移除),也就是navbar-collapse类,代替的是collapse,在按钮上面弹出隐藏层
   2.1、Navbar-collapse:在大于breakpoint时,会强制显示(由于collapse默认是隐藏的)
3、内容支持nav、brand、form、toggler
4、Navbar-toggler(4.0移除):设定在屏幕小于breakpoint值时(768)显示,而在4.0则直接用collapse来展示此按钮,没有屏幕大小的限制,navbar-toggle的应用也要结合collapse使用
5、Navbar-static-top:只是增加了zIndex,去掉了圆角、边框宽度等内容。
6、Navbar-fixed-top/bottom:都是定位在上方、下方,有浮动影响
7、Navbar-brand:品牌,可以放网页名称、公司Logo等内容
8、Navbar-toggle:用于收缩的单击的图片,他会在小于breakpoint时显示,大于此值就隐藏(并且,toggle显示是右浮动,且作为相对定位元素):

.navbar-toggle {position: relative;float: right;margin-right: $navbar-padding-horizontal;padding: 9px 10px;@include navbar-vertical-align(34px);background-color: transparent;background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214border: 1px solid transparent;border-radius: $border-radius-base;// We remove the `outline` here, but later compensate by attaching `:hover`// styles to `:focus`.&:focus {outline: 0;}// Bars.icon-bar {display: block;width: 22px;height: 2px;border-radius: 1px;}.icon-bar + .icon-bar {margin-top: 4px;}@media (min-width: $grid-float-breakpoint) {display: none;}
}

9、Navbar-nav:原nav的基础进行了一些兼容设置,主是在breakpoint-max下的样式调整,以及在breakpointg下的样式调整,还是去掉默认的背景色,shadow等内容
10、Navbar-form:主要调整所有form都为行内元素
11、Navbar-text、navbar-btn:都在默认的基础上做了相就的兼容设置
12、Navbar提供了default、inverse两种主题,各主题下对其各自的部件都做了相应的样式兼容处理
13、导航条本身的样式不多,本身只提供了toggle、brand两个内容,主要提供了两种主题,以及将dropdown、collapse、form、nav四个部件的组合。

转载于:https://www.cnblogs.com/cqhaibin/p/5540375.html

bootstrap源码分析之form、navbar相关推荐

  1. Appium Android Bootstrap源码分析之简介

    在上一个系列中我们分析了UiAutomator的核心源码,对UiAutomator是怎么运行的原理有了根本的了解.今天我们会开始另外一个在安卓平台上基于UiAutomator的新起之秀--Appium ...

  2. bootstrap源码分析之Carousel

    源码文件: Carousel.scss Carousel.js 实现原理: 隐藏所有要显示的元素,然后指定当前要显示的为block,宽.高自适应 源码分析: 1.Html结构:主要分为以四个部分   ...

  3. Appium基础学习之 | Bootstrap源码分析

    在Appium执行日志流程分析这里已经讲解到Bootstrap的重要作用,今天就来切洋葱切一下它,看看它的真实面目: 源码地址:https://github.com/appium-boneyard/a ...

  4. Bootstrap源码分析之transition、affix

    一.Transition(过滤) 作为一个基础支持的组件,被其他组件多次引用.实现根据浏览器支持transition的能力,然后绑定动画的结束事件: 首先:创建一个Element: 然后:迭代查看此元 ...

  5. Appium Server源码分析之作为Bootstrap客户端

    Appium Server拥有两个主要的功能: 它是个http服务器,它专门接收从客户端通过基于http的REST协议发送过来的命令 他是bootstrap客户端:它接收到客户端的命令后,需要想办法把 ...

  6. Bootstrap导航栏navbar源码分析

    1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...

  7. 手机自动化测试:appium源码分析之bootstrap八

    手机自动化测试:appium源码分析之bootstrap八 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大 ...

  8. 手机自动化测试:appium源码分析之bootstrap十二

    手机自动化测试:appium源码分析之bootstrap十二 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请 ...

  9. 手机自动化测试:appium源码分析之bootstrap七

    手机自动化测试:appium源码分析之bootstrap七 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.poptest测试开发 ...

最新文章

  1. Mnist数据集简介
  2. word录入表单数据 java 导入系统,java导入excel | 怎么把excel中的数据批量导入到word中的表格中...
  3. main方法的格式讲解
  4. 35岁危机可能是真的!调查显示在领英上年龄越大越难找工作,得贴年轻头像才行...
  5. CNN应用之基于Overfeat的物体检测-2014 ICLR-未完待续
  6. 提高计算机系统性能的方法或者技术,互联网内容审计系统性能优化方法的研究-计算机科学与技术专业论文.docx...
  7. binlog以及Canel
  8. highcharts第一篇---简介和使用
  9. clickhouse 小结1
  10. SOFTICE 初使用
  11. python斐波那契数列计算_python计算斐波那契数列
  12. 安装SSMS报错:0x80070643
  13. C语言库函数access的使用
  14. Python停车管理系统毕业设计-附源码271400
  15. 剑灵力士卡刀ahk_技术宅分享 剑灵召唤一键卡刀代码使用教程
  16. 功利,是一种思维模式
  17. Alibaba的COBAR真是强大
  18. python外星人入侵游戏代码_python外星人入侵 游戏源码
  19. ThinkPHP中实现微信支付(jsapi支付)流程
  20. matlab中频率选择性衰落信道,浅海水声信道模型分析及频率选择性衰落仿真

热门文章

  1. iOS Hacker 使用Reveal分析App的UI界面
  2. 机器学习物语(3):回归问题
  3. hihoCoder #1445 : 后缀自动机二·重复旋律5
  4. numpy高级操作,求高维矩阵的距离矩阵(方阵)以及 求某一个维度的累加和 , 矩阵切片操作
  5. linux, configure --prefix=/有什么用
  6. ROS消息格式-vision_msgs/Detection2DArray (后续创作中...)
  7. 普通计算机硬件,将普通显示器更改为触摸屏_计算机硬件和网络_IT /计算机_数据...
  8. 变压器符号_3D动画解析油浸式和干式变压器,看完让你秒懂
  9. linux文件内容添加序号,nl命令将指定的各个文件添加行号编号序号标注后写到标准输出...
  10. php 张开收缩显示,js实现可以点击收缩或张开的悬浮窗