4,.container-fluid
.container-fluid {
padding-right: 15px;
padding-left: 15px; /*还有许多同样是控制 margin 和 padding 的*/
margin-right: auto;
margin-left: auto;
}
.container-fluid:before,
.container-fluid:after, {
display: table;
content: " ";
}
.container-fluid:after {
clear: both;
}
5, navbar-header
@media (min-width: 768px) {
.navbar-header {
float: left; /*其他为控制 margin*/
}
}
/*也有清除浮动,与其他相同,这里略写*/
6, navbar-toggle 切换
.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;
}
.navbar-toggle:focus {
outline: 0; /*与 border 的意义不同,在于使用键盘获取到元素焦点时出现边框*/
}
@media (min-width: 768px) {
.navbar-toggle {
display: none; 屏幕宽度大于768px ,不可见。
}
}
.navbar-default .navbar-toggle {
border-color: #ddd; /*还有几处进行背景颜色的改变*/
}
/*10, .navbar-brand*/
.navbar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
.navbar-brand > img {
display: block;
}
@media (min-width: 768px) {
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
margin-left: -15px; /*小屏幕下,右移15px*/
}
}
/*其余还有一部分是设置背景的*/
/*11, hidden-xs/sm/md/lg*/ /*设置隐藏元素*/
@media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-sm {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-md {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-lg {
display: none !important;
}
}
.visible-print {
display: none !important;
}
/*12, .navbar-collapse*/
.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
/*也存在 清除浮动 效果,有一些关于响应式的设置没有写*/
/*13, nav*/ /*这个仅仅只有清除浮动的功能??*/
/*14, .navbar-nav*/ /*基本上在操作 a 标签*/
.navbar-nav {
margin: 7.5px -15px;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
@media (min-width: 768px) {
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
}
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
margin-bottom: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/*有一些控制 dropdown 的样式*/
.navbar-default .navbar-nav > li > a {
color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333;
background-color: transparent;
}
/*有大量控制 其中 li > a 背景的样式*/