全面解析全面解析Bootstrap中中form、、navbar的使用方法的使用方法
一、表单（一、表单（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;
评论0