先要拆分:
.navbar
- 先变成相对定位
- 设置最小高度为50px;
- 设置底部边距为20px
- 然后设置一个 透明边框!
- 边框倒角 4px //@media (min-width:768px) - 最小宽度为 768px 时生效(大于等于 768px的时候)
.navbar-default
- 一上来就设置了个背景和边框。
- default 对应的是 inverse 反向
.navbar-header
- margin-right: -15px; margin-left: -15px; // container的情况下。
- @media (min-width: 768px) //最小宽度为 768px 时,margin 是0; // container的情况下。
- float:left;
.navbar-brand
- 设置字体颜色
- 设置了hover
- 如果是inverse则设置反色
- 浮动为 left
- height:50px // 之前设置了min-height:50px ^_^
- padding:15px ,字体大小 18,以及 line-height:20px 保证居中的;
- 下面的img 设置为了 block,独占一行
.navbar-toggle
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;- @media (min-width:768px){display:none}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
div.collapse
- display: none;
- visibility: hidden;
div.navbar-collapse