bootstrap实践学习总结（一）

1、导航中左右两块内容，左边logo，右边用户信息等

类如上图，css定义如下：

左侧：.logo      右侧：.navbar

.main-header .logo{ float:left; display:block; width:230px; ……}

.main-header > .navbar{ margin-left: 230px;……margin-bottom:0px;}    最后会添加margin-bottom:0px;是因为bootstrap中对于.navbar的定义，margin-bottom:20px

2、toggle图标的应用

若采用font icon图标来实现，即在class里设置font-family: fontAwesome;另外在class:before{}中设置图标号，如下：

/*toggle图标*/
.main-header .sidebar-toggle{ float: left; padding: 15px; font-family: fontAwesome;}
.sidebar-toggle:before{content: "\f0c9";}

也可如下定义css

.fa-envelope-o:before {content: "\f003"}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

html中

<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
     <i class="fa fa-envelope-o"></i>
     <span class="label label-success">4</span>
</a>

html中直接如下写即可：

<a href="#" class="sidebar-toggle" role="button">
     <span class="sr-only">Toggle navigation </span>
</a>

注：在head里边需要引用font css

<!--font icon-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

3、navbar-nav
navbar-nav主要是在nav的基础上调整菜单项的浮动和内外边距，条件是screen>768，则在768之下，边距又变回原来，则在

@media screen and (max-width:991px){
.navbar-custom-menu .navbar-nav{ margin: 0;}
/*navbar-nav在nav的基础上调整菜单项的浮动和内外边距，条件是screen>768，则在768之下，边距又变回原来的
 *注：此处重写内边距上下的尺寸时，注意，分开写padding-top、padding-bottom
* 因.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
而.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
* 会因为写法的不同而对应覆盖
* */
.navbar-custom-menu .navbar-nav>li>a{ padding-top: 15px; padding-bottom: 15px; line-height: 20px;}
}

4、font icon右上方小图标提示label

<pre name="code" class="html"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
     <i class="fa fa-envelope-o"></i>
     <span class="label label-success">4</span>
</a>

css中对于label的重新定义

/*bootstrap中对于label的定义
 *.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
 *则使用label时，需要对其进行重写
 * */
.main-header .navbar-custom-menu .navbar-nav > li > a > .label{ 
position: absolute;
top:9px;
right: 7px;
line-height: .9;
padding: 2px 3px;
}

5、对于a鼠标悬浮有背景色

.main-header .navbar-custom-menu .navbar-nav > li > a{ background: transparent;}