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;}